Question

我正在尝试使用复选框和文本字段，一旦选中该复选框，就必须使用该字段，我正在尝试使用自定义方法使用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>

任何帮助都会很棒。

Answer 1

尝试在$（'form'）之后添加$ .validator.addMethod。验证。

编辑：

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

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

EDIT2：Demo

我的不好，既然我明白了你的需要，我不会建议你的需求定制功能。

你可以通过替换required：true with，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' 
                    }
                    }
        });
})

Answer 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 Link：http://jsfiddle.net/74ye34zg/4/

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

2 个答案: