Onclick validate form, если действительная только форма отправки

У меня есть html-форма, которую я сначала хочу проверить с помощью библиотеки проверки jQuery jquery.validate.min.js и , если форма действительна, отправьте форму в указанное место.Onclick validate form, если действительная только форма отправки

я попытался следующее:

<html> 
    <head> 
     <link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css"> 
     <script src="../../common/view/js/jquery.js"></script> 
     <script src="../../common/view/js/bootstrap.min.js"></script> 
     <script src="../../common/view/js/jquery.validate.min.js"></script> 

    </head> 

    <body> 
     <form method="post" action="stock-c.php" id="issueform" name="issueform"> 
      <input type="text" name="pid"/> 
      <input type="button" name="button1" id="button1"/> 
      <script type="text/javascript" src="js/issueValidation.js"></script> 

      <!--Modal-->    
      <div id="myModal" class="modal fade" role="dialog"> 
       <div class="modal-dialog"> 
        <!--info to be displayed--> 
        <input type="submit" value="submit"/> <!--Explain1--> 
       </div> 
      </div> 


     </from> 
    </body> 
</html>

issueValidation.js

$(document).ready(function() {   
$validator= $("#issueform").validate({ 
     rules: { 
       pid: "required", 
     }, 
     messages: { 
       pid: "Please enter a value", 
     }, 
     errorElement: "em", 
     errorPlacement: function (error, element) { 
       // Add the `help-block` class to the error element 
       error.addClass("help-block"); 

       if (element.prop("type") === "checkbox") { 
         error.insertAfter(element.parent("label")); 
       } else { 
         error.insertAfter(element); 
       } 
     }, 
     highlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success"); 
     }, 
     unhighlight: function (element, errorClass, validClass) { 
       $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error"); 
     } 
}); 

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
}); 

});

Explain1: Я положил кнопку отправки в классе модальных, который находится в форме тегов, так что, когда щелкнули данные формы, которые будут отправлены.

В идеале я хочу прекратить подачу до тех пор, пока форма не будет проверена. Если форма действительна, я должен иметь возможность просмотреть данные моей формы в модальном формате и нажать кнопку отправки на ней, тем самым сделав ее поданной.

Я попытался использовать submitHandler в плагине проверки jQuery (который выполняется только тогда, когда в форме нет никаких инвалидов), чтобы сделать это, мне нужно изменить вход [type = "button"] для ввода [ type = "submit"], поскольку обработчик работает только на кнопку отправки. Затем я получаю две кнопки отправки в той же форме, и форма не отправляется должным образом.

Пожалуйста, помогите мне исправить эту проблему. В качестве примера, мне нужно проверить данные, введенные в форму, и запросить подтверждение у пользователя в модальном режиме. Если пользователь подтверждает в модальном режиме, данные в форме будут отправлены. Если мой метод является ненужным методом для достижения этого результата, альтернативные предложения также приветствуются, если он соответствует указанному выше требованию. Спасибо.

источник

2016-07-20 user3889963

В идеале я хочу прекратить подачу до тех пор, пока форма не будет проверена.

Это то, что уже делает плагин jQuery Validate.

Ваш код ...

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
});

As per docs, .valid() также возвращает логическое значение, поэтому обработчик щелчка часть кода выше, может быть значительно упрощен ...

$('#button1').on('click', function() { 
    if ($("#issueform").valid()) { 
     // do something here when the form is valid 
     $('#myModal').modal('toggle'); 
    } 
});

Я знаю, что вы уже упоминалось об этом, но следующее на благо будущих читателей:

Обратите внимание, что ваш обработчик click требуется только потому, что input является type="button".

В качестве альтернативы, при использовании type="submit" ваш обработчик click не требуется, так как щелчок автоматически захватывается плагином. Кроме того, в этом случае вы должны использовать the submitHandler option, чтобы содержать любой код для запуска, когда форма действительна.

источник

2016-07-20 14:46:22 Sparky

Красивые и простые ... :-) Не могу поверить, что я пропустил это возвращение в документах. Большое спасибо... – user3889963

Onclick validate form, если действительная только форма отправки

ответ

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