Form validation using HTML and JavaScript

Forms are used in webpages for the user to enter their required details that are further 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 e-commerce websites, online banking, online surveys to name a few

Syntax for form in HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>          
<form name="RegForm" action="/submit.php" onsubmit="return GEEKFORGEEKS()" method="post"
      
    <p>Name: <input type="text" size=65 name="Name"> </p><br>       
    <p> Address: <input type="text" size=65 name="Address">  </p><br>
    <p>E-mail Address: <input type="text" size=65 name="EMail">  </p><br>
     <p>Password: <input type="text" size=65 name="Password"> </p><br>
    <p>Telephone: <input type="text" size=65 name="Telephone"> </p><br>  
           
    <p>SELECT YOUR COURSE   
        <select type="text" value="" name="Subject">
            <option>BTECH</option>
            <option>BBA</option>
            <option>BCA</option>
            <option>B.COM</option>
            <option>GEEKFORGEEKS</option>
        </select></p><br><br>
    <p>Comments:  <textarea cols="55" name="Comment">  </textarea></p>
    <p><input type="submit" value="send" name="Submit">     
        <input type="reset" value="Reset" name="Reset">  
    </p>         
</form>
</body>

chevron_right


Validating a form :
The data entered into a form needs to be in the right format and certain fields need to be filled in order to effectively use the submitted form. Username, password, contact information are some details that are mandatory in forms and thus need to be provided by the user.

Below is a code in HTML, CSS and JavaScript to validate a form .
HTML is used to create the form.
JavaScript to validate the form.
CSS to design the layout of the form.

Form validation :

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
function GEEKFORGEEKS()                                   
{
    var name = document.forms["RegForm"]["Name"];              
    var email = document.forms["RegForm"]["EMail"];   
    var phone = document.forms["RegForm"]["Telephone"]; 
    var what =  document.forms["RegForm"]["Subject"]; 
    var password = document.forms["RegForm"]["Password"]; 
    var address = document.forms["RegForm"]["Address"]; 
   
    if (name.value == "")                                 
    {
        window.alert("Please enter your name.");
        name.focus();
        return false;
    }
   
    if (address.value == "")                              
    {
        window.alert("Please enter your address.");
        name.focus();
        return false;
    }
       
    if (email.value == "")                                  
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (email.value.indexOf("@", 0) < 0)                
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (email.value.indexOf(".", 0) < 0)                
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (phone.value == "")                          
    {
        window.alert("Please enter your telephone number.");
        phone.focus();
        return false;
    }
   
    if (password.value == "")                       
    {
        window.alert("Please enter your password");
        password.focus();
        return false;
    }
   
    if (what.selectedIndex < 1)                 
    {
        alert("Please enter your course.");
        what.focus();
        return false;
    }
   
    return true;
}</script>

chevron_right


Styling the form :

filter_none

edit
close

play_arrow

link
brightness_4
code

GEEKFORGEEKS {                                        
    margin-left: 70px;
    font-weight: bold ;
    float: left;
    clear: left;
    width: 100px;
    text-align: left;
    margin-right: 10px;
    font-family:sans-serif,bold, Arial, Helvetica;
    font-size:14px;
}
   
div { 
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
   
form {                                        
    margin: 0 auto;
    width: 600px;
}</style>

chevron_right


COMBINED CODE [ALL OF THE ABOVE SECTIONS CLUBBED)

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
<script>
function GEEKFORGEEKS()                                   
{
    var name = document.forms["RegForm"]["Name"];              
    var email = document.forms["RegForm"]["EMail"];   
    var phone = document.forms["RegForm"]["Telephone"]; 
    var what =  document.forms["RegForm"]["Subject"]; 
    var password = document.forms["RegForm"]["Password"]; 
    var address = document.forms["RegForm"]["Address"]; 
   
    if (name.value == "")                                 
    {
        window.alert("Please enter your name.");
        name.focus();
        return false;
    }
   
    if (address.value == "")                              
    {
        window.alert("Please enter your address.");
        name.focus();
        return false;
    }
       
    if (email.value == "")                                  
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (email.value.indexOf("@", 0) < 0)                
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (email.value.indexOf(".", 0) < 0)                
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (phone.value == "")                          
    {
        window.alert("Please enter your telephone number.");
        phone.focus();
        return false;
    }
   
    if (password.value == "")                       
    {
        window.alert("Please enter your password");
        password.focus();
        return false;
    }
   
    if (what.selectedIndex < 1)                 
    {
        alert("Please enter your course.");
        what.focus();
        return false;
    }
   
    return true;
}</script>
  
<style>
GEEKFORGEEKS {                                        
    margin-left: 70px;
    font-weight: bold ;
    float: left;
    clear: left;
    width: 100px;
    text-align: left;
    margin-right: 10px;
    font-family:sans-serif,bold, Arial, Helvetica;
    font-size:14px;
}
   
div { 
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
   
form {                                        
    margin: 0 auto;
    width: 600px;
}</style></head>
   
<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>          
<form name="RegForm" action="/submit.php" onsubmit="return GEEKFORGEEKS()" method="post"
      
    <p>Name: <input type="text" size=65 name="Name"> </p><br>       
    <p> Address: <input type="text" size=65 name="Address">  </p><br>
    <p>E-mail Address: <input type="text" size=65 name="EMail">  </p><br>
     <p>Password: <input type="text" size=65 name="Password"> </p><br>
    <p>Telephone: <input type="text" size=65 name="Telephone"> </p><br>  
           
    <p>SELECT YOUR COURSE   
        <select type="text" value="" name="Subject">
            <option>BTECH</option>
            <option>BBA</option>
            <option>BCA</option>
            <option>B.COM</option>
            <option>GEEKFORGEEKS</option>
        </select></p><br><br>
    <p>Comments:  <textarea cols="55" name="Comment">  </textarea></p>
    <p><input type="submit" value="send" name="Submit">     
        <input type="reset" value="Reset" name="Reset">  
    </p>         
</form>
</body>
</html>

chevron_right


Resulting Form :

Reference :
https://en.wikipedia.org/wiki/Form_(HTML)



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.