CODEWITHSUNDEEP
jqueryjquery-validate
Matt
Matt

Reputation: 7212

jquery validation not stopping form from being submitted

I'm tearing my hair out here trying to get a jquery validation to play nicely with my form.

The validation does not appear to be working. The form just submits itself to the page. I can briefly see the validation error messages appearing before the page submits...

My code:

//HTML form
<form id="form_scheduleEvent" name="form_scheduleEvent">
  <label for="name">Name:</label><input class="short" type="text" name="name" id="name" />
  <label for="address">Address:</label><input type="text" name="address" id="address" />
  <label for="phone">Phone:</label><input type="text" name="phone" id="phone" />
  <label for="comments">Comments:</label><textarea name="comments" id="comments" /></textarea>
  <input type="submit" id="submitRequest" value="Add"/>
</form>


//jquery
//Validation rules
$('#form_scheduleEvent').validate({
rules: {
    name : {required: true, maxlength: 45},
    address : {required: true, maxlength: 45},
    phone : "required"
}
});


$('#submitRequest').click(function(){
   $.ajax({
       type: "POST",
       url: "common/ajax_event.php",
       data: formSerialized,
       timeout:3000,
       error:function(){alert('Error');},
       success: function() {alert('It worked!');}
  });

 return false;
});

I tried updating to the latest version of both jquery and jquery.validation....

Any help would be appreciated! Thanks.

Update

//The validation is working, but I can't even get the alert to show....
$('#form_scheduleEvent').validate({
 rules: {
   name : {required: true, maxlength: 45}, 
   address : {required: true, maxlength: 45},
   phone : "required",
   submitHandler: function(){
     alert('test');
   }
 }
});

Upvotes: 4

Views: 12106

Answers (7)

user1986787
user1986787

Reputation: 131

$('#form_scheduleEvent').validate({
 rules: {
   name : {required: true, maxlength: 45}, 
   address : {required: true, maxlength: 45},
   phone : "required"
   },
   submitHandler: function(){
     alert('test');
   }

});

Submit handler should be outside rule. :-)

Upvotes: 0

Giuseppe
Giuseppe

Reputation: 175

I agree with Josh Ribakoff See the bug at: https://github.com/jzaefferer/jquery-validation/issues/1212

Upvotes: 1

Josh Ribakoff
Josh Ribakoff

Reputation: 3048

This can happen if you put a rule that doesn't have a matching method, see & vote for my bug report. https://github.com/jzaefferer/jquery-validation/issues/1212

Upvotes: 5

Matt
Matt

Reputation: 7212

Thanks everyone for their reply.

I ended up wrapping the ajax call part of my original code in the following code:

if($('#form_scheduleEvent').valid() == true){
  //Process ajax request...
}
return false;

Upvotes: 6

James Thompson
James Thompson

Reputation: 1027

You are calling form submission outside of the validation check. You'll probably want something like this:

$('#form_scheduleEvent').validate({
rules: {
    name : {required: true, maxlength: 45},
    address : {required: true, maxlength: 45},
    phone : "required",
    success: function() {
      $.ajax({
        type: "POST",
        url: "common/ajax_event.php",
        data: formSerialized,
        timeout:3000
      }
    }
});

Upvotes: 2

Mauro
Mauro

Reputation: 2070

As Grillz said you are submitting and validating separately, you should explicitely call validation inside your click event to perform it.

Or viceversa as Paddy shows! ;)

Upvotes: 1

Paddy
Paddy

Reputation: 33867

You should move your AJAX submit call to be fired off by the submit callback in the validate plugin:

$('#form_scheduleEvent').validate({
rules: {
    name : {required: true, maxlength: 45},
    address : {required: true, maxlength: 45},
    phone : "required",
    submitHandler: function(form) { DoSubmit(); }
}
});


function DoSubmit(){
   $.ajax({
       type: "POST",
       url: "common/ajax_event.php",
       data: formSerialized,
       timeout:3000,
       error:function(){alert('Error');},
       success: function() {alert('It worked!');}
  }

Upvotes: 6

Related Questions