Required attribute on form not working with ajax?

Question

I have a form that uses ajax to post the form values, and seems that the it doesn't read the required attribute on the form input. Can anybody tell me what is 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 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

You have several things wrong here. the solution depends on your needs.

1) If you don't need an asynk call to mail.php, just delete the javascript stuff. When you are doing this: <form action="mail.php" method="POST"> All your form inputs will be sent using POST to the selected action, so you dont need to use javascript.

2) If you do need asynk loading of mail.php you need to do several things in order to work:

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

• check yourself the data completion, 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");
  }
  

Keep in mind that not all explorers support this feature: http://www.w3schools.com/tags/att_input_required.asp