系统验证不能使用 jQuery 隐藏表单答案

【问题标题】：system validate not work using jQuery hidden form系统验证不能使用 jQuery 隐藏表单
【发布时间】：2020-03-22 15:22:21
【问题描述】：

我在 index.php 页面中有两个表单，form1 包含必需的输入和一个允许隐藏 form1 和显示 form2 的验证按钮，而 form2 包含 <h1> i am in form2 </h1>，我已经应用了 jQuery 的验证系统，但它没有不行。

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>

【问题讨论】：

当表格1有效并提交时，您要显示表格2吗？
@VanTho 没错
我已经发布了我的答案，你现在可以查看

标签： javascript jquery

【解决方案1】：

检查这个工作的sn-p。

// 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 事件。

希望这会有所帮助！

【讨论】：

【解决方案2】：

通过在按钮上放置点击事件，该函数被直接执行而无需等待验证检查。我从按钮中删除了点击事件，并根据文档调用了验证成功的函数，正确的方法是这样。

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

【讨论】：