Rectangle 27 171

You want the resetForm() method:

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

I grabbed it from the source of one of their demos.

For those using bootstrap, there are cases where resetForm() does not clear all the instances of .error on the child elements of the form. This will leave residual CSS like red text color unless you call .removeClass(). Example: $('#myform .control-group').removeClass('error');

Using bootstrap 3 this doesn't hide the field validation errors. What a shame.

ya you are right @the Muffin Man

It works for me with Bootstrap 3. Perhaps the problem is with your integration of both libraries?

No this resetForm will literally even rest the form data, too.

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 169

You want the resetForm() method:

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

I grabbed it from the source of one of their demos.

Grabbed it from the source of one of their demos.

For those using bootstrap, there are cases where resetForm() does not clear all the instances of .error on the child elements of the form. This will leave residual CSS like red text color unless you call .removeClass(). Example: $('#myform .control-group').removeClass('error');

Using bootstrap 3 this doesn't hide the field validation errors. What a shame.

ya you are right @the Muffin Man

It works for me with Bootstrap 3. Perhaps the problem is with your integration of both libraries?

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 100

I came across this issue myself. I had the need to conditionally validate parts of a form while the form was being constructed based on steps (i.e. certain inputs were dynamically appended during runtime). As a result, sometimes a select dropdown would need validation, and sometimes it would not. However, by the end of the ordeal, it needed to be validated. As a result, I needed a robust method which was not a workaround. I consulted the source code for jquery.validate.

  • Clear all storage of success or errors
  • Reset entire form validation Here is what it looks like in code: function clearValidation(formElement){ //Internal $.validator is exposed through $(form).validate() var validator = $(formElement).validate(); //Iterate through named elements inside of the form, and mark them as error free $('[name]',formElement).each(function(){ validator.successList.push(this);//mark as error free validator.showErrors();//remove error messages if present }); validator.resetForm();//remove error class on name elements and clear history validator.reset();//remove all error and success data } //used var myForm = document.getElementById("myFormId"); clearValidation(myForm); minified as a jQuery extension: $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();}; //used: $("#formId").clearValidation();

thats great , this solution is also working with "ValidationMessageFor"

Great! Works perfectly with Bootstrap and MVC!

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 98

I came across this issue myself. I had the need to conditionally validate parts of a form while the form was being constructed based on steps (i.e. certain inputs were dynamically appended during runtime). As a result, sometimes a select dropdown would need validation, and sometimes it would not. However, by the end of the ordeal, it needed to be validated. As a result, I needed a robust method which was not a workaround. I consulted the source code for jquery.validate.

  • Clear all storage of success or errors
  • Reset entire form validation Here is what it looks like in code: function clearValidation(formElement){ //Internal $.validator is exposed through $(form).validate() var validator = $(formElement).validate(); //Iterate through named elements inside of the form, and mark them as error free $('[name]',formElement).each(function(){ validator.successList.push(this);//mark as error free validator.showErrors();//remove error messages if present }); validator.resetForm();//remove error class on name elements and clear history validator.reset();//remove all error and success data } //used var myForm = document.getElementById("myFormId"); clearValidation(myForm); minified as a jQuery extension: $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();}; //used: $("#formId").clearValidation();

thats great , this solution is also working with "ValidationMessageFor"

Great! Works perfectly with Bootstrap and MVC!

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 0

By default, all errors automatically clear out when the field is made valid.

"I have two fields, first element is not required, second is required only when first is empty."

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field2: {
                required: function () {
                    return $('#field1').is(':blank');
                }
            }
        }
    });

});
<form id="myform">
    <input type="text" name="field1" id="field1" />
    <input type="text" name="field2" id="field2" />
    <input type="submit" />
</form>

Otherwise, you would have to create a custom method to have more precise control over everything...

$(document).ready(function () {

    jQuery.validator.addMethod('customrule', function (value, element) {
        if ($('#field1').val() === "" && $('#field2').val() === "") {
            return false;
        } else {
            $('label.error').hide();
            return true;
        }
    }, "Please fill out field #2 when field #1 is empty");


    $('#myform').validate({ // initialize the plugin
        groups: {  // use 'groups' option to combine both error messages into one
            name: "field1 field2"
        },
        rules: {
            field1: {
                customrule: true
            },
            field2: {
                customrule: true
            }
        }
    });

});

jquery - Valid method does not clear error message if it returns true ...

jquery jquery-validate
Rectangle 27 0

You want the resetForm() method:

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

I grabbed it from the source of one of their demos.

For those using bootstrap, there are cases where resetForm() does not clear all the instances of .error on the child elements of the form. This will leave residual CSS like red text color unless you call .removeClass(). Example: $('#myform .control-group').removeClass('error');

Using bootstrap 3 this doesn't hide the field validation errors. What a shame.

ya you are right @the Muffin Man

It works for me with Bootstrap 3. Perhaps the problem is with your integration of both libraries?

No this resetForm will literally even rest the form data, too.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 0

