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

现在的代码有个问题是验证了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\>
阅读 3.7k
3 个回答

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题