[系统验证无法使用jQuery隐藏形式工作

问题描述 投票:0回答:2

我在index.php页面中有两种形式,form1包含必需的输入,而validate按钮允许隐藏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>
javascript jquery
2个回答
0
投票

检查此工作片段。

// 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事件隐藏/显示表单。

希望这会有所帮助!


0
投票

通过将click事件放置在按钮上,可以直接执行该功能,而无需进行验证检查。我从按钮上删除了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>
© www.soinside.com 2019 - 2024. All rights reserved.