93

When required is defined in a form field, Firefox 4 automatically shows a red border to this element, even BEFORE the user hits the submit button.

<input type="text" name="example" value="This is an example" required />

I think this is disturbing for the user as he/she asn't made mistakes at the beginning.

I wnat to hide that red border for the initial state, but show it when the user hits the send button if there is a missing field marked as required.

I looked at :required and :invalid from new pseudo selector, but the changes are for before AND after the validation. (from Firefox 4 Required input form RED border/outline)

Is there a way to disable the red border before the user submits the form, and show it if there is some missing fields ?

Community
  • 1
  • 1
Cyril N.
  • 38,875
  • 36
  • 142
  • 243

7 Answers7

156

This was a little tricky but I've set up this exmaple: http://jsfiddle.net/c5aTe/ which is working for me. Basically the trick seems to be getting around having placeholder text which is invalid. Otherwise you should be able do this:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

or something similar...

BUT since FF4 decides to validate your placeholder text (no idea why...) the solution in the fiddle (little hacky - uses !important) is required.

EDIT

Doh!! - I feel well silly. I've updated my fiddle: http://jsfiddle.net/c5aTe/2/ - you can use the :focus pseudo class to keep the element styled as if valid while the user is typing. This will still highlight in red if the content is invalid when the item loses focus but I think there is only so much you can do with the designed behaviour...

HTH :)

EDIT after acceptance:

Summary of examples at OP's request (note the first two are only designed for FF4 - not Chrome)

  1. Fix for FF validating your place holder text: http://jsfiddle.net/c5aTe/
  2. Fix for FF validating as you type: http://jsfiddle.net/c5aTe/2
  3. JS solution toggling styles/validation: http://jsfiddle.net/c5aTe/4
starball
  • 20,030
  • 7
  • 43
  • 238
Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
  • Great breakthrough, but the "invalid" error seems to be shown when the user click on the input => when the input is empty, BEFORE he actually write something. But maybe what I want is a bug in FF4 that can't be resolved :/ – Cyril N. May 31 '11 at 15:51
  • But +1 for your way to limiting the horrible red box shadow :) – Cyril N. May 31 '11 at 15:52
  • Don't think you can do this because, strangely, it's almost *too* clever and validates on the fly. You could be clever with some additional javascript that added or removed a class from the form when it is submitted. Then you could override any validation highlighting based on that class being present or not. Nice thing about this is that it is still using the native validation not so nice is requiring additional js... :| – Stuart Burrows May 31 '11 at 16:00
  • 1
    had some inspiration while making breakfast - added above! – Stuart Burrows Jun 01 '11 at 06:38
  • Clever! :p But if you take a look, you have the shadow for the original state AND the box shadow for the invalid state. Both of them are shown. I start to believe that this is a mistake from Mozilla, they didn't thought about the initial state. If this is correct and no one else add a working completely way to do it, I won't accept your answer but I will give you the bounty (hope this is possible, if not, I will accept your answer). You deserve it :) Thanks for your help! – Cyril N. Jun 01 '11 at 07:29
  • thanks for comment :). Just to check - are you looking at the second fiddle? I only get 1 shadow after tabbing away when invalid content is entered - not while typing and not before either. Can't see any default shadow - it should be removed by the initial css declaration. I am now curious as to why we are seeing different results... Additionally I've mocked a potential javascript solution (with dirty inline functions) with two examples: http://jsfiddle.net/c5aTe/4/ – Stuart Burrows Jun 01 '11 at 10:20
  • Well, I know what the second jsfiddle wasn't working for me ... I was testing it on Chrome (shame on me). But this uncover an other problem (for an other question then) : why the problem is now on Chrome :p Well you deserved the bounty and the accepted answer since it works now for FF! Could you update your answer with the second jsfiddle and the last you suggested, both works great (one in FF only, the second, using JS, in both). It could help others users having the same problem. Thanks again :) – Cyril N. Jun 01 '11 at 10:29
  • (I can only award the bounty in 56 minutes ... you'll have to wait ;)) – Cyril N. Jun 01 '11 at 10:30
  • Woot - added to my answer as you suggested. :) – Stuart Burrows Jun 01 '11 at 10:54
  • Thanks ! 31 minutes remaining ... :p – Cyril N. Jun 01 '11 at 10:55
  • I just had to do this : select[required] { box-shadow:none !important; } – Maxence Jan 04 '13 at 20:06
39

As of Firefox 26, the actual CSS used to identify invalid required fields is as follows (comes from forms.css):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

To replicate in other browsers, I use:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

I played around with the pixel settings but I never would have guessed the 1.5px without looking at moz source.

To disable it, you can use:

input:invalid {
    box-shadow: none;
}
Dan
  • 1,823
  • 16
  • 18
4

Try: 

document.getElementById('myform').reset();
Andriy
  • 973
  • 8
  • 13
  • This should the accepted answer. Firefox (and most browsers I have tested) won't mark an input field as invalid when the user hasn't even inputted anything. It should not be an issue. I suspect the asker is doing the same thing as me, reusing a form in a single page application. Resetting the form clears all the invalid-input red borders. – Daniel Wu Jan 06 '21 at 03:50
  • I'm using an initial disabled option as a placeholder to force users to choose an option. ".reset()" just dodge this and automatically selects a valid option :S – David Gras Jun 30 '21 at 09:42
1

Here is a very easy solution that worked for me. I basically changed the ugly red into a very nice blue, which is the standard color for non-required fields, and a web convention:

:required {
    border-color: rgba(82, 168, 236, 0.8);
}
Randy Greencorn
  • 3,864
  • 2
  • 22
  • 15
0

This worked well for me:

input:invalid {
     -moz-box-shadow: none;
}
j0k
  • 22,600
  • 28
  • 79
  • 90
WVDominick
  • 2,074
  • 15
  • 17
  • 7
    The problem here is that after the validation, the box shadow remains to none and the user doesn't have any clue of where the errors occurs. What I want is to NOT display the red border in the normal state of the form, but show it when the user submit/blur the form if there is an error. – Cyril N. May 31 '11 at 11:33
-1

Please try this,

$("form").attr("novalidate",true);

for your form in your global .js file or in header section.

Anoop Velluva
  • 329
  • 2
  • 9
-1

A way I found to at least mostly fix the issue is:

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

That way, the input field starts out with that nice blue outline, but once the user enters a character it's set to required (so if you enter a character then backspace, the red border is there). In this case it is possible for a user to skip the input, so make sure to put backend validation in place if you do this.

kylew
  • 150
  • 1
  • 11