0

I'm working on this very long and complex form, but I'll try to keep my examples pretty basic. The form has over 200 fields, and has many conditional variations.

As an example, lets say my form starts with a single question and has two radio button options. Question would be something like:

Do you have a car? Answer Yes, or No.

If you answer No, it'll display 100 questions (with other conditionals of its own), and lets say that 50 of those 100 are required.

If you answer Yes, it'll display 100 questions (with other conditionals of its own), and lets say that 50 of those 100 are required.

I have some JavaScript that marks any hidden fields as disabled when the form submits, so that the hidden required don't hang the form up. Works perfectly this way. But the issue I am having is, if I answer yes, and I answered 40 of the 50 required fields, the html5 error message doesn't come up because of the hidden fields.

What I am trying to do is that when a field isn't filled, but required, it would do something other than popping up that error message. Like changing the text color to red or something.

Is this doable with the default HTML5 validation?

Improve this question

2 Answers 2

Reset to default
1

You can use CSS pseudo-classes to achieve some of this, though based on your explanation of your issue I'm not sure this answers your entire question.

For fields that are required and have invalid data (Note; an empty field would by default have a text color of red in this scenario):

:invalid:required { color: red; }

And for fields that are required and have valid data:

:valid:required { color: green; }

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

5 Comments

I went down this path as well, and I have a feeling that this might be my only option, which will be unfortunately. We just don't like that it's all red until a valid input is there, it feels backwards. Thank you though, I appreciate your input!
@lpangm03 The :default and :empty pseudo-classes may help.
@gcampbell Have you tested this? :default would be overridden by the presence of :required (regardless of its valid/invalid state) and :empty doesn't apply to whether an input has a value (though I think it might work on <textarea>. If you have tested it though and gotten it to work I'd love to see the results, because it would be incredibly useful!
@RobertC You're right, :default doesn't do what I thought it would. :(
@gcampbell I found a very poorly-supported workaround :placeholder-shown with that you could use input:required:invalid:placeholder-shown and define your stylings for an empty input field.
0

Why don't you just change the attribute of the input elements to remove the required at the same time as you hide them and opposite when showing them?

(I may have missunderstood the question)

Or you could onsubmit check the value of the inputs with attribute required if they are empty or not and then do a flash effect.

Improve this answer

8 Comments

Because I am hiding them as groups. So I'll have for example, 6 inputs in a group that are related, so rather than hiding each and every input, I hid just the group. I understand I may have to ditch what I have now and start over and target each element, but I'd like to exhaust my current path before starting over.
What about taking all child elements in those "groups" and removing the attribute required from them when you hide the group that is?
I like the idea and there are draw backs, but might be worth a shot. Thanks!
An update on this: Turns out, this didn't work either. I think what is going on is the browser is running the validation first and then removing the required element. I'm not certain, but that's just what it feels like.
When exactly are you hiding the "groups" because that's where you need to remove the required attribute, not on the actual submit.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.