Sunday, September 22, 2019

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
<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>
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 :
<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>
Styling the form :
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>
COMBINED CODE [ALL OF THE ABOVE SECTIONS CLUBBED)
<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>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)