窗體上的必需屬性不能與ajax一起使用？

Question

我有一個表單使用ajax發佈表單值，似乎它不讀取表單輸入required屬性。有人可以告訴我什麼是錯的嗎？

代碼：

<script> 
    $(function() { 
     $("#send-email").click(function() { 
      var subject = $("#subject").val(); 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var phone = $("#phone").val(); 
      var message = $("#message").val(); 
      var nationality = document.getElementById("nationality"); 
      var selNationality = nationality.options[nationality.selectedIndex].text; 
      // 
      $.post("mail.php", {"subject": subject, "name": name, "email": email, "phone": phone, "nationality": selNationality, "message": message, }, function() { 
       console.log(subject); 
       console.log(name); 
       console.log(email); 
       console.log(phone); 
       console.log(selNationality); 
       console.log(message); 
       alert("Thanks for contacting us, we will be back to you as soon as possible!"); 
      }); 

     }); 
    }); 
</script> 
<form action="mail.php" method="POST"> 
    <div class="form-row"> 
     <p>Subject</p> 
     <input type="text" id="subject" name="subject" required>    
     </select> 
    </div> 
    <div class="form-row"> 
     <p>Name</p> 
     <input type="text" id="name" name="name" required>   
    </div> 
    <div class="form-row"> 
     <p>Nationality</p> 
     <select name="nationality" id="nationality" required> 
      <option value="">Select Nationality</option>    
     </select>   
    </div> 
    <div class="form-row"> 
     <p>Contact number</p> 
     <input type="text" id="phone" name="phone">  
    </div> 
    <div class="form-row"> 
     <p>Email</p> 
     <input type="text" id="email" name="email" required>    
    </div> 
    <div class="form-row"> 
     <p>Message</p> 
     <textarea style="width:590px;height:100px;" id="message" name="message" cols="80" rows="12" required></textarea> 
    </div> 
    <div class="form-row"> 

    </div> 
    <div class="form-row"> 
     <input type="submit" onclick="return false;" id="send-email" value="SEND" name="send"/>  
    </div> 
</form> 

Answer 1

你有幾件事情錯在這裏。解決方案取決於您的需求。

1）如果你不需要asynk調用mail.php，只需刪除javascript的東西。當你這樣做時：<form action="mail.php" method="POST">你所有的表單輸入將使用POST發送到選定的動作，所以你不需要使用JavaScript。

2）如果你確實需要的mail.php asynk加載你需要做的幾件事情，以工作：從表單標籤

• 刪除所有屬性：<form>
• 從提交按鈕標記刪除onclick="return false;"

• 檢查自己的數據完成，f.ex：

  var complete = true; 
  if(subject==""||name==""||email=="") { 
      complete = false; 
  } 
  if(complete) { 
      //send post to mail.php 
  } else { 
      alert("You need to fill in all the fields"); 
  } 
  

請記住，並非所有的勘探者都支持此功能：http://www.w3schools.com/tags/att_input_required.asp