Custom validate method not working - jQuery validate plugin

Question

I am trying to have a checkbox and a textfield, once the checkbox is checked, the field has to be required, I am trying to do this with jQuery validate plugin using a custom method as shown below:

$(function(){
  $.validator.addMethod('ifIsCrime',function(value, element){
  return $("#chckCrime").is(':checked');},'This is a required field');

  $('form').validate({
    rules: {
     txtJustification:{
                      required: true,
        },
    }
  });
  
});

<!DOCTYPE html>
<html>
<head>
    <meta name="WebPartPageExpansion" content="full" />
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
</head>
<body>
   

    <div class="container-fluid" id="container">
       



        <form>
             <fieldset>
                <legend>Personal Information</legend>   
                <div class="form-group">
                  <label for="chckCrime">Have you even been convicted of a crime? If so, please provide details</label>
                                <input type="checkbox" id="chckCrime" class="checkbox" name="chckCrime" /> 
                 
                </div>
               
                <div class="row">
                 <div class="col-sm-12">
                  <div class="form-group">
                      <input class="form-control" type="text" id="txtJustification" placeholder="Click here to enter text" name="txtJustification" />
                  </div>
     </div>
                </div>

               <div class="row submitrow">
     <div class="col-sm-12">
       <input type="submit" value="Submit My Application" class="btn btn-primary pull-right">
     </div>
               </div>
          </fieldset>



    
        </form>



    </div><!-- container-->


</body>
</html>

Any help would be great.

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Try adding your $.validator.addMethod AFTER $('form').validate.

Edit:

Also, I see that you haven't used the rule you've created, namely "ifIsCrime".

rules: {
                    txtJustification:{
                      required: true, ifIsCrime: true
                   }
        }

EDIT2: Demo

My bad, now that I understand what you need, I wouldn't suggest a custom function for your requirement.

You could do it by replacing required: true with, required: '#chckCrime:checked'.

For your reference: jQuery validate - set conditional rules based on user selection

and a demo:

<form id="form">
    <input class="form-control" type="text" id="test" placeholder="Click here to enter text" name="test" />
    <input type="checkbox" id="chckCrime" class="checkbox" name="chckCrime" /> 
    <input type="submit" value="Submit My Application" class="btn btn-primary pull-right">
</form>

JS being:

$(function(){
    $('#form').validate({
                rules: {
                    test:{
                      required: '#chckCrime:checked' 
                    }
                    }
        });
})

Thanks, sounds like a great solution!, but one question, when I check the box, it doesn't update the error message until I submit again, is that right? — David Hemsey, Sep 06 '15 at 14:16
Error message is displayed when validation is done. Validation is done onblur/change of the element in question. In this case, the error message updates onblur/change of the textbox 'test' and also on submit. — Anudeep Rentala, Sep 06 '15 at 14:25

Kavin · Answer 2 · 2015-09-06T14:23:41.367

0

The below code can help you. try it.

   $(function(){
    $.validator.addMethod('ifIsCrime',function(value, element){
         if($("#chckCrime").is(':checked') && $("#txtJustification").val()==""){
             return false;
         }return true;},'This is a required field');

    $('form').validate({
            rules: {
                txtJustification:{
                  ifIsCrime: true,
                },
            }
    });

});

Jfiddle Link: http://jsfiddle.net/74ye34zg/4/

edited Sep 06 '15 at 14:23

answered Sep 06 '15 at 13:45

Kavin

112
11

Thanks Kavin, but when you select the checkbox in your jsfiddle, and submit the form, it submits and doesn't show a validation. – David Hemsey Sep 06 '15 at 13:50
Yes David Hemsey, i am also wondering about this. Please find the image in the below link http://i59.tinypic.com/2r736fp.jpg it has the correct validation. But same code not working in the new jsfiddle tab. – Kavin Sep 06 '15 at 14:00
I got it. The error is in jsfiddle external resource. The working example is here https://jsfiddle.net/74ye34zg/3/ – Kavin Sep 06 '15 at 14:10
The error message doesn't update when I check the box, until I click submit, is that normal? how can I make it responsive? – David Hemsey Sep 06 '15 at 14:17
David Hemsey i found one more bug in my previous answer. If you entered the text in justification text box still it shows the validation error and block the form submit. Now i have updated my answer. – Kavin Sep 06 '15 at 14:26
This answer is missing its educational explanation. – mickmackusa Nov 24 '20 at 23:07

Custom validate method not working - jQuery validate plugin

2 Answers2