How to: Use data attribute for conditional validation

Question

Using jQuery Validate, I am doing a conditional validation on a select and a text field: the text field (#specialization) must be filled if a particular option (<option value="doctor">) was choosen from the select field (#job)

So far so good, here is a working copy: https://jsfiddle.net/vzx9paxz/2/

Now, I don't like to mess with too much JS code and I'd like to take advantage of the data-rule-required attribute. So, I'd like to evaluate the expression ($('#job').val() === 'doctor') directly in the HTML code, removing it from the Javascript: if it returns true, the #specialization field must be filled, otherwise it can be empty

Something like this:

<input type="text" data-rule-required="return ($('#job').val() === 'doctor')" class="form-control" id="specialization" name="specialization">

Of course this code doesn't work: I tried other expressions, like javascript:return ($('#job').val() === 'doctor') but with no luck at all...

Sparky · Accepted Answer · 2017-06-13 23:06:39Z

1

How to: Use data attribute for conditional validation

You can't.

data-rule-required="return ($('#job').val() === 'doctor')"

Even if you could execute JavaScript inside of a data attribute, which you can't, the jQuery Validate plugin cannot interpret it (see the JS errors in the console). Normally, it would be looking for a true or false string within data-rule-required... but it cannot execute a conditional expression.

In other words, no matter what you put as a value for data-rule-required, the jQuery Validate plugin will interpret it as a string and choke on anything other than "true" or "false".

edited Jun 13, 2017 at 23:06

answered Jun 13, 2017 at 19:24

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Over a year ago

Thanks, got it! :-)

Chukwu Remijius · Accepted Answer · 2017-06-13 18:59:10Z

0

Data attribute cant trigger event. Better write a javascript function and call it with a click, focus, resize, mouseup...event. Like:

 <input class="user" name="">

 <script>
  $(".user").focus(function(){
 if($(this).val()=="doctor"){
 // do what ever
  }
  });

answered Jun 13, 2017 at 18:59

Chukwu Remijius

3231 silver badge14 bronze badges

1 Comment

Sparky Over a year ago

You're right about the data attribute. However, the OP does not need to write an event handler, because the conditional can be placed within the plugin's .validate() method.

jlh · Accepted Answer · 2020-03-10 10:49:11Z

What OP asks is not possible in general. However in some simple cases, conditional validation is possible using exclusively data attributes. Here's an example:

<form action="#" method="post">
    <label for="password">Set new password</label>
    <input type="password" id="password" name="password">
    <br>
    <label for="password-confirm">Confirm password</label>
    <input type="password" id="password-confirm"
        data-rule-equalto="#password"
        data-rule-required="#password:filled">
    <br>
    <input type="submit" value="save">
</form>

See it live: JSFiddle

It will not require either password fields, unless the first field is non-blank, then the second field will be required. This works thanks to the extra selectors provided by jQuery Validate.

Other useful selectors: :checked, :unchecked, :blank.

Collectives™ on Stack Overflow

How to: Use data attribute for conditional validation

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related