CODEWITHSUNDEEP
javascriptjqueryvalidation
David Hemsey
David Hemsey

Reputation: 277

Custom validate method not working - jQuery validate plugin

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.

Upvotes: 0

Views: 1146

Answers (2)

Kavin
Kavin

Reputation: 122

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/

Upvotes: 0

Anudeep Rentala
Anudeep Rentala

Reputation: 160

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' 
                    }
                    }
        });
})

Upvotes: 1

Related Questions