Form Validation in Pure JS using Form Element Name

 In this post you will learn how to get value from form elements and how to validate whether it filled or not and selected or not . We are trying to show you all basic tags with validation .

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1>Pure Javascript Form Validation using form Element Name</h1>
    <form name="myform">
        <table align="center" border="30">
            <tr>
            <td>Gender</td>
            <td>
                <input type="radio" name="gender" value="Female" />&nbsp;&nbsp;Female &nbsp;&nbsp;
                <input type="radio" name="gender" value="Male" />Male
            </td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text" name="name" placeholder="Enter Your Name" /></td>
        </tr>
        <tr>
            <td>Email ID</td>
            <td><input type="email" name="email_id" placeholder="Enter Your Email ID" /></td>
        </tr>
                <tr>
            <td>Mobile No.</td>
            <td><input type="number" name="mobile_no" maxlength="10" minlength="10" placeholder="Enter Your Mobile No." /></td>
        </tr>
        <tr>
            <td>Website URL</td>
            <td><input type="url" name="website" placeholder="Enter Your Website URL" /></td>
        </tr>
        <tr>
            <td>Address</td>
            <td>
                <textarea  name="address" placeholder="Enter Your Address"></textarea>
            </td>
        </tr>
        <tr>
            <td>State</td>
            <td>
                <select name="state">
                    <option value="">Select State</option>
                    <option value="CG">CG</option>
                    <option value="MP">MP</option>
                    <option value="Maharashtra">Maharashtra</option>
                    <option value="Asam">Asam</option>
                    <option value="Nagaland">Nagaland</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="checkbox" name="terms" required="required" />
                I Accept all terms and condition .
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" name="submit" value="Save" onclick="form_validation();" />
            </td>
        </tr>
        </table>
    </form>
    <script type="text/javascript">
              function validateRadio (radios){
            for (i = 0; i < radios.length; ++ i)
            {
                if (radios [i].checked) return true;
            }
            return false;
            }


                  function form_validation(){

             var name=document.getElementsByName("name")[0].value;
             var email=document.getElementsByName("email_id")[0].value;
             var mobile_no=document.getElementsByName("mobile_no")[0].value;
             var website=document.getElementsByName("website")[0].value;
              var address=document.getElementsByName("address")[0].value;
              var state=document.getElementsByName("state")[0].value;

              var gender=document.forms["myform"]["gender"];
              var terms=document.forms["myform"]["terms"];

              if(validateRadio(gender))
              {        
                          if(name==""){
                              alert("Name is required !!!");
                          }else if(email==""){
                              alert("Email is required !!!");
                          }else if(mobile_no==""){
                              alert("Mobile No. is required !!!");
                          }else if(website==""){
                              alert("Website is required !!!");
                          }else if(address==""){
                              alert("Address is required !!!");
                          }else if(state==""){
                              alert("State is required !!!");
                          }else if(terms.checked==false){
                              alert("Terms is required !!!");
                          }
                         
              }else{
                   alert('Gender is not selected !!!');
              }


          }
    </script>
</body>
</html>

Comments

Popular posts from this blog

Target class controller does not exist - Laravel 8