Skip to content

Validation issue for required fields with multiple inputs (e.g. checkboxes) #87

@jurajsulek

Description

@jurajsulek

The issue occurs when dealing with a required field, such as checkboxes, containing multiple inputs. If you configure the field to unhide/hide based on certain conditions, submitting the form becomes impossible when the field is hidden.

The problem lies within the functions 'rerequireField' and 'derequireField,' where the $field parameter in this case is not single field but an array of fields.

Here is an example how i changed it on the version we are curently using:

/**
* Make a required field to a non-required field (private)
*
* @param {jQuery} $field
* @returns {void}
*/
var derequireField = function ($field) {
if($field.length > 1) {
$field.each(function (index) {
$(this).prop('required', false);
$(this).removeAttr('data-parsley-required');
$(this).removeAttr('data-powermail-required');
$(this).data('powermailcond-required', 'required');
});
} else {
if ($field.prop('required') || $field.data('parsley-required')) {
$field.prop('required', false);
$field.removeAttr('data-parsley-required');
$field.removeAttr('data-powermail-required');
$field.data('powermailcond-required', 'required');
}
}
};

/**
 * Make a inactive required field required again
 *
 * @param {jQuery} $field
 * @returns {void}
 */
var rerequireField = function ($field) {
  if($field.length > 1) {
    $field.each(function (index) {
      if ($(this).data('powermailcond-required') === 'required') {
        if (isHtml5ValidationActivated()) {
          $(this).prop('required', 'required');
          $(this).prop('data-powermail-required', 'required');
        } else if (isParsleyValidationActivated()) {
          $(this).prop('required', 'required');
          $(this).prop('data-powermail-required', 'required');
        }
      }
      $(this).removeData('powermailcond-required');
    });
  } else {
    if ($field.data('powermailcond-required') === 'required') {
      if (isHtml5ValidationActivated()) {
        $field.prop('required', 'required');
      } else if (isParsleyValidationActivated()) {
        $field.prop('required', 'required');
      }
    }
    $field.removeData('powermailcond-required');
  }
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions