I am using tabs to navigate between forms and when the user presses the next button, form validation takes place. If there are errors, it will show the summary of errors at the top and also individual errors at each of the fields. The user corrects the errors, and presses the Next button to advance to the next tab. When the press the previous button, the error messages are not cleared.
How would I clear the error container at the top and the individual error messages at each of the form fields provided that the form is valid when pressing the next button. I have tried the resetForm(), but that didn't work.
Here is my code
<form class="wizardTab" id="graph-data">
<div class="alert alert-error" id="alert-form-graph-data"></div>
<div class="row required" id="frmgraphdata">
<fieldset>
<legend>Select below</legend>
<div class="inputgroup" id="select_graph_data">
<label for="graph-only">
<input class="required" id="graph-only" name="select_graph_or_data" required="required" type="radio" value="graph-only"/>Graph
</label>
<label for="data-only">
<input class="required" id="data-only" name="select_graph_or_data" required="required" type="radio" value="data-only"/>Data
</label>
</div>
</fieldset>
</div>
<div class="row buttons">
<input class="btnNext" id="q0_btn_next" type="button" value="Next >"/>
</div>
</form>
Jquery code:
$('#q0_btn_next').click(function (e) {
e.preventDefault();
var formID = $(this).closest('form').attr('id');
var form = $('#'+ formID);
if (form.valid()){
//code to goto the next tab
// clear error message
form.validate().resetForm();
}
});
$('.wizardTab').each(function(){
$(this).validate({
onkeyup: false,
onclick: false,
onfocusout: false,
validClass: "success",
errorClass: "error",
rules: {
'select_graph_or_data': {
required: true
}
// more rules for other forms
},
invalidHandler: function(form, validator) {
if (!validator.numberOfInvalids())
return;
/*$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top
}, 500);*/
},
errorPlacement: function (error, element) {
if (element.parents('.inputgroup').length) {
error.insertBefore(element.parents('.inputgroup'));
element.parents('.inputgroup').addClass('error');
} else {
error.insertBefore(element);
};
},
showErrors: function (errorMap, errorList, currentForm) {
errors = this.numberOfInvalids();
var formID = this.currentForm.attributes.id.nodeValue;
var alrt = $('#alert-form-'+ formID);
if (errors > 0){
this.defaultShowErrors();
var msg = '<p>Your form has errors:</p><ul>';
$.each(errorMap, function(key, value) {
msg += '<li><a href="#' + key + '-row" class="error">' + value + '</a></li>';
});
msg += '</ul>';
// Show the error in the error summary container
$('#alert-form-' + formID).html(msg).show();
$(alrt).html(msg).show();
$('html, body').animate({ scrollTop: $(alrt).offset().top - 20}, 500);
}
}
});
});
removeClass('valid'); // display OK icon $(element). closest('. form-group'). addClass('has-error'); // add the Bootstrap error class to the control group }, unhighlight: function (element) { // revert the change done by hightlight $(element).
Hi Mohamed Antar, Just add this on your input widget in Extended properties : So after the Validation Error Message, the moment you start typing in the input - validation message will be removed.
An unobtrusive validation in jQuery is a set of ASP.Net MVC HTML helper extensions.By using jQuery Validation data attributes along with HTML 5 data attributes, you can perform validation to the client-side.
addMethod( name, method [, message ] ) Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.
Normally, resetForm()
should be removing the default label elements containing the error messages.
Your code:
var formID = $(this).closest('form').attr('id'); // <- the ID of the form
var form = $('#'+ formID); // <- the form object
if (form.valid()){
formID.validate().resetForm(); // <- should be your `form` variable, not `formID`.
}
However, your formID
variable only represents the ID of the form so it's not a proper selector. Since your form
variable represents the proper selector, $('#'+ formID)
, you'll need to use form.validate().resetForm()
rather than formID.validate().resetForm()
See documentation: jqueryvalidation.org/Validator.resetForm
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With