html - Required attribute on form not working with ajax? -

i have form uses ajax post form values, , seems doesn't read required attribute on form input. can tell me wrong?

code:

<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 contacting us, 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>  

you have several things wrong here. solution depends on needs.

1) if don't need asynk call mail.php, delete javascript stuff. when doing this: <form action="mail.php" method="post"> form inputs sent using post selected action, dont need use javascript.

2) if need asynk loading of mail.php need several things in order work:

• remove attributes form tag: <form>
• remove onclick="return false;" submit button tag

• check data completion, f.ex.:

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

keep in mind not explorers support feature: http://www.w3schools.com/tags/att_input_required.asp