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

【问题标题】：Custom validate method not working - jQuery validate plugin自定义验证方法不起作用 - jQuery 验证插件
【发布时间】：2015-09-06 13:04:34
【问题描述】：

我试图有一个复选框和一个文本字段，一旦选中了复选框，该字段就必须是必需的，我正在尝试使用 jQuery 验证插件使用自定义方法来执行此操作，如下所示：

$(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>

任何帮助都会很棒。

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

尝试在 $('form').validate 之后添加您的 $.validator.addMethod。

编辑：

另外，我发现您没有使用您创建的规则，即“ifIsCrime”。

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

EDIT2：Demo

我的错，既然我了解了您的需求，我不会建议您使用自定义函数来满足您的要求。

您可以通过将 required: true 替换为, required: '#chckCrime:checked' 来做到这一点。

供您参考：jQuery validate - set conditional rules based on user selection

还有一个演示：

<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 是：

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

【讨论】：

谢谢，听起来是个不错的解决方案！但是有一个问题，当我选中该框时，它不会更新错误消息，直到我再次提交，对吗？
验证完成时显示错误消息。验证是在相关元素的模糊/更改上完成的。在这种情况下，错误消息会更新文本框“测试”的模糊/更改以及提交。

【解决方案2】：

下面的代码可以帮助你。试试看。

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

【讨论】：

感谢 Kavin，但是当您选择 jsfiddle 中的复选框并提交表单时，它会提交并且不显示验证。
是的，David Hemsey，我也想知道这一点。请在下面的链接i59.tinypic.com/2r736fp.jpg 中找到图像，它具有正确的验证。但是相同的代码在新的 jsfiddle 选项卡中不起作用。
我明白了。错误在 jsfiddle 外部资源中。工作示例在这里jsfiddle.net/74ye34zg/3
勾选后错误信息没有更新，直到我点击提交，这正常吗？我怎样才能让它响应？
David Hemsey 我在之前的回答中又发现了一个错误。如果您在对齐文本框中输入文本，它仍然会显示验证错误并阻止表单提交。现在我已经更新了我的答案。