Javascript Validation not working properly

Question

when i click on submit button nothing happen. error showing: Form.js:102 Uncaught TypeError: Cannot set property 'onsubmit' of null. cannot understand properly......

// JavaScript Document

function validate() 
{
    var x = document.forms["myForm"]["ide"].value;
    var regex = /^[1-9]{1}[0-9]{9}$/;
    if (x == null || x == "") 
 {
        alert("Enter Your ID Number");
        return false;
    }
    else if (!regex.test(x)) 
 {
        alert("ID Contain Numbers Only");
        return false;
    }
 
 var x = document.forms["myForm"]["EName"].value;
    var regex = /^[A-Za-z]+$/;
    if (x == null || x == "") 
 {
        alert("Enter Your Employee Name");
        return false;
    }
    else if (!regex.test(x)) 
 {
        alert("Employee Name Contain Alphabets Only");
        return false;
    }
 
 var x = document.forms["myForm"]["myEmail"].value;
 if (x == null || x == "")
 {
  alert("Enter Your Email Id")
  return false;
 }
 
 if((document.myForm.gender[0].checked==false)&&(document.myForm.gender[1].checked==false))
  {
    document.myForm.gender[0].focus();
    alert("Please select a gender.");
    return false;
  }
 
 var x = document.forms["myForm"]["Cnum"].value;
 var regex = /^[1-9]{1}[0-9]{9}$/;
  if(x == null || x == "")
  {
    alert("Please enter the Contact number.");
    return false;
  }
  else if(isNaN(x))
  {
    alert("Contact number should contain only digits.");
    return false;
  }
  else if(x.length!=10)
  {
    alert("Contact number should contain only 10 digits.(Mobile number)");
    return false;
  }
  else if(!regex.test(x))
  {
    alert("Invalid Contact number.");
    return false;
  }
 
 var x = document.forms["myForm"]["desig"].value;
    var regex = /^[A-Za-z]+$/;
    if (x == null || x == "") 
 {
        alert("Enter Your Designation");
        return false;
    }
    else if (!regex.test(x)) 
 {
        alert("Designation Contain Alphabets Only");
        return false;
    }
 
 var x = document.forms["myForm"]["quali"].value;
    var regex = /^[A-Za-z]+$/;
    if (x == null || x == "") 
 {
        alert("Enter Your Qualification");
        return false;
    }
    else if (!regex.test(x)) 
 {
        alert("Qualification Contain Alphabets Only");
        return false;
    }
 
  var x = document.forms["myForm"]["depart"].value;
  if (x == null || x == "") 
 {
        alert("Select Department");
        return false;
    }
}

document.getElementById("myForm").onsubmit = function () 
{
    return validate(this);
};

body
{
 background-image:url(img/one.jpg); 
 background-size:cover;
    margin-left: 0px;
    margin-right: 0px;
 display:flex;
}

table
{
    padding-top: 50px;
 margin: -36px 0px 0px 124px;
}

td
{
 padding: 0px 40px 0px 0px;
}

p
{
 font-family: Corbel;
    margin: 16px 0px 0px 0px;
 font-size: 20px;
 color: white;
}

.text
{
 font-weight: bold;
}

.sumbit
{
 margin: 30px 0px 0px 58px;
    padding: 12px 0px 12px 0px;
    font-size: 26px;
    background-color: black;
    color: white;
    border: 1px solid black;
    width: 674px;

}

.choose
{
 color:white;
}

.hobby
{
 margin-left:10px;
}

.area
{
    border: 0px solid;
    border-radius: 12px;
    padding: 6px 6px 6px 6px;
}

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<link rel="stylesheet" href="PHP_Form.css" type="text/css">

</head>

