A HTML5 snippet for browser side form validation
Whenever you put a form in your website to receive a data from user, it is very important to get it in correct format. To achieve that, form validation is very important and should be done very cautiously. Before the HTML5 was introduced, we were using some complicated line of code (a front end developer will understand why I said that 
) to validate the form inputs. But now just by adding an attribute you can successfully do the browser side validation. This simple snippet is an overview of browser side form validation using HTML5 attributes like require and pattern.
HTML5 has introduced some new input types like email and tel. To do the browser side or say client side validation we were using JavaScript. But now HTML5 form validation attributes make this thing easy.
CSS
Let’s make our example look little bit beautiful
form label {
display:block;
margin:30px 0 0 20px;
font-family:Georgia, Arial, Helvetica, sans-serif;
font-style:italic;
}
form input {
margin:10px 0 30px 20px;
display:block;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #E5E5E5;
color: #808080;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 1.23em;
outline: medium none;
padding: 6px 9px 7px;
width: 400px;
}
.submit{
font-family:Georgia, Arial, Helvetica, sans-serif;
font-weight:bold;
color:#fff;
width:100px;
background-color:#ee4e1d;
cursor:pointer;
}
.submit:hover {
background-color:#d03303;
}
HTML
Notice the pattern attributes to accept the desired value,
<form>
<label>Full name</label>
<input type="text" name="name" maxlength="50" pattern="^.+$" required placeholder="Lorem Ipsum" />
<label>Email</label>
<input type="email" name="email" placeholder="you@yourmail.com" maxlength="320" pattern="^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$" required />
<label>Telephone number</label>
<input type="tel" name="tel" placeholder="(+00) 12345 67890" title="You may use numbers in combination with the following characters: -+()x" maxlength="30" pattern="^[-+() 0-9x]+$" required />
<label>Username</label>
<input type="text" placeholder="userlorem" title="Can contain letters, numbers, apostrophes, hyphens and spaces and must start with a letter or number. The length may vary between three and fifty characters" maxlength="50" pattern="[0-9a-zA-Z\u00C0-\u024F][- '0-9a-zA-Z\u00C0-\u024F]{2,49}" required />
<label>Password</label>
<input type="password" placeholder="1q2w3ed" title="Can contain any character. The length may vary between seven and hundred characters" maxlength="100" pattern=".{7,100}" required />
<input type="submit" class="submit" value="Submit" />
</form>
Try it in a browser that supports HTML5 browser side validation to see the results!
Before using this snippet or using any kind of client side validation read our this post: Client side Vs Server side Validation
If you’ve enjoyed reading this post, share it with your friends and be sure to join us on Socials
I agree that adding client side form validation can help weed out the most common errors, but please don’t cut down on the server side input validation, as client side validation is not bullet proof and can be disabled.
Hello Mogens,
We totally agree on what you say.
Guys, if you are not processing your data or say you are not saving the inputs to your database then only go with client side validation.
If you want to improve the UX, then also you can use this validation. But then you should have the backend validation running to sanitize the input received from the front end.
Cool form validation. Have been using my own custom Cold Fusion Internet programming for form validation run from a component. This validation occurs on the client as well as on the server. Most of the programming involved can be caught on the client side, but there are some parts I catch on the server side due to the complexity of the validation. This is great if I ever decide to change up to another form of validation.
Pingback: Client side vs Server side Validation - DzyngiriDzyngiri