JQuery ValidationEngine validating inputs on tabs - tooltip and scrolling
I have a user interface with multiple tabs for personal information. The form encapsulates the entire "pill"
I first used v2.2 which had no flag validateNonVisibleFields
.
I have now upgraded to 2.6.2 to take advantage of this opportunity.
I created a "dummy" form that contains all my fields as hidden inputs and then created a form for each tab. Then I handle submit to collect all the data from each form to put in a dummy form and submit it instead.
The source code is too long to post here, but I created a fiddle here: http://jsfiddle.net/Mrbaseball34/22u28vcj/
(There is an invalid field in the "Address" tab, you must fill in the country and state for the home address and select one of the mailing list settings)
Although the code that works for me is somewhat, after some initial testing it seems that the prompt is placed in the wrong position and then the form does not scroll to the default field.
After switching the tab, I added a 1 second delay and it is still being placed in the wrong position and not scrolling.
if(!$("#tab1_form").validationEngine("validate", {validateNonVisibleFields: true})) {
setCurrentTab(0);
sleep(1000);
$("#tab1_form").validationEngine("validate", {validateNonVisibleFields: true});
submit = false;
} else if(!$("#tab2_form").validationEngine("validate",{validateNonVisibleFields: true})) {
setCurrentTab(1);
sleep(1000);
$("#tab2_form").validationEngine("validate", {validateNonVisibleFields: true});
submit = false;
} else if(!$("#tab3_form").validationEngine("validate", {validateNonVisibleFields: true,
updatePromptsPosition:true})) {
sleep(1000);
setCurrentTab(2);
$("#tab3_form").validationEngine("validate", {validateNonVisibleFields: true});
submit = false;
}
Any ideas?
source to share
This code triggers only one confirmation and appears to get the desired result.
for (i = 1; i <= 3; i++) {
setCurrentTab(i - 1);
var formId = "#tab" + i + "_form";
$(formId).removeClass('validating');
$(formId).validationEngine("validate", {
scroll: true,
promptPosition: "topRight",
showArrow: true,
showArrowOnRadioAndCheckbox: true
})
}
In their demos ( one example here ), they seem to reconnect the validation mechanism:
jQuery('#formID').validationEngine('hide');
jQuery("#formID").validationEngine('detach');
jQuery("#formID").validationEngine('attach');
source to share
The method sleep
doesn't exist in Javascript, but you need to use setTimeout
!
Edit: This doesn't solve the problem, but it's a more common way to handle the sleep function.
Replace:
sleep(1000);
By:
setTimeout(function () {
// Your code !
}, 1000);
Your code will become:
if (!$("#tab1_form").validationEngine("validate", { validateNonVisibleFields: true })) {
setCurrentTab(0);
setTimeout(function () {
$("#tab1_form").removeClass('validating');
$("#tab1_form").validationEngine("validate", { validateNonVisibleFields: true });
}, 1000);
submit = false;
} else if (!$("#tab2_form").validationEngine("validate", { validateNonVisibleFields: true })) {
setCurrentTab(1);
setTimeout(function () {
$("#tab2_form").removeClass('validating');
$("#tab2_form").validationEngine("validate", { validateNonVisibleFields: true });
}, 1000);
submit = false;
} else if (!$("#tab3_form").validationEngine("validate", { validateNonVisibleFields: true })) {
setCurrentTab(2);
setTimeout(function () {
$("#tab3_form").removeClass('validating');
$("#tab3_form").validationEngine("validate", { validateNonVisibleFields: true });
}, 1000);
submit = false;
}
The problem is that your function is sleep
designed to block the execution of the navigator, so it is completely useless and will think the user is slow. Instead, it setTimeout
will continue executing the rest of your code and call your function when the time specified in the second parameter has elapsed.
source to share