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.

It would be easier to make submit a button with an image inside and just return false from your submit function if validation fails (which will cancel the submit). — Roman
– Roman, Commented Mar 23, 2010 at 4:48

Roman · Accepted Answer · 2010-03-23 17:18:28Z

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

edited Mar 23, 2010 at 17:18

answered Mar 23, 2010 at 4:27

Roman

20.3k6 gold badges73 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mazzi Over a year ago

@R0MANARMY: why not having id='submit' right on <img/> then? My question is how to validate the form on click event and then submit the form when valid.

Roman Over a year ago

It's semantically more correct to use a button than an image. It would also let you combine an image with some text inside your button (which if you ever need to do internationalization will be easier). Mostly because it's less weird to have a button submit a form than an image submit a form though.

Mazzi Over a year ago

By the way I am using the validation plugin for jquery

Roman Over a year ago

Unfortunately I'm not terribly familiar with jquery validation plugin (I assume it's the one Chad linked to) but glancing over documentation it may handle the canceling of the form submit when validation fails for you.

JM4 Over a year ago

I don't understand why this answer was accepted. The OP asked how to submit validation WITHOUT a submit button click and yet the demo link provided does just that.

|

Chaddeus · Accepted Answer · 2010-03-23 04:22:22Z

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.

answered Mar 23, 2010 at 4:22

Chaddeus

13.4k30 gold badges109 silver badges167 bronze badges

Collectives™ on Stack Overflow

Jquery validation on click event instead of on submit

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related