Prevent form submission using jQuery

Question

I am validating my form using jquery as below:

jQuery(document).ready(function(){
        jQuery('#adminform').validate({

        rules: {
          name: {
            minlength: 5,
            maxlength: 30,
            required: true
          },
          username: {
            required: true,
            minlength: 5,
            maxlength: 30
          }
        },
        highlight: function(label) {
            jQuery(label).closest('.control-group').addClass('error');
        },
        success: function(label) {
            label
                .text('OK!').addClass('valid')
                .closest('.control-group').addClass('success');
        },
        messages:{

          name: {
            required: "Enter your name"
          },
          username: {
            required: "Enter a username"
          } 
       }
      });     
});

now how should I prevent the form from submission if the rules are not meet?

When I click the submit button nothing should happen.

You are using a plugin called validate. Your code is incomplete. Please post the whole code so we could help — Ahmad Alfy
– Ahmad Alfy, Commented Dec 24, 2012 at 8:50
@Ahmad Alfy to be honest i have more fields out of which i have just shown two of them here. but i feel whether i have 2 or 10 fields, the code is just to add rules and the corresponding messages if invalid. so the code will look like above only. — Raaman Rai
– Raaman Rai, Commented Dec 24, 2012 at 9:04

Tom Walters · Accepted Answer · 2012-12-24 08:49:02Z

2

To stop a form being submitted you use:

return false;

When you know the input is invalid.

answered Dec 24, 2012 at 8:49

Tom Walters

15.6k7 gold badges59 silver badges75 bronze badges

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

Comments

Ryan · Accepted Answer · 2012-12-24 08:57:40Z

2

Prevent form submission using jQuery?

$('#myFormId').submit(function(event) {
     event.preventDefault();
 });

OR:

$('#myFormId').submit(function()
{
    return false;
});

answered Dec 24, 2012 at 8:57

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

1 Comment

Raaman Rai Over a year ago

i tried this way: jQuery('#adminform').submit(function(event) { event.preventDefault(); });

rOcKiNg RhO · Accepted Answer · 2012-12-24 08:54:57Z

1

Prevent the submit event and remain on the screen

e.preventDefault();

what about this?

answered Dec 24, 2012 at 8:54

rOcKiNg RhO

6311 gold badge6 silver badges16 bronze badges

2 Comments

Raaman Rai Over a year ago

where and how to put the e.preventDefault();

Raaman Rai Over a year ago

i am getting something like this: {"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x8f7f56c>, 'html_name': 'js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x934d24c>, 'help_text': '', 'name': 'js_lib'}"}

Jai · Accepted Answer · 2012-12-24 09:48:21Z

0

Your code is perfect just a submit trigger needed : http://jsfiddle.net/uUdWN/

jQuery(document).ready(function() {
jQuery('#adminform').validate({
    rules: {
        name: {
            minlength: 5,
            maxlength: 30,
            required: true
        },
        username: {
            required: true,
            minlength: 5,
            maxlength: 30
        }
    },
    highlight: function(label) {
        jQuery(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label.text('OK!').addClass('valid').closest('.control-group').addClass('success');
    },
    messages: {
        name: {
            required: "Enter your name"
        },
        username: {
            required: "Enter a username"
        }
    }
});


$("#adminform").submit(); // <-------------just triggered submit

});

answered Dec 24, 2012 at 9:48

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Raaman Rai Over a year ago

i added jQuery("#adminform").submit(); but that didn't help me

Collectives™ on Stack Overflow

Prevent form submission using jQuery

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related