jquery validate - container doesn't hide when nonrequired regex validation has occurred

Question

I have jquery validation working so that when validation occurs, the errors get placed into a container instead of inline.

I'm having an issue with some of my non-required fields. See the jsfiddle below for the code. Here's a brief overview:

Name: required field
Comment: required field
Url: not required, but class='url' to insure valid url
Email: not required, but class='email' to insure valid email

To reproduce:
Enter the value foo into the email field OR the url field and tab off
You'll get the "email is invalid" error as expected.
Go back into the field and clear it out and tab off
The error will go away, but the error container is still there (you can see the red outline at the top)

It seems that for regex type validation, if the field isn't required, it's not resetting back to ignoring validation when there's no value in there. If I go in and actually fix the error, e.g., making the email [email protected], everything works fine.

How can I get the validation to accept a blank value as valid for non-required fields?

jsfiddle link: http://jsfiddle.net/tjans/napf7/

I've updated the jsfiddle with some markup more closely relating to what I'm trying to accomplish. I have a bit of a workaround in place that basically just attaches a "change" event to email fields and checks for how many visible divs (visible divs = error) and if the length is 0, hides the errorLabelContainer. It's not perfect, and still has a glitch where it won't actually hide until you tab off the field, so I'd still like to find a better solution. Hopefully the demo update sparks someone's attention. — tjans
– tjans, Commented Aug 1, 2012 at 13:49
I've tried several events - keyup, unhighlight, etc to do a count of visible divs, but none of them seem to work as they all think that there's one visible div at the time the event runs. Then, when everything is finished, I can do a console query of how many visible divs there are and it shows 0...it's a timing issue at that point. — tjans
– tjans, Commented Aug 3, 2012 at 14:33
I've also contacted the author of the plugin, but I don't expect to get a response back. I'm sure he's a busy man, or my email got caught by his spam filter or something. — tjans
– tjans, Commented Aug 3, 2012 at 14:33

kei · Accepted Answer · 2012-07-31 22:24:01Z

2

Use errorClass

jQuery:

$(document).ready(function(){
    $("#commentForm").validate({
        wrapper: 'div',
        errorLabelContainer: '#jserror',
        errorClass: 'errorClass'
    });
  });

Then move the border css rule to that error class. Style as necessary

#jserror {
    display:none;
}
.errorClass
{
  border:1px solid red;
}

DEMO

answered Jul 31, 2012 at 22:24

kei

20.5k2 gold badges38 silver badges64 bronze badges

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

3 Comments

tjans Over a year ago

This seems to work for my jsfiddle scenario, but when you have multiple errors e.g., url and email, it puts a border around each error. I'll have to see if this can work on the container itself as opposed to each error item.

tjans Over a year ago

Furthermore, if you look at the code in either my example or yours in firebug, you'll see that the error never truly goes away...that email error is still sitting there in the markup, so something isn't getting cleared out after fixing the error.

tjans Over a year ago

Actually, doing an error count and or looking at firebug, it seems that errors never go away, even for regular "required field" errors, so that might not be a good test.

Josiah Ruddell · Accepted Answer · 2012-08-01 02:34:47Z

1

You can overwrite the showErrors method to provide your own functionality. Call the defaultShowErrors for the standard behavior. I wrote a quick version that checks for any errors in the error object hash and conditionally shows or hides the container. Try it out. You may also want to check hasOwnProperty on the object enumeration if you go with this solution.

$("#commentForm").validate({
    wrapper: 'div',
    showErrors: function(errors){
        var hasErrors = false;
        for (var e in errors){
           hasErrors = true;
           break;
        }

        if(hasErrors) $(this.settings.errorLabelContainer).show();
        else $(this.settings.errorLabelContainer).hide();

        this.defaultShowErrors();
    },
    errorLabelContainer: '#jserror'
});

edited Aug 1, 2012 at 2:34

answered Jul 31, 2012 at 22:19

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

2 Comments

Ryley Over a year ago

This still seems somewhat odd - if you fill out the email incorrectly, submit the form, fill out the name/comment, then tab up and down the fields a couple times, it hides/shows the errorLabelContainer for some reason...

tjans Over a year ago

This is the kind of solutin i was expecting (and tried myself before coming to SO but couldnt get to work). This seems like it should work. I wonder why the random hide/show thing happens.

Mahesh KP · Accepted Answer · 2012-08-02 06:31:46Z

0

Use unhighlight section in validation plugin.

Check this jsFiddle http://jsfiddle.net/napf7/44/

answered Aug 2, 2012 at 6:31

Mahesh KP

6,47613 gold badges54 silver badges71 bronze badges

3 Comments

tjans Over a year ago

I was about to get happy, but this will hide validation for other fields as well. Hit submit on empty form. enter foo1 for email and foo2 for url. You should have 3 errors shown...then remove the values for email and url and it'll hide the container, even though name is still invalid. I'm sure I can use unhighlight though to check for errors and then hide...jsfiddle to follow if I can make it happen.

Mahesh KP Over a year ago

you need to check that too.. jsfiddle.net/napf7/49.. But i don't think its a good method since if your form contains a large number of input fields , then you need to check each case manually..

tjans Over a year ago

Thanks, but I don't think that's a suitable, dynamic solution. There has to be a better way...

Collectives™ on Stack Overflow

jquery validate - container doesn't hide when nonrequired regex validation has occurred

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related