Applying validation on condition using jQuery Validate

Question

Good morning guys, I wonder if you may help me on this issue: I'm applying a validation to a select element as required when another input value meets a condition. I'm using the validation jQuery plugin in order to do it. This is the pseudo-code: if(textbox == "valueX"){mySelectEelement is required;} (means that I must choose one value from the select element.). So for some reason the select element is not taking the validation I want to apply.

Please take a look on the full sample code I created for this purpose at Plunker:

<html lang="en">
<head>
 <title></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$( function() {
$.validator.setDefaults({
      //debug: true,
      success: "valid"
    });

    $( "#myform" ).validate({
      rules: {
        borough: {
              required: false
        }
      }
    });

    $('#state').on('change', function () {
    if ($(this).val().toUpperCase() == "NY" || $(this).val().toUpperCase() == "NEW YORK") {
        $('#borough').rules('add', {
            required: true
        });
    } else{
       $('#borough').rules('remove');
    }
});    
} );
</script>

</head>
<body>
<form id="myform">
<div>
<p id="pid"></p>
<input id='text' type='text' value='other'/>
</div>
<br/>
 <input type="text" id="state" name="state"  />

  <select name="borough" id="borough">
  <option value="" select="selected"></option>
  <option value="Staten Island">Staten Island</option>
  <option value="Brooklyn">Brooklyn</option>
  <option value="Queens">Queens</option>
  <option value="NY">NY</option>
  </select>
 </form></body> </html>

Please include all relevant code within the OP itself. You also never explained the problem with your code or asked a question. Thanks. — Sparky
– Sparky, Commented Sep 8, 2016 at 14:20
The explanation is totally clear, I said I was trying that so if I say I need help in order to perform that task and expose the code is because it's not working well! — John
– John, Commented Sep 8, 2016 at 15:11
Thanks. Obviously your question was clear to me as I answered it. However, it was not written very well for SO's format. Please review this and this for more insight about my first comment. This article might even be better for explaining: codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question — Sparky
– Sparky, Commented Sep 8, 2016 at 15:48
Thank you again @Sparky, I think the statement was good like that and don't needed to apply all those tutorial rules, I prefer keep simple. The important thing is that you understood and gave an accurate answer. However is good to know some new rules for the future. — John
– John, Commented Sep 8, 2016 at 17:26

Sparky · Accepted Answer · 2016-09-08 16:39:11Z

7

No need for external handlers and functions. You would use the depends property under required within the rules object to contain your conditional logic...

$("#myform").validate({
    rules: {
        borough: {
            required: {
                depends: function(element) {
                    if ($('#state').val().toUpperCase() == "NY" || $('#state').val().toUpperCase() == "NEW YORK") {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        }
    }
});

DEMO: jsfiddle.net/ubkb0pmd/

And it works just as well without depends....

$("#myform").validate({
    rules: {
        borough: {
            required: function(element) {
                if ($('#state').val().toUpperCase() == "NY" || $('#state').val().toUpperCase() == "NEW YORK") {
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
});

DEMO 2: jsfiddle.net/ubkb0pmd/1/

edited Sep 8, 2016 at 16:39

answered Sep 8, 2016 at 14:30

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

John Over a year ago

Yes, this is exactly what I was missing, the depends object. Thank you.

John Over a year ago

Yes I just tested it like this and it works too, I see my issue is that I was creating the rules in a separate statement (function) as all other lines are pretty much the same!

Sparky Over a year ago

@John, actually, your original method should have worked too, although not as efficiently. Your root problem was that you declared borough as required: true right from the start, which takes precedence long before the user types anything into state.

Collectives™ on Stack Overflow

Applying validation on condition using jQuery Validate

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related