【My Study Note】Form Validation
Form Validation
Required
<input type="text" id="firstName" name="firstName" required>Denotes a mandatory input that the user can’t leave empty. It can be used with any input type, like password, radio, text and so on.
Maxlength
<input type="text" id="description" name="description" maxlength="50">Specifies the maximum length of a text input, in other words, the maximum number of characters that can be entered for a specific field. If provided, it will prevent the user from entering more characters than the limit.
Minlength
<input type="password" id="password" name="password" minlength="8">Specifies the minimum length of a text input. If set, the input will not accept fewer characters than those specified.
Min and max attributes (For numerical values)
<input type="number" id="quantity" name="quantity" min="1" max="10">
<input type="range" id="volume" name="volume" min="1" max="100">Determine the minimum and maximum values allowed for an input field. They are usually applied to numerical text inputs, range inputs or dates.
Multiple
<input type="file" id="gallery" name="gallery" multiple>Indicates that the user can enter more than one value in a single input field. This attribute can only be used for email and file input types.
Pattern
<input type="tel" id="phone" name="phone" pattern=”^(?:0|\+?44)(?:\d\s?){9,10}$” >Defines a particular pattern that an input field value has to fulfill to be considered valid. This attribute expects a regular expression to specify the pattern. It works with text, date, search, URL, tel, email and password input types. For example, you can restrict phone numbers to be only from the UK.
Value Attribute
<input type="range" min="1" max="10" value="4" > With using this attribute, you can set the default value.
Output Element
<input type="range" min="1" max="10" value="4" oninput="this.nextElementSibling.value = this.value">
<output>4</output>When you use the “input type=range”, they don’t show the number of the range. That is why, with using this and the javascript code, you can change the range of the number interactively as well.