<body>
<div>
<img src="img/2-1.png" style="height:658px"; width="109%">
</div>
<script type="text/javascript" src="PHP_Form.js"></script>
<div>
  <form method="post" name="myForm" action="" id="myForm">
        <table>
         <tr>
             <td class="text"><p>ID</p></td>
                <td><p><input type="text" name="ide" class="area"></p></td>
            </tr>
            <tr>
             <td class="text"><p>Emplyoee Name</p></td>
                <td><p><input type="text" name="EName" class="area"></p></td>
            </tr>
            <tr>
             <td class="text"><p>Designation</p></td>
                <td><p><input type="text" name="desig" class="area"></p></td>
            </tr>
            <tr>
             <td class="text"><p>Department</p></td>
                <td><p>
                    <select class="area" id="depart">
                      <option value="hr">HR</option>
                      <option value="manager">Manager</option>
                      <option value="operation">Operation</option>
                      <option value="administrator">Administrator</option>
                    </select>
             </p></td>
            </tr>
            <tr>
             <td class="text"><p>Gender</p></td>
                <td><p class="choose">
                    <input type="radio" name="gender" value="male">Male
                    <input type="radio" name="gender" value="female">Female
       </p></td>
            </tr>
            <tr>
             <td class="text"><p>Qualification</p></td>
                <td><p><input type="text" name="quali" class="area"></p></td>
            </tr>
            <tr>
                <td class="text"><p>Hobbies</p></td>
                <td><p class="choose">
                    <input type="checkbox" name="hobby" value="read">Reading
                    <input type="checkbox" name="hobby" value="play" class="hobby">Playing
                    <input type="checkbox" name="hobby" value="sing" class="hobby">Singing
                    <input type="checkbox" name="hobby" value="dance" class="hobby">Dancing
                </p></td>
            </tr>
            <tr> 
             <td class="text"><p>Email id</p></td>
                <td><p><input type="email" name="email" id="myEmail" class="area" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"></p></td>
            </tr>
            <tr>
             <td class="text"><p>Contact</p></td>
                <td><p><input type="text" name="Cnum" class="area"></p></td>
            </tr>
            <tr>
       <td class="text"><p>Resposibilities</p></td>
                <td><p><textarea id="respons"  name="respons" rows="6" cols="22" class="area"></textarea></p></td>
            </tr>
        </table>
       <input type="submit" value="Submit" class="sumbit">
  </form>    
</div>
</body>
</html>

Name of my file is : Form.html Form.js Form.css

You could also look into using new HTML5 `` attributes to reduce the amount you have to do in JavaScript. — gcampbell, Jul 18 '16 at 10:00

score 1 · Answer 1 · answered Jul 18 '16 at 09:55

1

you execute your script before page is loaded so that document.getElementById("myForm") returns undefined

easiest solution to fix this would be to move your

<script type="text/javascript" src="PHP_Form.js"></script>

just before </body>

if you want better solution - use DOMContentLoaded event

answered Jul 18 '16 at 09:55

pwolaq

6,343
19
45

*"if you want better solution - use `DOMContentLoaded` event"* What makes it "better," exactly? Your original solution (put it at the end) is simple, easy to implement, not reliant on browser support, and avoids having the request for the JS holding up page display. – T.J. Crowder Jul 18 '16 at 09:55
@T.J.Crowder it supresses such errors - that's why you wrap your code in `$(document).ready` when using jQuery – pwolaq Jul 18 '16 at 09:56
I know what it does. You've said it's "better" than just putting the script at the end of the body. Why? – T.J. Crowder Jul 18 '16 at 09:57
to make code more portable? let's say you have 2 scripts, each of them inserting elements to DOM and listening to other`s events - how do you achieve this with script order? – pwolaq Jul 18 '16 at 10:02
`DOMContentLoaded` has nothing to do with dynamically-added elements. – T.J. Crowder Jul 18 '16 at 10:03
yes but it will wait till both scripts are loaded so that each of them can add listeners to elements added by the other – pwolaq Jul 18 '16 at 10:04
Only if by "added" you mean `document.write`. So that's a very specific use case: Two scripts, both using `document.write` (which should be avoided), that need to reference each others' `document.write`n elements. I would say if that's come up, there's a bigger problem. – T.J. Crowder Jul 18 '16 at 10:07

Javascript Validation not working properly

1 Answers1