Question

当我点击提交按钮时，没有任何事情发生。错误显示： Form.js：102 未捕获的TypeError：无法设置属性＆＃39; onsubmit＆＃39;为null。无法理解......

＆＃13;

// 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);
};

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

我的档案名称是： Form.html Form.js Form.css

Answer 1

在加载页面之前执行脚本 document.getElementById("myForm")返回undefined

解决这个问题的最简单方法是移动你的

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

在</body>

之前

如果您想要更好的解决方案 - 请使用DOMContentLoaded事件

Javascript验证无法正常工作

1 个答案: