Everything work fantastic until you want two separate sets of validation on one page. Within PHP you can simply wrap each logical sets of validation within their own <form> tags but this is not possible with asp.net.
Instead this is the approach I have used:
Within a set of script tags at the top of my page I put the following (I do have "var $j = jQuery.noConflict();" ):
$j(document).ready(function () {
$j("#btnSave").click(function (e) {
var stopForm = false;
if ($j("#txtForename").val() == "") {
$j('#txtForename').validationEngine('showPrompt', 'You must enter a First name', 'error', 'topRight', true);
stopForm = true;
} else {
$j('#txtForename').validationEngine('hide');
}
if (stopForm) {
e.preventDefault();
}
});
- The above waits for the click event to be fired on the btnSave button.
- Sets a boolean variable to false
- Checks to see the that textbox object txtForename has a value
- If it doesn't that it attaches a popup notification and sets the stopForm variable to true
- If there is a value it makes sure that any previous popup that may have been added to the control is closed
- Finally the method checks to see if the stopForm variable is set to true, if it is then it calls the e.preventDefault() menthod which will ensure that the btnSave click event is not passed back to the server, allowing your user to address the highlighted issue.
I recommend having the ClientIDMode="Static" declaration on your page to ensure that jQuery can get expected access tot he controls in the DOM.