Issue
Check out these two fiddles in Firefox or Chrome.
In this one, I've got just a simple form with a required
attribute and a submit
button. Pressing "submit" when the box is empty causes it to be styled as invalid
(in Firefox, it's a red outline). But it waits until you press submit to show that it's invalid.
Now try this one. It's identical, except that there's some css:
input:invalid{
border-color:orange
}
Except this time the orange border color is applied even before submit is pressed. So if and only if you manually set an invalid
style for a form, the browser applies it before, which is not intuitive behavior. Of course a required field will invalid before you enter anything.
Is there a way to fix this?
Solution
Here's what you're looking for: http://jsfiddle.net/CaseyRule/16fuhf6r/2/
Style it like this:
form.submitted input:invalid{
border-color:orange
}
And then add this JavaScript (I'm using jQuery here):
$('input[type="submit"]').click( function(){
$('form').addClass('submitted');
});
I don't believe there is a way to achieve this yet without JavaScript.
Answered By - Casey Rule
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.