[jQuery] Validation Plugin: Validating newly added dom objects
I have a form which will allow users to duplicate sections of the form
at will. For example there is a traveler section; to add a new
traveler you click a button which duplicates (it really just appends)
that section to the previous section. The problem I am having is that
the plguin does not prevent my submit if there are errors in the new
section, only in the sections that were available when the page was
initially loaded. I am running the validator function again in hopes
that it will overwrite the previous and reread the dom. It works in
that I can see error messages (if there are other errors in the form)
but it will not prevent the submit. Here is my validator function
which runs on document.ready:
<code>
function thevalidator() {
var v = $("#world_wide_travel").validate({
errorContainer: $("#errorbox"),
focusCleanup: true,
submitHandler: function(form) {
// get all email addresses for cc'ing
getdefaultccFromForm();
// remove stuff we can't see in case a val was filled in then
hidden again - php backend will remove empty vals
$('.hidden').children(':input').val('');
// get tinymce ready to go by sending content back to
textarea
tinyMCE.triggerSave();
// prepare Options Object for ajax submit
var options = {beforeSubmit: presubmit, target:
'#SubmitSuccess',success: postsubmit};
alert('I submitted fool');
//$(form).ajaxSubmit(options);
}
});
}
</code>
Section duplicator with html removed:
<code>
function createDuplicateRequestor(){
var counter=1;
$(".inputs_requestor").each(function(i){ //for each set of .inputs
being set1, set2, set3 etc...
repeat(this.id); // get the current id of the .inputs element and
pass it to the repeat function
function repeat(currentSet){
counter++;
var totalInputs = $("#" + currentSet + " .formInputs").length; //
get current length of .formInputs of the current set ex. =
#set1 .formInputs
$("#" + currentSet +
" .formInputs:last .add_requestor:visible").click(function(){ //add
click handler to current sets .add ex. = #set1Input1 .add
$("#" + currentSet +
" .formInputs:last .add_requestor").css({"visibility":"hidden"}); //
hide button for current sets .add
var idname = currentSet+"_"+($("#" + currentSet +
" .formInputs").length + 1);
var requestorhtml = "some html to duplicate";
$("#" + currentSet + " .formInputs:last").after(requestorhtml); //
add another set of inputs
$("#" + currentSet + " .formInputs").removeClass("oddBg"); //
remove oddBg class
$("#" + currentSet + " .formInputs:odd").addClass("oddBg"); //add
back in oddBg class
$("#"+currentSet+" .remove_requestor").click(function() { //bind
click event to the remove button
if($(this).parent().next(".formInputs").length == 0){ //if there
are no inputs after these inputs then you are the last one so...
$
(this).parent().prev().children(".add_requestor").css({"visibility":"visible"}); //
naviagte to the prior inputs and turn on the add
}
$(this).parent().remove(); //remove this inputs for a specific
set
$("#" + currentSet + " .formInputs").removeClass("oddBg"); //
remove oddBg class
$("#" + currentSet + " .formInputs:odd").addClass("oddBg"); //add
back in oddBg class
});
//setup autocomplete after dom has been created for this section
autoshowusers('requestor_name_'+idname,idname);
//re-run validator on newly created dom items
$("#world_wide_travel").validate().form;
//run the repeat function again on the new instance of the DOM,
with elements removed
repeat(currentSet);
//stop browser defalut event of href
return false;
}); //end click handler
} //end repeat function
}); //end each for .inputs
}
</code>
Any ideas on how to get the validator to validate new sections? I
have tried to reset it, clear the errors, nearly every method and I am
at a loss...thanks!