Question

I looked all around SOF but no luck to find me answer. It is either too easy or the answer is not just there.

What I simply need to do is to validate the form when my <img id='submit'/> is clicked and submit it afterwards.

$(document).ready(function(){

   $('#submit').click(function() {
     $('#suzuki_scb').submit();
   }); 

   $('#suzuki_scb').validate({
         submitHandler: function(form) {
             form.submit();
         }
    });
});

Even this doesn’t work and returns form.submit() is not a function.

Answer 1

I think this is what you’re trying to accomplish

<script type="text/javascript>
   $(document).ready( function(){
       $('#suzuki_scb').validate({
         // validation arguments go here
       });
   });
</script>
   ...
<form id="suzuki_scb">

    <!-- Your form goes here -->

    <button id="submit">
        <img src="[image url goes here]" />
    </button>
</form>

From the jQuery validation example they have on the site, all you need to do is call $("#suzuki_scb").validate();. The plugin should take care of canceling the submit action for you. So clicking the submit button with invalid data won’t actually submit the form.

Using an HTML Button element with an image inside it is a little more semantically correct than using an image with a JavaScript click event that attempts to submit the form