I have a form that has an attached map. Clicking on the map adds hidden inputs to a div in the form.
I want a validation rule to check whether or not that div has any hidden elements. So far, I've only been able to do this with a dummy element that I have to manually remove before posting the form:
<form action="..." method="post" id="signup">
<!-- ... -->
<div id="zones_selected"><input type="hidden" name="dummy"></div>
<!-- ... -->
</form>
$.validator.methods.zones = function (value, element, param) { return ($zone_holder.find('input[name!=dummy]').length > 0); };
$('#signup').validate({
rules: {
//...
'dummy': 'zones'
},
//...
submitHandler: function(form) { $(form).find('input[name=dummy]').remove(); form.submit(); }
});
However, these leaves much to be desired for error placement, as my custom validator method doesn't seem to ever trigger the unhighlight
function, and I feel dirty for having put in an input solely for form validation (not very unobtrusive).
What I would like is no extra submitHandler
and a rule to check the presence of hidden inputs in a div that would have an unhighlight
trigger (such that if a user does click on the map--which creates a new hidden input--the message I display telling them to do so will disappear).
What's the best way to accomplish this?