Validate input form with Javascript
Is there something I'm doing wrong that stops the form validating? I can't seem to get it to validate when the checkbox is not clicked.
Your help will be appreciated.
<html>
<head>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( document.application-form.terms.checked == false ){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" name=开发者_StackOverflow社区"terms" value="terms" /><b> I have read the <a href="terms.php">Terms</a> *</b>. </p>
<input type="submit" value="Submit Application" onsubmit="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>
Input button doesn't have onsubmit event, use onclick instead. There were also other problems such as bad selection etc. , which are solved. See below
See a working demo here http://jsfiddle.net/ZHfX7/
<html>
<head>
</head>
<body>
<form id="application-form" name="application-form" method="post" action=""><br />
<p><input type="checkbox" id="terms" name="terms" value="terms" /><b> I have read the <a href="terms.php">Terms</a> *</b>. </p>
<input type="submit" value="Submit Application" onclick="return validateTerms()">
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
<script type="text/javascript">
function validateTerms(){
valid = true;
if ( !document.getElementById('terms').checked){
alert ( "Please accept the terms" );
valid = false;
}
return valid;
}
</script>
</html>
The onsubmit should be part of the <form> tag, not <input>.
<form id="application-form" name="application-form" method="post" action="" onsubmit="return validateTerms();">
You cannot use application-form inline in your document.application-form.terms. as its not a legal js identifier due to the hyphen.
Either give the checkbox an ID;
<input type="checkbox" name="terms" value="terms" id="terms" />
then reference it with
if (document.getElementById("terms").checked = ....
or use [] notation;
document.forms['application-form'].terms ...
application-form is not a valid name
onsubmit is not valid on input, moved to form
try -
<html>
<head>
<script type="text/javascript">
function validateTerms(){
if (document.application.terms.checked){
alert ( "Please accept the terms" );
return false;
}
return true;
}
</script>
</head>
<body>
<form id="application" name="application" method="post" action="" onsubmit="return validateTerms()"><br />
<p><input type="checkbox" name="terms" value="terms" /><b> I have read the <a href="terms.php">Terms</a> *</b>. </p>
<input type="submit" value="Submit Application" >
<input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
</form>
</body>
</html>
加载中,请稍侯......
精彩评论