2

I've been using React for a while now for creating forms, and for some reasons I cannot do some inline validations because I'm not yet that experienced on self-created inline validations and I'm also encountering some issues. I'm thinking, however, of an alternative, but I would like to consult this community first.

So here's my scenario:

When the page loads, a form is presented to the user for validation. All form fields are required, and a submit button below will not be clickable until all fields have been completed.

Image from draw.io

My question is, is it a good practice / alternative if I will inform the user that "all fields are required"? Or should I go for a form library with inline validation? What are the impacts / pros and cons? Thanks in advance.

1
  • You could have an asterisk over each field to denote it is mandatory. If the user tries to click on the faded 'Submit' button, let them know that all asterisk fields are mandatory to be filled. Jun 29, 2016 at 6:40

2 Answers 2

1

Top message
The message at the top is a great way of informing users and works towards error prevention. As I understand you're question, it is not however an alternative to validation. Validation still needs to happen.

Asterisks
(Red) Asterisks are well known by users (they are a convention). But when you have a large form, all those asterisks (especially when they are red), can make the form ugly. A great alternative for this, when most inputs are required and just some are optional, is to add "(optional)" to the labels of all optional inputs.

Inline validation
Inline validation is great for inputs like email addresses where you check the input when the input loses focus. (blur() function in JS).
In your case some inputs might not be selected (get focus) at all, because users will just skip them. You can't inline validate these.
An option might be when an input gets focus, to check if any inputs that are above the selected input are empty.
But I don't think this is a valid option, because users don't always fill in forms top to bottom. Most will, but not all. Especially in the example form you displayed in your question. Rolename and keywords might be hard for users to fill in. Their location for example might be easiest for them to fill in so they'll first do that. This will light up the three inputs above it.
So, the only way left is to trigger validation when the submit button is clicked.
I personally validate with Javascript before I send it through to the PHP action to handle the form. This way the page won't be reloaded or you won't leave the page and you can be sure all entered information won't be lost.

So in short, a combination of visual cues like the message, an asterisk or optional label and validation is best.

1
  • Thank you for the informative answer and the options. @Paul
    – Cyval
    Jun 30, 2016 at 0:36
2

If all fields are mandatory, then you do not need to put asterisks next to everything - just put a message at the top of the form saying all fields are required.

When you click Save you still need to do field validation and report fields which have not been completed.

1
  • Will the user not have to re-orient himself/herself when the form fails upon clicking the submit button? @Splatz
    – Cyval
    Jun 30, 2016 at 0:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.