jQuery Validate: Remove element AFTER validation BEFORE submit?

Question

I have a SVG map of a city that when clicked, creates hidden elements in a div in my form.

I'm using the jQuery Validation Plugin to validate my form.

In order to make sure that the user has clicked on an area of the map, I thought to create a dummy hidden element inside where the normal hidden elements are and put the validation rule on that. I wrote my own validation rule to check for the number of hidden elements (indicating that a user has clicked somewhere on the map). That rule is this:

$.validator.methods.zones = function (value, element, param) {
   return ($('#search_form #zone-selectors input').length > 1); // 1 instead of 0 to account for the dummy element
};

<div id="zone-selectors">
  <input type="hidden" name="dummy">
</div>

However, I cannot allow that dummy element to be submitted with the rest of the form; I need to remove it AFTER the form has been validated but BEFORE the form is submitted. Naturally, I thought to use the submitHandler option for validate():

// ...
submitHandler: function(form) {
   $(form).find('input[name=dummy]').remove();
   $(form).submit();
},
// ...

... but this seems to create an infinite loop, and my browser times-out the script. What am I doing wrong?

Nick Craver · Accepted Answer · 2010-09-09 15:07:48Z

1

The submitHandler needs a tweak, like this:

submitHandler: function(form) {
   $(form).find('input[name=dummy]').remove();
   form.submit();
}

Calling the jQuery .submit() trigger causes validation again, and an infinite loop...you want to call the native .submit() function here.

answered Sep 9, 2010 at 15:07

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

5 Comments

neezer Over a year ago

Now the form doesn't submit at all...? The hidden element is removed, however, so I know the submitHandler is being called.

Nick Craver Over a year ago

@neezer - Does the form have an action? Or are you trying to submit via ajax?

neezer Over a year ago

@nick It has an action. I want a normal submit, not an Ajax submit.

Nick Craver Over a year ago

@neezer - do you have a link to the page I can see?

neezer Over a year ago

@nick - Of course, as soon as I post the link I can't reproduce the problem. Looks like it works. Thanks.

freak3dot · Accepted Answer · 2014-05-01 16:17:30Z

0

This seemed to work for me when the above answer did not. Maybe has to do with jQuery and jQuery Validation versions.

submitHandler: function(form) {
   $('input[name=dummy]', form).remove();
   form.submit();
}

answered May 1, 2014 at 16:17

freak3dot

1131 silver badge6 bronze badges

Collectives™ on Stack Overflow

jQuery Validate: Remove element AFTER validation BEFORE submit?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related