jquery validation plugin not removing error class on blank input [duplicate]

Question

I am having an issue with the jquery validation plugin not removing the error class on blank entry (which is allowed) in this case. I am only applying one custom rule to the input which allows for empty input.

As an example...

I input something invalid for the input like #### and the move to the next input.
the input turns red and the error message shows below my fname field.
I return to it and delete the '####'. Upon doing so the error message disappears, BUT the input still stays red. I can move in and out of the field and it still stays red.
While just the input is red if I enter any single valid character in the now empty field the red disappears.

So, I guess my question is why the error message is removed correctly yet the class for the input is not being removed (highlighting in red)?

I have verified this in firebug... the has-error class is not being removed from <div class="col-md-6 form-group"> when I delete ####, but it is if I delete and enter a single valid character.

html:

<div class="col-md-6 form-group">
    <label><b>First Name</b></label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-user fa-fw"></i>
        </span>
        <input class="form-control" type="text" name="fname" <?php echo ($_SESSION['account']['fname'] ? 'data-default="true" value="'.$_SESSION['account']['fname'].'"' : 'placeholder="first name"'); ?>/>
    </div>
    <span class="help-block"></span>
</div>

js:

    $('#account-info-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            fname: {
                cname: true
            }
        },

        messages: {
            fname: {
                cname: "Enter a valid first name."
            }
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error');
            label.remove();
        },

        errorPlacement: function (error, element) {
            error.insertAfter(element.closest('.input-group'));
        }

    });

    // custom name (first or last) validation
    $.validator.addMethod("cname", function (value,element) {
        return this.optional(element) || /^[a-z][a-z .,\-]{0,31}$|^$/i.test(value);
    },"Please enter a valid name.");

    // return default values on blank and do not cause error (if valid)
    $('input[data-default="true"]').on('blur', function() {
        if ( $(this).val() == '' ) {
            $(this).val( this.defaultValue );
            $(this).valid();
        }
    });

user756659 · Accepted Answer · 2013-12-14 22:51:12Z

1

I was able to find 'unhighlight' in the docs which I guess I skipped over prior.

unhighlight: function (element) { // un-hightlight error inputs
  $(element)
  .closest('.form-group').removeClass('has-error'); 
},

answered Dec 14, 2013 at 22:51

user756659

3,52213 gold badges62 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sparky Over a year ago

Yes, I almost mentioned this on your last question I answered. Yes, unhighlight is the complement to highlight. There must be a bad demo out there someplace because on SO we too often see success incorrectly used in place of unhighlight.

user756659 Over a year ago

I agree with you. In my case I am working off an existing template which had this in use. I looked over the docs for the plugin, but never remembered seeing this one. Quick and easy fix though once I did.

m59 · Accepted Answer · 2013-12-14 21:48:51Z

0

I think you need to use .length

$('input[data-default="true"]').on('blur', function() {
    if ( $(this).length==0) {
        $(this).val( this.defaultValue );
        $(this).valid();
    }
});

EDITED

Empty fields should pass validation and only populated fields would be checked for valid characters.

DEMO http://jsfiddle.net/HBfJB/

edited Dec 14, 2013 at 21:48

m59

43.9k14 gold badges122 silver badges139 bronze badges

answered Dec 14, 2013 at 20:22

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

1 Comment

user756659 Over a year ago

Actually in this example this custom handler is not even invoked. $_SESSION['account']['fname'] is unset right now as I am just testing so the input is only getting 'placeholder="first name" from the php. I am not having any problems with this handler as I have it working on other inputs correctly.

Collectives™ on Stack Overflow

jquery validation plugin not removing error class on blank input [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related