Validate onchange input fields jQuery Validate plugin

Question

There is a scenario where we have a dropdown to choose from values and also other option to specify value in a text input field.

Whenever, other option is chosen, a text field is displayed and then I want it to be validated.

select is:

<select class="form-control" name="amount_sch" id="amount_sch">
    <option value="" selected>Please Select</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="othr_amt">Other, Please Specify</option>
</select>

input is:

<input type="text" id="amount_sch_other" name="amount_sch_other"
 class="form-control no-extras" placeholder="Enter Amount" 
 style="display:none;"/>

JQuery to show/hide:

$("#amount_sch").change(function() { 
  if ( $(this).val() == "othr_amt") {
    $("#amount_sch_other").show();  
  }
  else{
    $("#amount_sch_other").hide();  
  }
});

rules option within .validate()...

amount_sch : {
    required : true,
}

With this, only select is validated, but how can I validate text field when it is visible?

Have you tried to solve this yourself yet? If so, where did it go wrong? — Sparky
– Sparky, Commented Aug 10, 2015 at 14:31

Sparky · Accepted Answer · 2015-08-10 14:42:51Z

1

By default, the jQuery Validate plugin will dynamically ignore validation for any field that is hidden. So you simply need to declare validation rules for the text box and let the plugin automatically do its thing.

rules: {
    amount_sch: {
        required: true,
    },
    amount_sch_other: {
        required: true,
    }
}

Whenever the text field shown, it will be validated; and when it's hidden, it will not be validated.

DEMO: http://jsfiddle.net/Lcdexmwc/

edited Aug 10, 2015 at 14:42

answered Aug 10, 2015 at 14:14

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Comments

Alaeddine · Accepted Answer · 2016-07-11 11:36:51Z

0

The jQuery validate plugin by default ignore all hidden elements.

For your case even you set your field to required as Sparky mentioned. Or simply add ignore: [] to push the plugin to validate all hidden elements in the form.

$form.validate({
    ignore: [],
...

answered Jul 11, 2016 at 11:36

Alaeddine

1,7072 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

Validate onchange input fields jQuery Validate plugin

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related