HTML Required标签不响应Jquery

Question

我正在尝试让用户填写表单。

当用户正确填写表单时，网页上的徽标更改，表单的数据被发布到PHP页面，并发送到数据库。

我有"required"属性与提交按钮的Jquery代码工作的麻烦，因为当我挂钩任何Jquery代码属性不显示。

是否有一种方法可以让"required"属性的原始功能与我下面提供的Jquery代码一起工作，同时保持在同一页面上?

<form class="center" action="" method="post" id="form">
   <input type="text" id="name" name="name" placeholder="Name" style="width: 175px" required>
   <br>
   <br>
   <input type="email" id="email" name="email" placeholder="Email" style="width: 175px" required>
   <br>
   <br>
   <input type="text" id="telephone" name="telephone" placeholder="telephone" style="width: 175px" required>
   <br>
   <br>
   <select style="width: 175px" id="name" name='city' required>
      <option value='null' selected="selected" disabled="disabled">Select an option</option>
      <option value='option1'>option1</option>
      <option value='option2'>option2</option>
   </select>
   <br>
   <br>
   <input type="button" id="submit" value="submit" style="width: 175px">
</form>

---

$("#submit").on('click', function() {
   $("#image").attr("src", "2.png");
   $.post("sender.php", {
      name: $('#name').val(),
      email: $('#email').val(),
      telephone: $('#telephone').val(),
      city: $('#city').val()
   });
});

Answer 1

您需要在jquery中使用event.preventdefault()。Preventdefault会停止默认行为(提交表单)，然后你可以编写代码来验证和显示错误。

$("#submit").on('click', function() {
   event.preventdefault();
// call some function to validate & display error.
   $("#image").attr("src", "2.png");
   $.post("sender.php", {
      name: $('#name').val(),
      email: $('#email').val(),
      telephone: $('#telephone').val(),
      city: $('#city').val()
   });
});

Answer 2

试试这个:-

$("#form").validate({
                submitHandler : function() {
//Your Code
});

在所有浏览器中使用的用户jquery验证