必填字段不适用于ajax

我创建了一个注册表单，并将其input字段设置为require属性，但不能使用ajax

 
   
 
   
 
   
 
   
 
   
 Sign up 

这是ajax代码

  $(document).ready(function(){ $("#register").click(function(e){ if($("form").valid()){ e.preventDefault(); } var firstname=$('#First_name').val(); var lastname=$('#last_name').val(); var username=$('#reg_username').val(); var password=$('#password').val(); var email=$('#email').val(); $.ajax({ type: "POST", url: "doRegister.php", data: "first_name=" +firstname+ "&last_name=" +lastname+ "&username="+ username+ "&password="+ password+ "&email="+ email , success: function(html){ document.write(html); } }); return false; }); });  

我只想用ajax运行必要的字段validation我找不到任何解决方案。

Answer 1

您需要使用submit事件而不是click才能使用html5validation。 成功validation后，仅提交事件。

 $(document).ready(function() { $("#register").submit(function(e) { //---------------^--------------- e.preventDefault(); var firstname = $('#First_name').val(), lastname = $('#last_name').val(), username = $('#reg_username').val(), password = $('#password').val(), email = $('#email').val(); $.ajax({ type: "POST", url: "doRegister.php", data: "first_name=" + firstname + "&last_name=" + lastname + "&username=" + username + "&password=" + password + "&email=" + email, success: function(html) { console.log(html); } }); return false; }); }); 

  
  
   
 
   
 
   
 
   
 
   
 Sign up  

Answer 2

如果表单无效，则需要返回该函数 – e.preventDefault()不足以阻止执行ajax

 if($("form").valid()){ e.preventDefault(); return; // <-- here }