HTML5 validations not working

Question

I have made a contact form. In this form I have added input validations like email for email text box and maximum length for phone number 10 in the contact textbox. But these validations are not working in my case.
What I'm doing wrong?

AJAX Call

function myformsubmit() {
    var name = document.getElementById("name").value;
    var mail = document.getElementById("mail").value;
    var contact = document.getElementById("contact").value;
    var reason = document.getElementById("reason").value;
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'name1=' + name + '&mail1=' + mail + '&contact1=' + contact+ '&reason1=' + reason;

    if (name == ''||mail == ''|| reason == ''||contact == ''){
        alert("Please Fill all fields");
    }else{
        // AJAX code to submit form.
        $.ajax({
            type    : "POST",
            url     : "http://test1.com/wp-content/themes/suave/theme_option/1.php",
            data    : dataString,
            cache   : false,
            success : function(html) {
                alert(html);
                window.location="http://test1.com";
            }
        });
    }
    return false;
}

 @media screen and (max-width: 972px) and (min-width: 100x) { .exitpopup-modal-window { display: none; } } #exitpopup-modal .modal-body { padding: 0px; } .modal-body { padding: 0px; } .second img { width: 369px; height: 404.6px; margin-top: -1%; } .first form { display: table; margin-left: 34px; margin-top: 43px; } .row1 { font-size: 10px; font-family: inherit; display: table-row; border: 2px solid red; } .row1 #name, #mail, #contact { color: black; width: 260px; height: 34px; padding: 6px 12px; border-radius: 3.9px; border-color: #777; display: table-cell; } .row1 textarea { width: 260px; height: 110px; color: black; border-color: #777; display: table-cell; } .row1 #submit { width: 152px; height: 44px; margin-left: 15%; background-color: #337ab7; color: white; border-color: none; } .row1 #submit:hover { width: 152px; height: 44px; margin-left: 15%; background-color: white; color: #337ab7; border-color: none; } .second, .first { float: left; } .clearfix { clear: both } .first span { margin-left: 25%; font-family: inherit; font-size: 15px; padding-top: 3px; } <div class="exitpopup-modal-window"> <div class="second"> <img src="http://www.buildzar.com/listing-assets/images/home-new/get-quote/bg-lead-form-web.png"> </div> <div class="first"> <span>We are there to help you</span> 

 <form id="form" name="theform"> <div class="row1"> <input id="name" type="text" placeholder="Your name *" required> <br> <br> </div> <div class="row1"> <input type="email" id="mail" placeholder="Your email *" required> <br> <br> </div> <div class="row1"> <input id="contact" type="number" maxlength="10" placeholder="Your phonenumber*" required> <br> <br> </div> <div class="row1"> <textarea id="reason" rows="5" placeholder="Any reason to leave ?*" required></textarea> <br> <br> </div> <div class="row1"> <input id="submit" onclick="myformsubmit()" type="button" value="Submit"> </div> </form> </div> <div class="clearfix"></div> 

Answer 1

Your button type should be submit.

 <input id="submit"  type="submit" value="Submit">

And within for tag you should have action

<form id="form" name="theform" action="javascript:myformsubmit()">

Answer 2

Make New function and call this from your function myformsubmit.

    function checkvalidate() {
    var flag = false;
    if (name == ''||mail == ''|| reason == ''||contact == ''){
            flag = false;
        }
else
{
flag = true;
}
    return flag;
    function myformsubmit() {
            var flag = checkvalidate();
            if(flag == true)
    {
    success code.
    }
    else
    {
    error message
    }

    }