steps
Form Step
Form steps show user inputs to gather information that is submitted and then stored. For instance, a login or signup form.
Input types
The HTML markup used means that basically all HTML5 input types can be used within a form step. SOme of the most common include:
<input type='text'><input type='checkbox'><input type='password'><input type='email'><input type='tel'><textarea>
You can see a full list here.
Setting an input to required
To set an input to required, meaning that it must meet the requirements of the input attributes, then set required='true' attribute on the <input>.
Validation
HTML5 allows you to set validation on an input using patterns and other attributes.
Validation with Pattern
The pattern attribute allows you to set validation using REGEX. Take a password input for example:
<input title='Please enter at least one number, one uppercase letter and one lowercase letter' class='input--text__input' type='password' minlength='8' pattern='^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$' id='password' name='password' required>
The ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$ REGEX pattern here is asking for at least one number, one uppercase letter and one lowercase letter.
Try not to set overly complex password requirements. The example above, for instance, would be considered overly complex password requirements that involves too much mental gymnastics from the user – which can lead to mental fatigue, which in turn leads to poor password choices. Keep it simple but effective.
Note the use of the title attribute here. This should be set to provide context to the user of what the password requirements are when they are not met. However, password requirements should always be communicated to the user in plain sight, beside the input. This is what the form-helper markup is for:
<span class="form--helper">Please enter at least one number, one uppercase letter and one lowercase letter</span>
Validation with minlength
If you just want to add some basic validation that requires a certain number of characters, this can be achieved with the minlength attribute. For example:
<input class='input--text__input' type='password' minlength='8' id='password' name='password' required>
<span class="form--helper">Please enter at least 8 characters</span>
This would require a minimum of 8 characters in the password field before its valid.
Validation with input types
Sometimes no additional validation is required and the validation itself is automatically added based on the input type. For example, an <input type='email'> field will require that a valid email address is entered before it is valid. However its often good practice to have additional validation, just incase.