Geek asks and answers

JQuery validation error messages do not hide why

I use jquery validation and jquery unobtrusive validation plugins. I am trying to hide the error message, but the error message is not hiding. I created a js script:

Script Link

Below is the code I used in the script:

Html

<form id="form">
    Name:
    <input data-val="true" data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 15." data-val-length-max="15" data-val-length-min="3" name="FirstName" type="text" />
    <span class="field-validation-valid help-block" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</form>
<button id="hide">Hide</button>

Hide

Js

$("#hide").click(function(){
   $("#form").data("validator").hideErrors();
});

What am I missing here and why do hideErrors () not work?

Edit

I don't know why you guys don't keep jquery unobtrusive validation in mind when giving answers. Almost all answers simply focus on how to hide error messages without worrying about existing functions that might be broken if we just hide the message. I already mention that I need an answer

Why hideErrors () function of jquery validation object not working?

, , .

+3
4

, resetForm hideErrors. , resetForm hideErrors.

, resetForm, - , jquery.validate.unobtrusive .

jquery.validate.unobtrusive plugin errorClass errorElement jquery.validate.

jquery.validate.unobtrusive Line-109

    .... 
    if (!result) {
        result = {
            options: {  
                errorClass: "input-validation-error",
                errorElement: "span",
                errorPlacement: $.proxy(onError, form),
    ...

, resetForm validator, jquery.validate , .

:

- 1

jquery.validate.unobtrusive errorClass errorElement :

    errorClass: "error",
    errorElement: "label",

, jquery.validate.

- 2

, , . , , :

        // get the form 
        var form = $("#formId");

        // get validator object
        var validator = form.validate();

        // get errors that were created using jQuery.validate.unobtrusive
        var errors = form.find(".field-validation-error span");

        // trick unobtrusive to think the elements were succesfully validated
        // this removes the validation messages
        errors.each(function () { validator.settings.success($(this)); })

        //this is optional, only needed if you defined 
        //custom unhighlight function  
        if (validator.settings.unhighlight) {
            for (i = 0, elements = validator.invalidElements() ; elements[i]; i++) {
                validator.settings.unhighlight.call(validator, elements[i], validator.settings.errorClass, validator.settings.validClass);
            }
        }
+3

$(".help-block").toggle(); $(".help-block").hide();, .

http://jsbin.com/leyacefi/10/edit?html,js,output

. , :

$("#hide").click(function(){
    $(".help-block").hide();
});

$('#form').keyup(function(){
  $(".help-block").show();
});

http://jsbin.com/leyacefi/11/

:

hideErrors this.addWrapper( this.toHide ).hide();, addWrapper, , hide. hide showHide, - elements. elements.length 0, elem.style.display = show ? values[ index ] || "" : "none";, CSS. , .

+2

:

$(document).ready(function() { 
        $("#hide").click(function(){ 
            $("span.help-block").hide();
        }); 

});
+1

. validator, ,

    Validator

The validate method returns a Validator object that has a few public methods that you can  use to trigger validation programmatically or change the contents of the form. The validator object has more methods, but only those documented here are intended for usage

.hideErrors() . .

But in javascript (you can tell jquery) many are possible. Therefore, even if they do not allow you to call it a jquery object, you can call it in the DOM.

Just use it like this.

   $("#hide").click(function(){
   $("#form").data("validator")[0].hideErrors();
});
+1
source

More articles:


All Articles