0

I have a form where the required field is depend on another form field value. So the required rule may be true or false depend on the other field. The issue is accept rule should be there if only the required is true. How can I do that?

...,
fieldA: {
     maxlength: 3,
     accept: "[0-9]{3}",
     required: function() {
          if($('#fieldB').val() == 'ABCD') {
               return false;
          } else {
               return true;
          }
     }
},...

Thanks in advance.

Saumini Navaratnam
  • 8,439
  • 3
  • 42
  • 70
  • What's wrong with the code you've written? it seems to implement the `dependency-callback` feature at https://jqueryvalidation.org/required-method – Barmar Apr 19 '16 at 03:50
  • It's similar to the example there that makes parent required if age < 13. – Barmar Apr 19 '16 at 03:51
  • @Barmar The issue with my current code is the accept rule is applying when required is false. I want the accept rule is to work only when required is true – Saumini Navaratnam Apr 19 '16 at 03:57
  • You only made the `required` rule conditional on the other field. The `accept` rule is always applied. – Barmar Apr 19 '16 at 04:06
  • Why do you have a regular expression in the `accept:` rule? It's supposed to contain a comma-separated list of MIME types to allow for a `file` input. – Barmar Apr 19 '16 at 04:07
  • @Barmar yes, I need help on how can I achieve `accept` rule to apply when required is true. – Saumini Navaratnam Apr 19 '16 at 04:09
  • The problem is that you're confused about what the `accept` rule does. It's only for `type="file"`, and it's used to restrict the types of files that the user can upload. It's ignored for any other type of input. – Barmar Apr 19 '16 at 04:10
  • 1
    If you want to match a regular expression, see http://stackoverflow.com/questions/13785529/add-regex-to-jquery-validate – Barmar Apr 19 '16 at 04:12
  • @Barmar I notice there is a custom rule added with the name `accept` in the code, which validate for regular expression. – Saumini Navaratnam Apr 19 '16 at 04:32
  • The rule name caused a bit of confusion. I fixed the issue by editing the custom rule for checking whether element is optional – Saumini Navaratnam Apr 19 '16 at 04:33

2 Answers2

1

I didn't realize the 'accept' rule is a custom rule. I edited the code to check whether its an optional field. this.optional(element)

jQuery.validator.addMethod("accept", function(value, element, param) {
    return this.optional(element) || value.match(new RegExp("^" + param + "$"));
});

@Barmar Thanks for the help.

Saumini Navaratnam
  • 8,439
  • 3
  • 42
  • 70
  • 1
    This is the right solution. The general pattern for writing custom rules should always include a `this.optional` check. See http://stackoverflow.com/questions/3526236/jquery-validator-plug-in-validate-optional-field and all the examples at https://jqueryvalidation.org/jQuery.validator.addMethod/ – Barmar Apr 19 '16 at 15:22
0

Unfortunately your required function will likely only get called when the form is rendered, and won't update the dependent field as the independent one changes. You could use a dymanic ui library like react or knockout, or you could simply bind a .change() handler to the independent field that manipulates the attributes of the other.

You could also bind something to .submit() that prevents submission if the configuration is not correct.

Jake
  • 165
  • 8
  • The dependency callback is supposed to run at the time when it's validating, not when the form is rendered. – Barmar Apr 19 '16 at 04:00