html input not clearing on jquery validation

Question

I'm having an issue with removing classes from a HTML input when that element becomes empty.

Please see: http://jsfiddle.net/GgFXs/4/

This happens for a split second, or if you hold the backspace button in the field. Any time after, the field takes on the 'valid' class - why? and how to fix?

I'm unfamiliar with the input event - are you sure that's the event you meant to bind? — kinakuta
– kinakuta, Commented Jun 12, 2011 at 20:01
yes, i use 'input' because it fires on all key presses + pastes — Jordan Arsenault
– Jordan Arsenault, Commented Jun 12, 2011 at 20:03
I think it's working for me. When I erased all my input, the background turned white again. Is that not the behavior you want? edit: actually, I take that back - I had put an alert in there and I think that caused a different timing condition - when I removed it the background stayed green. I'll have to look at it more. — kinakuta
– kinakuta, Commented Jun 12, 2011 at 20:10

Eric · Accepted Answer · 2011-06-12 20:20:13Z

2

Your logic is quite convoluted. You occasionally end up with the undesirable situation of having both .valid and .invalid applied. Try this instead:

$(function() {
    $('form').validate();
    $('input').bind('input', function() {
        if ($(this).val() != '') $(this).addClass('nonEmpty');
        else $(this).removeClass('nonEmpty');

        if ($(this).valid()) $(this).addClass('valid');
        else $(this).removeClass('valid');
    });
});

.nonEmpty {background: #E4CCCC;}
.nonEmpty.valid {background: #9BCC60;}

answered Jun 12, 2011 at 20:20

Eric

98.1k54 gold badges257 silver badges389 bronze badges

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

4 Comments

Jordan Arsenault Over a year ago

Thanks, it works - but can you explain why my logic is 'quite convoluted', and why my method was not working?

Will Martin Over a year ago

+1, and note that the onInput event is not supported in IE 8 or lower. It works in IE 9. help.dottoro.com/ljhxklln.php

Eric Over a year ago

@Jordan: Well for one, your code allows an input to be both valid and invalid! It's hard to tell what's the cause of the persisting valid state.

Jordan Arsenault Over a year ago

Oops, Indeed - I forgot to call .removeClass() on the selectors to remove the opposite class. I've made this change on jsfiddle but the valid state persists. If anybody can explain why, please do. @Will Martin: thanks for this.

bobince · Accepted Answer · 2011-06-12 20:50:35Z

1

You're mixing up functionality from the Validation plugin with your own code. You can remove the valid className, but the Validation plugin will add it back if it thinks the field is valid.

If you want a blank field to be rejected by the Validation plugin, you'll have to give it class="required". If you want to be monitoring, adding and removing classes manually, you're not really using the Validation plugin as intended IMO.

answered Jun 12, 2011 at 20:50

bobince

538k111 gold badges675 silver badges846 bronze badges

1 Comment

Jordan Arsenault Over a year ago

this is perfect, thanks for pointing out that the validation plugin reserves the .valid and .invalid class names. I did not realize this. Changing the class names to my_valid and my_invalid and adding the removeClass()'s worked. Final working code here: jsfiddle.net/8QvXP/1 Thanks all.

Collectives™ on Stack Overflow

html input not clearing on jquery validation

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related