Cookie Policy

Our website uses cookies to enhance your browsing experience and provide personalized content. By continuing to use our site, you consent to the use of cookies. You can manage your cookie preferences in your browser settings. For more information, please refer to our Cookie Policy.

Accept all Reject all

Form validation using HTML and JavaScript

Posted By: Akash Singh Published: 14, Jan 2024

Form validation using HTML and JavaScript


Q4 - Create a contact form which accepts the following information: 1. Name, 2. Email, 3. Mobile and 4. Message. Following validations to be added. 1. Required, 2. Invalid values should not to be entered in any of the fields. Screenshot attached for reference. *

HTML

   <body>
    <form  name="myForm" onsubmit="return validateForm()" method="post">
        <div class="myformlayout" id="name">
            Name:<input type="text" name="fname" required ><span class="formerror"><b> </b></span>
        </div>
        <div class="myformlayout" id="email">
            Email:<input type="email" name="femail" required><span class="formerror"><b> </b></span>
        </div>
        <div class="myformlayout" id="phone">
            Phone:<input type="text" name="fphone"  required><span class="formerror"><b> </b></span>
        </div>
        <div class="myformlayout">Message</div>
        <div class="myformlayout ">
        <textarea id="textarea" rows="10" cols="88" name="ftextbox" required> Enter you message here</textarea>     
       </div> 
       <input class="but" type="submit" value="Submit">  
    </form>
</body>

CSS

     <style>
        body {
            padding: 10px 50px;
        }

        .myformlayout {
            font-size: 18px;
        }

        .myformlayout input {
            width: 50%;
            padding: 5px 20px;
            border: 1px solid blue;
            margin-bottom: 14px;
            border-radius: 4px;
            font-size: 15px;
            display: flex;
            outline: none;
        }
        .formerror{
            color: red;
            font-size: 18px;
        }
        @media screen and (max-width: 992px){

        .myformlayout input{
            width: 100%;
            padding: 0;
            height: 30px;
        }
        .myformlayout textarea{
            max-width: 100%;
        }
        .myfomlayout{
            max-width: 100%;
        }
            
        }
        .myfomlayout{
            font-size: 18px;
        }
        .but{
            background-color: blue;
            color: #fff;
            padding: 10px 20px 10px 15px;
            border: none;
            font-family: sans-serif;
            font-weight: 700;
        }
       
    </style>

JavaScript

     <Script>
    function clearErrors(){
        errors = document.getElementsByClassName('formerror');
        for(let item of errors){
            item.innerHTML = "";
        }
    }
   function seterror(id, error){
       element = document.getElementById(id);
       element.getElementsByClassName('formerror')[0].innerHTML = error;
   }

   function validateForm(){
       var returnval = true;
       clearErrors();
       //perform validation and if validtaion fails set the vale of return val to false
    var name = document.forms['myForm']["fname"].value;
    if (name.length<5){
        seterror("name", "*Lenth of name is too short!");
        returnval = false;
    }
    var email = document.forms['myForm']["femail"].value;
    if (email.length>55){
        seterror("email", "*Lenth of email is too long!");
        returnval = false;
    }
    var phone = document.forms['myForm']["fphone"].value;
    if (phone.length != 10){
        seterror("phone", "*Phone no should be ten digit!");
        returnval = false;
    }
    return returnval;

   }
</Script>

Categories


Recent Blog