Html5 Form Validation Example Windows Tricks

This article will show you examples of how to validate the Html form automatically or use javascript explicitly.

Table of Contents

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.

html5 explicitly 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>

1. Html5 Automatically Form Validation Example.

2. Html5 Explicit Form Validation Example.

Leave a Comment Cancel Reply