у меня есть в индексе. php страница две формы, форма1 содержит обязательный ввод и кнопка проверки, которая позволяет скрыть форму1 и отображение формы2, а форма2 содержит <h1> i am in form2 </h1>, я применил систему проверки из jQuery , но это не работает.
<h1> i am in form2 </h1>
index. php
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Makes "field" always required.</title> <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> </head> <body> <div id="form1"> <form id="myform"> <label for="field">Required: </label> <input type="text" class="left" id="field" name="field"> <br/> <input type="submit" class="add-all" value="Validate!"> </form> </div> <div id="form2"> <h1>form2</h1> </div> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
jQuery код
<script> // just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#myform" ).validate({ rules: { field: { required: true } } }); $(document).ready(function() { $("#form2").hide(); $('.add-all').on('click', function(e) { $("#form1").hide(); $("#form2").show(); }) }) </script>
Проверьте этот рабочий фрагмент.
// just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: "valid" }); $("#myform").validate({ rules: { field: { required: true } } }); $(document).ready(function () { $("#form2").hide(); $("#myform").submit(function () { if ($(this).valid()) { // Hide form1 and show form 2 when form1 is valid $(this).hide(); $("#form2").show(); } }) })
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Makes "field" always required.</title> <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> </head> <body> <div id="form1"> <form id="myform"> <label for="field">Required: </label> <input type="text" class="left" id="field" name="field"> <br /> <input type="submit" class="add-all" value="Validate!"> </form> </div> <div id="form2"> <h1>form2</h1> </div> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> </body> </html>
Я удалил ваше событие click, замененное событием submit, потому что вам нужно скрыть / показать форму с помощью функции valid(), а не просто click событие.
click
submit
valid()
Надеюсь, это поможет!
Помещая событие нажатия на кнопку, функция выполнялась напрямую, без проверки проверки. Я удалил событие click из кнопки и вызвал функцию при успешной проверке в соответствии с документами, правильный путь к этому таков:
$(document).ready(function() { // just for the demos, avoids form submit jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#myform" ).validate({ rules: { field: { required: true } }, submitHandler: function() { alert("Submitted!") var validator = $( "#myform" ).validate(); console.log(validator); onsubmit(); } }); $("#form2").hide(); function onsubmit() { $("#form1").hide(); $("#form2").show(); } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Makes "field" always required.</title> <link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> </head> <body> <div id="form1"> <form id="myform"> <label for="field">Required: </label> <input type="text" class="left" id="field" name="field"> <br/> <input type="submit" class="add-all" value="Validate!"> </form> </div> <div id="form2"> <h1>form2</h1> </div> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>