自定義驗證方法不工作 - 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>

任何幫助將是巨大的。

來源

2015-09-06 David Hemsey

嘗試添加$ .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' 
        } 
        } 
     }); 
})

來源

2015-09-06 13:32:04

它沒有正常工作。 –

謝謝，聽起來像一個偉大的解決方案！，但有一個問題，當我檢查框時，它不會更新錯誤消息，直到我再次提交，是嗎？ –

驗證完成時顯示錯誤消息。對有問題的元素進行驗證/更改。在這種情況下，錯誤消息會更新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/

來源

2015-09-06 13:45:30 Kavin

感謝Kavin，但是當您選擇jsfiddle中的複選框並提交表單時，它會提交併且不顯示驗證。 –

是的大衛赫姆西，我也想知道這件事。請在下面的鏈接http://i59.tinypic.com/2r736fp.jpg找到它的圖像，它有正確的驗證。但是相同的代碼不能在新的jsfiddle選項卡中工作。 – Kavin

我明白了。錯誤是在jsfiddle外部資源。工作示例在這裏https://jsfiddle.net/74ye34zg/3/ – Kavin

自定義驗證方法不工作 - jQuery驗證插件

回答

相關問題