Jquery validation on click event instead of on submit

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

This page, on jQuery docs, has the information you seek. Here's a snippet from the first paragraph:

This method sets up event handlers for submit, focus, keyup, blur and click to trigger validation of the entire form or individual elements.

Hope it helps.

Answer 2

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