This article will show you examples of how to validate the Html form automatically or use javascript explicitly.
1. Html5 Automatically Form Validation Example.
- The example demo video URL is https://youtu.be/2GTAuMYu_88.
- To validate a Html5 form element automatically, you can use the required and pattern attributes.
- The required attribute represents that the Html element’s value can not be empty.
- The pattern attribute can be used to specify a regular expression that will be verified on the Html element value.
- If you want to show a custom validation message when the validation is failed, you can add the oninvalid event and call the javascript code this.setCustomValidity(‘custom error message’) to set the custom error message.
User Name: <input type="text" id="user_name" class="text_input" required pattern="^\w.*$" placeholder="The user name should contain characters only in [A-Za-z0-9_]" oninvalid="this.setCustomValidity('The user name should contain characters only in [A-Za-z0-9_].')" oninput="this.setCustomValidity('')" />
- Below is the example source code.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Html5 Form Validation Examples</title> <style> .text_input { width:25% } </style> </head> <body> <h3>Html5 Automate Form Validation Example</h3> <form method="post"> User Name: <input type="text" id="user_name" class="text_input" required pattern="^\w.*$" placeholder="The user name should contain characters only in [A-Za-z0-9_]" oninvalid="this.setCustomValidity('The user name should contain characters only in [A-Za-z0-9_].')" oninput="this.setCustomValidity('')" /><br/> User Email: <input type="email" id="user_email" class="text_input" required placeholder="Please input a valid email address string." oninvalid="this.setCustomValidity('Please input a valid email address string.')" oninput="this.setCustomValidity('')" /><br/> Verify Code: <input type="text" id="verify_code" class="text_input" required pattern="^\d{6}$" placeholder="Please input the 6 number verification code." oninvalid="this.setCustomValidity('Please input the 6 number verification code.')" oninput="this.setCustomValidity('')" /><br/> <input type="submit" value="Submit" /> </form> </body> </html>
2. Html5 Explicit Form Validation Example.
- The example demo video URL is https://youtu.be/EE9YJY7IcwU.
- You can also validate the Html5 form using javascript explicitly.
- Below is the example source code.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Html5 Form Validation Examples</title> <style> .text_input { width:25% } </style> </head> <script language="javascript"> function validate_form(){ // vlidate the user name value. var user_name_value = document.getElementById("user_name_1").value; if(user_name_value == ""){ alert("The user name can not be empty."); return false; }else{ user_name_pattern = "^[A-Za-z0-9_]*$"; reg_exp = new RegExp(user_name_pattern) if(!reg_exp.test(user_name_value)){ alert("Please input a valid user name, the user name should only contains the characters in [A-Za-z0-9_]"); return false; } } // validate the email value. var user_email = document.getElementById("user_email_1"); var user_email_value = user_email.value; if(user_email_value == ""){ alert("The email can not be empty."); return false; }else{ if(!user_email.checkValidity()){ alert("Please input a valid email address."); return false; } /* email_pattern = "^[A-Za-z0-9_]*@[A-Za-z0-9_]*\.[A-Za-z0-9_]*$"; reg_exp = new RegExp(email_pattern) if(!reg_exp.test(user_email_value)){ alert("Please input a valid email address."); return false; } */ } // validate the verification code. var verify_code_value = document.getElementById("verify_code_1").value; if(verify_code_value == ""){ alert("The verify code can not be empty."); return false; }else{ //verify_code_pattern = "^\d{6}$"; verify_code_pattern = "^[0-9]{6}$"; reg_exp = new RegExp(verify_code_pattern); if(!reg_exp.test(verify_code_value)){ alert("Please input a valid verify code, the code should be 6 integer number."); return false; } } } </script> <body> <h3>Html5 Explicit Form Validation Example</h3> <form method="post" onsubmit="javascript: return validate_form(); "> User Name: <input type="text" id="user_name_1" class="text_input" placeholder="The user name should contain characters only in [A-Za-z0-9_]" /><br/> User Email: <input type="email" id="user_email_1" class="text_input" placeholder="Please input a valid email address string." /><br/> Verify Code: <input type="text" id="verify_code_1" class="text_input" placeholder="Please input the 6 number verification code." /><br/> <input type="submit" value="Submit" /> </form> </body> </html>