窗体上的必需属性不能与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