The plugin provides a method called .valid() in which its sole purpose is to programmatically trigger validation, either on a single field or the entire form.

The validation of a regular input field is normally triggered by events such as keyup and blur. Since you don't have those events on a hidden field, you simply need to use the .valid() method to manually trigger validation.

$("#testhidden").valid();

I've modified your function as follows and since you're using jQuery, also removed the inline JavaScript...

$('#addvalue').on('click', function() {
    alert('value before: ' + $("#testhidden").val());
    $("#testhidden").val("sometext");
    $("#testhidden").valid(); // <- manually trigger validation of this field
    alert('value after: ' + $("#testhidden").val());
});

However, I don't understand why you'd need to validate something beyond the control of the user. In other words, since the hidden field is controlled programmatically, what's the point of applying validation to it in the first place?

I think you've got the solution here and I like it because it uses the built-in functionality of the plugin. I know my use case seems odd but as I tried to explain in another comment the actual case is that the user completes a CAPTCHA which updates a hidden field. I want the same validation that I am using for the form to also validate the CAPTCHA response before the form can be submitted. Hopefully that helps explain it. Thanks for the useful answer!

@Miguel-F, I see. However, I hope your CAPTCHA is being evaluated on the server, as JavaScript could easily be bypassed and manipulated by the user.

Yes absolutely! I am validating on the server as well. But it doesn't seem right for the form to be submitted (by pressing the enter key) without satisfying the CAPTCHA first.

@Miguel-F, of course. I've just never seen it done this way. I validate the empty field before anything is submitted, and I use the remote method to validate the user's Captcha response against the server. I've never needed to validate any hidden fields.

I have never needed to do this either. During testing a user noticed that they could bypass the CAPTCHA by simply entering text in the field and pressing the enter key (the form's submit button is disabled until the CAPTCHA is satisfied - via JavaScript). My thought was that I need to add the hidden CAPTCHA field to the validation logic so the form cannot be submitted until the CAPTCHA is satisified. Hence my question here. Your solution above seems to be working for me during initial testing. Thanks again!

jquery - Cannot get validation message to clear after updating input f...

javascript jquery jquery-validate
Rectangle 27 0

function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }

This function is working on the cancel button and where else u want to use this one is good.try it

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 0

Normally, resetForm() should be removing the default label elements containing the error messages.

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()

I will accept the answer. Does the resetForm take care of the the highlighted error of the fields as well?

@MoxieC, no, it does not. It just takes care of the default messages, not anything you're doing with highlight and unhighlight.

javascript - Jquery Validate resetForm does not clear error messages -...

javascript jquery forms jquery-validate
Rectangle 27 0

I solved the problem. Not sure if it's the most elegant way to do it, but it works. I had to clear the invalid state of the field somehow. I tried resetForm() but that didn't work. In the end I used something like this:

if ($("#ID").val()=="") {
                validator.resetForm();
                $("#ID").rules("remove", "required minlength");
        }

and as needed added those rules back to the ID using:

$("#ID").rules("add", {
                             required: true,
                             minlength: 5,    
                             messages: {//messages
                             },                             
                });

Clear error message or reset validation using jQuery Validation plugin...

jquery-plugins
Rectangle 27 0

function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }

This function is working on the cancel button and where else u want to use this one is good.try it

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 0

I came across this issue myself. I had the need to conditionally validate parts of a form while the form was being constructed based on steps (i.e. certain inputs were dynamically appended during runtime). As a result, sometimes a select dropdown would need validation, and sometimes it would not. However, by the end of the ordeal, it needed to be validated. As a result, I needed a robust method which was not a workaround. I consulted the source code for jquery.validate.

  • Clear all storage of success or errors
  • Reset entire form validation Here is what it looks like in code: function clearValidation(formElement){ //Internal $.validator is exposed through $(form).validate() var validator = $(formElement).validate(); //Iterate through named elements inside of the form, and mark them as error free $('[name]',formElement).each(function(){ validator.successList.push(this);//mark as error free validator.showErrors();//remove error messages if present }); validator.resetForm();//remove error class on name elements and clear history validator.reset();//remove all error and success data } //used var myForm = document.getElementById("myFormId"); clearValidation(myForm); minified as a jQuery extension: $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();}; //used: $("#formId").clearValidation();

thats great , this solution is also working with "ValidationMessageFor"

Great! Works perfectly with Bootstrap and MVC!

First of all, thanks! Had this working great for years, but now I've discovered a performance issue: showErrors does some DOM manipulation and it is called for every element in the form. The browser froze for a couple of seconds when using this code on a form with ~ 30 controls. The solution for me was to move showErrors out of the loop and just call it once right before validator.resetForm. As far as I can tell, it behaves exactly the same way and is a lot faster.

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate
Rectangle 27 0

function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }

This function is working on the cancel button and where else u want to use this one is good.try it

How to clear jQuery validation error messages? - Stack Overflow

jquery jquery-validate