Question

我有3个部分，每个部分都有一些输入提交了必要的验证。如果我点击提交按钮需要验证不工作，第1部分进入第2部分，同样在第3部分未经验证。请帮助我。

<!doctype html>
<html>
<head>

  <style>
.m-div {display: none;}

.m-div.current {
  display: block;
 }
</style>
</head>
<body>

<form action="" method="post">

  <section class="m-div current" id="one" >
    <input type="checkbox" name="bklet"  required/> 
    <label for="bklet"> check it</label>
</section>


<section class="m-div" id="two">
   <label> First Name</label>
    <input type="text" name="Fname" pattern=".{3,}" title="3 characters minimum"  class="input width-full" required>

    <label> Last Name</label>
    <input type="text" name="Lname" pattern=".{3,}" title="3 characters minimum"  class="input width-full" required>              
</section>



<section class="m-div" id="three">
<label> Your Message</label>
<textarea class="textarea width-full" name="message" required></textarea>
</section>

<input type="submit" onclick="next();">

</form>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function next() {
  var current = $('.current');
  var next = current.next('.m-div:first');

  // loop back to the first div
  // if(next.length == 0) { next = $('#one'); }

  current.removeClass('current');
  next.addClass('current');
}
</script>

</body>
</html>

Answer 1

您应用于表单字段的验证属性只是Web浏览器的提示。每个浏览器可能以不同于其他浏览器的方式显示或处理此类验证。

有关详情，建议您查看有关HTML表单验证主题的教程，例如：http://www.the-art-of-web.com/html/html5-form-validation/

同样重要的是要注意，无论这些验证如何，仍然可以提交表单数据。您使用的验证不会做任何事情来确保提交的数据存在或有效。想要提交无效数据的人可以轻松绕过它们。因此你__must__也验证提交的字段服务器端！

验证不适用于HTML

1 个答案: