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

问题描述：

我想要有一个复选框和一个文本框，一旦复选框被选中，该字段必须被要求，我试图用jQuery做到这一点使用自定义方法验证插件如下图所示：自定义验证方法不工作 - jQuery验证插件

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

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

<!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> \t \t \t 
 
       <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"> 
 
       \t <div class="col-sm-12"> 
 
\t \t     <div class="form-group"> 
 
\t \t      <input class="form-control" type="text" id="txtJustification" placeholder="Click here to enter text" name="txtJustification" /> 
 
\t \t     </div> 
 
\t \t \t \t \t </div> 
 
       </div> 
 

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

 

 

 
\t \t \t \t 
 
     </form> 
 

 

 

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

 

 
</body> 
 
</html>

任何帮助将是巨大的。

答

尝试添加$ .validator.addMethod AFTER $（'form'）。validate。

编辑：

另外，我看到你没有使用你所创建的规则，即“ifIsCrime”。

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

EDIT2：Demo

我的坏，现在我明白你需要什么，我不会建议你要求的自定义功能。

你可以通过替换required来实现：true，必需：'#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' 
        } 
        } 
     }); 
})

它没有正常工作。 –

谢谢，听起来像一个伟大的解决方案！，但有一个问题，当我检查框时，它不会更新错误消息，直到我再次提交，是吗？ –

验证完成时显示错误消息。对有问题的元素进行验证/更改。在这种情况下，错误消息会更新onblur /更改文本框'test'并提交。 –

答

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

$(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中的复选框并提交表单时，它会提交并且不显示验证。 –

是的大卫赫姆西，我也想知道这件事。请在下面的链接http://i59.tinypic.com/2r736fp.jpg找到它的图像，它有正确的验证。但是相同的代码不能在新的jsfiddle选项卡中工作。 – Kavin

我明白了。错误是在jsfiddle外部资源。工作示例在这里https://jsfiddle.net/74ye34zg/3/ – Kavin

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

相关推荐