Simple Form Validation using HTML and JavaScript- for Beginner -2019

Form Validation using HTML and JavaScript- for Beginner

Forms are used in web pages for get required details of the user and send it to the server for processing. A form is also known as web form or HTML form. Examples of form use are prevalent in Social websites, e-commerce websites etc.

HTML form validation can by executed by JavaScript.
If a form field is empty, this function alerts a message, and returns false to prevent the form from being submitted.
It is very helpful to enter the user details in form.

Let us start with example.

Syntax for Validation Using JavaScript

The above JavaScript code helps us to check all the details in HTML document.

function validation() - to run the hole conditions.

if() - to check the value if it is True or False

alert() -it will display (alert) message and ask to fill the fields.

Syntax for HTML form

The above HTML document is used to create HTML form with Text, Password and Rest and Submit the data.

<form> and </form> - used to create a form and give action.

<input type=""> - used to give data as a input.

How to execute the HTML form using JavaScript

Insert the JavaScript code above <body>.
Insert the Form Code below <body>
Save the file with filename.html.
Run using web browser, that's all!

JavaScript with in HTML document

<html>
<script> 
function validation()                                    
{ 
    var name = document.forms["ValForm"]["Name"];               
    var email = document.forms["ValForm"]["EMail"];    
    var password = document.forms["ValForm"]["Password"];

if (name.value == "")                                  
    { 
        window.alert("Please enter your name."); 
        name.focus(); 
        return false; 
    } 
          
    if (email.value == "")                                   
    { 
        window.alert("Please enter a valid e-mail Id."); 
        email.focus(); 
        return false; 
    } 
   
    if (email.value.indexOf("@", 0) < 0)                 
    { 
        window.alert("Please enter a valid e-mail Id."); 
        email.focus(); 
        return false; 
    } 
   
    if (email.value.indexOf(".", 0) < 0)                 
    { 
        window.alert("Please enter a valid e-mail Id."); 
        email.focus(); 
        return false; 
    } 
      
    if (password.value == "")                        
    { 
        window.alert("Please enter your password"); 
        password.focus(); 
        return false; 
    } 
    
}</script> 
<body> 
<h1 style="text-align: center">
 REGISTRATION FORM_VALIDATION</h1>
<h2 style="text-align:center">
          
<form name="ValForm" action="filename.php" onsubmit="return validation()" method="post">
  
    Name:<input type="text" size=35 name="Name"><br><br>        
    Email:<input type="text" size=35 name="EMail"><br> <br>
    Password:<input type="password" size=30 name="Password"><br><br> 
    <input type="submit" value="send" name="Submit">      
        <input type="reset" value="Reset" name="Reset">   
    </h2>
</form>
</body>
</html>

Output

Case-1

Case-2

In this program we learnt about Form validation using JavaScript in simple way. you may also check trending topics below.

HTML and JavaScript Programming
Python Programming

Trending Post-

Python Program for display the multiplication table of any number from the use