ajax提交form如何让input的先验证required通过后再提交？

Question

现在的代码有个问题是验证了required，minlength,如果没通过还是会ajax提交，如果现在想让验证required，minlength不通过，不提交该如何改？

<form id="form1" onsubmit="return false" >
<p>用户名：<input name="userName" type="text" id="txtUserName"  required/></p>
<p>密　码：<input minlength="6" name="password" type="password" id="TextBox2"  /></p>  
<p><input type="submit" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
</form>

<script type="text/javascript"> 
function login() { 
  $.ajax({
     type: "POST",
     contentType: "application/json",
     dataType: "json",
     url: "/users/login",
     data: $('#form1').serialize(),
     success: function (result) { 
       console.log(result);
       if (result.resultCode == 200) { 
         alert("SUCCESS");
       };
     }, 
     error : function() { 
      alert("异常！"); 
     } 
   }); 
 } 
</script\>

Answer 1

onclick是什么意思？单击就会触发。
onsubmit="return false"是什么意思？阻止默认默认事件。那么是阻止什么时候的默认事件呢？onsubmit是提交的时候执行的，所以你应该在这个里面提交ajax呀。

Answer 2

首先，你用onsubmit="return false"阻止了浏览器的默认事件，让required和minlength失效。

其次，minlength不能处理什么都没输入的情况，不太严谨。
你要验证的话最好用jQuery或者JS拿到表单的值然后手动判断。

Answer 3

ajax提交的时候是会忽略 required 的。