Form onClick running when Form required haven't been meet

Question

Hey guys didn't really know how to word it, But even tho I've added required to my form input its runs the JavaScript onsubmit even failing the required when the buttons pressed and the forms blank.

Is there a line i can add to my JavaScript to stop it from running when the button is pressed and the form is blank? any help would be great :D

<div id="div3">
    <div id="form"> 
        <form action="results.php" method="post" >
        <input type="text" id="field" name="field" required>
        <input id="submit" name="submit"  type="image" src="gif/button.png"  onClick="test();" value="submit"></form>       
    </div><div id="msg"><b>
<span id="msgtxt">Hello</span>
<span id="img"><img src="gif/loadingdot.gif"></span></b>
</div>
</div>

Javascrpt

function test()
{
    $('#msg').attr('style','display:block;');
    $('#msgtxt').html('Connecting To Server');

    setTimeout(function(){  //Beginning of code that should run AFTER the timeout
    $('#msgtxt').html('Message one');
        //lots more code
    },5000);  // put the timeout here
    setTimeout(function(){  //Beginning of code that should run AFTER the timeout
    $('#msgtxt').html('Message two);
        //lots more code
    },7000);  // put the timeout here
    setTimeout(function(){  //Beginning of code that should run AFTER the timeout
    $('#msgtxt').html('Message three');
        //lots more code
    },11000);  // put the timeout here
    setTimeout(function(){
        txt=$("#field").val();
        $.post("results.php",{field:txt},function(result){
            $("#div3").html(result);
        });
        $('#msg').attr('style','display:none;');
    },17000);
}

 $(document).ready(function() {
        $.post("form.html",{field:'mytext'},function(result){
            $("#load").html(result);
        });
 });

Answer 1

try it :

<input id="submit" name="submit"  type="image" src="gif/button.png"  onClick="check();" value="submit">

and then the check(); function :

var check = function(){
    if ($("#field").val() != "" )
        test();
    else
        $('#msgtxt').html('form is empty');
}