1. 程式人生 > >ajax提交form表單,H5的required屬性沒起作用

ajax提交form表單,H5的required屬性沒起作用

1、
ajax提交form表單,required屬性不起作用
錯誤程式碼如下

<form id="order">
   <input type="text" name="name" required />
   <input type="submit" id="submit" />
</form>

<script>
   $("#submit").bind("click",function(){
      $.ajax({
        ...
     })
   });
</script>

2、


正確程式碼如下

<form id="order">
   <input type="text" name="name" required />
   <input type="submit" id="submit" />
</form>

<script>
   $("#order").submit(function(){
      $.ajax({
        ...
     })
   });
</script>

最後找到原因,required屬性只能阻止提交表單,不能阻止按按鈕。

第一種情況就是將ajax繫結在了input 按鈕上的原因。

所以像第二種程式碼一樣只要將ajax繫結在form表單的submit事件上就可以了。
這裡寫圖片描述