自定义验证方法不起作用-jQuery验证插件

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: 我试图有一个复选框和一个文本字段，一旦选中该复选框，则必须填写该字段，我试图使用jQuery validate插件使用自定义方法来做到这一点，如下所示：

 $(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. 任何帮助都会很棒。

Answer 1

Try adding your $.validator.addMethod AFTER $('form').validate. 尝试在$（'form'）。validate之后添加$ .validator.addMethod。

Edit: 编辑：

Also, I see that you haven't used the rule you've created, namely "ifIsCrime". 另外，我看到您还没有使用创建的规则，即“ ifIsCrime”。

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

EDIT2: Demo EDIT2：演示

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'. 您可以通过将required：true替换为required：'#chckCrime：checked'来实现。

For your reference: jQuery validate - set conditional rules based on user selection 供您参考： jQuery validate-根据用户选择设置条件规则

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: JS正在：

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

Answer 2

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/ Jfiddle链接： http ： //jsfiddle.net/74ye34zg/4/

自定义验证方法不起作用-jQuery验证插件

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-09-06 13:32:04

解决方案2
0 2015-09-06 13:45:30

自定义验证方法不起作用-jQuery验证插件

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-09-06 13:32:04

解决方案2 0 2015-09-06 13:45:30

解决方案1
1 已采纳 2015-09-06 13:32:04

解决方案2
0 2015-09-06 13:45:30