HTML5 required attribute not working

Question

I want to create a email contact form without refreshing the page. So i added jquery im my html file. I used html required attribute ti check if the fields are empty. But when i

Answer 1

Form validation is only triggered on the submit event of the form unless you trigger it elsewhere. Do the AJAX there instead, like this:

$(document).ready(function(){
    $('#mycontactform').submit(function(e){
        e.preventDefault();
        $.post("send.php", $(this).serialize(), function(response) {   
            $('#success').html(response);
            //$('#success').hide('slow');
        });
    });
});

Answer 2

You are sending the AJAX request when the user clicks on the button, not when they submit the form. Change .click() to .on('submit') and attach it to the form, not the button:

$('#mycontactform').on( 'submit', function () {
    ...

Demo: http://jsfiddle.net/QjPka/