Validation for HTML\JavaScript project won't work
Question
Trying to get a project working which collects the user's name, subject and examination number. The code is supposed to display an error if the name, subject and\\or examination number fields are blank, but just goes straight to the success.html, which is for when everything has been validated. Help would be appreciated.
<head>
<title>Exam entry</title>
<!-- 'Tells browser what type of code (JavaScript) is upcoming' -->
<!-- 'Start of script' -->
<script language="javascript" type="text/javascript">
<!-- 'Creates form validation script' -->
function validateForm() {
var result = true;
var msg="";
<!-- 'If 'name' text entry is empty, then message is displayed' -->
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
<!-- 'Changes 'name' text to red' -->
document.getElementId('name').style.color="red";
result = false;
}
<!-- 'If 'exam number' text entry is empty, then message is displayed' -->
if (document.ExamEntry.number.value=="") {
msg+="You must enter your exam number \n";
document.ExamEntry.number.focus();
<!-- 'Changes 'name' text to red' -->
document.getElementId('number').style.color="red";
result = false;
}
<!-- 'If 'subject' text entry is empty, then message is displayed' -->
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
<!-- 'Changes 'subjectt' text to red' -->
document.getElementById('subject').style.color="red";
result = false;
}
<!-- 'If text boxes are empty, return said results -->
if(msg==""){
return result;
}
<!-- 'Tells browser alert type to make in case of no entry to text boxes' -->
{
alert(msg)
return result;
}
}
<!-- 'End of script' -->
</script>
</head>
<body>
<!-- 'Start of HTML' -->
<!-- 'Makes header' -->
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<!-- 'Start of table creation' -->
<!-- 'Creates table with a 50% width but no border lines' -->
<!-- 'Start of table properties' -->
<table width="50%" border="0">
<tr>
<!-- 'Creates 'name' entry column in table' -->
<td id="name">Name</td>
<!-- 'Tells browser input 'text' is input type' -->
<td><input type="text" name="name" /></td>
</tr>
<tr>
<!-- 'Creates 'subject' entry column in table' -->
<td id="subject">Subject</td>
<td><input type="text" name"subject" /></td>
</tr>
<tr>
<!-- 'Creates 'exam number' entry column in table' -->
<td id="number">Exam Number</td>
<td><input type="text" name"number" /></td>
</tr>
<tr>
<!-- 'Creates 'submit' and 'reset' buttons to simulate sending data to external server to user' -->
<td><input type="submit" name="Submit" value="Submit Query" onClick="return validateform();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
<!-- 'End of table properties' -->
</table>
<!-- 'End of table creation' -->
</form>
<!-- 'End of HTML' -->
</body>
3 answers
solution1
1 2014-01-21 13:32:27
In your html you have onclick="return validateform();" but the function is actually called validateForm() . This will cause a javascript error when you click, but you probably don't notice it since the validation then never happens and you instantly come to the other page.
As others are pointing out, there are multiple other issues as well, that will become evident once you fix the above. It should be name="[name]" and you select by document.getElementById(id) . You also can't use getElementById() to select something that only has a name and no id attribute.
EDIT: Sorry, I see now that there are elements with those IDs and that it's them you target with those getElementById() calls. I think however that it is invalid to use the same name attribute on one element as an id attribute on another, since the name and id attributes share the same namespace and every identifier in that namespace should be unique.
solution2
0 2014-01-21 13:30:01
The comments in your code are used to comment out HTML markup, not Javascript.
To comment out Javascript use the following..
//To comment out this single line
/* To comment out
multiple line
code blocks */
solution3
0 2014-01-21 13:52:15
Wow...
Your comments should be js style - // your comment
I suggest that you use onsubmit="return validateForm();" for the entire form
The name of the function is validateForm not validateform
document.getElementId should be document.getElementById
name"subject" should be name="subject"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.