Пользовательский метод проверки не работает - jQuery validate plugin

Я пытаюсь установить флажок и текстовое поле, после того, как флажок установлен, это поле должно быть обязательным, я пытаюсь сделать это с помощью jQuery validate plugin, используя специальный метод как показано ниже:Пользовательский метод проверки не работает - jQuery validate plugin

$(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 ПОСЛЕ $ ('form').

Edit:

Кроме того, я вижу, что вы не использовали правило, которое вы создали, а именно «ifIsCrime».

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

EDIT2: Demo

Мой плохо, теперь я понимаю, что вам нужно, я не хотел бы предложить пользовательскую функцию для вашего требования.

Вы можете сделать это, заменив требуемый: 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/изменение рассматриваемого элемента. В этом случае сообщение об ошибке обновляет onblur/изменение текстового поля 'test', а также на submit. –

Код ниже может помочь вам. попробуй.

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

ответ

Смежные вопросы