Using javascript for form validation in a PHP file
Question
This is my first time trying javascript and having trouble getting it to work. I have a php file with a text box and a submit button. Upon clicking the submit button, I want javascript to preform a validation to make sure the text box is not empty. Please see my code below. Upon running, nothing happens when I click the submit button.
<html><head><script type="text/javascript">
function formValidator() {
var client_name = document.getElementByID('client_name');
if(notEmpty(client_name, "Client Name Blank")){
return True;
}
return False;
}
function notEmpty(elem, helperMSG) {
if(elem.length == 0) {
alert(helperMSG);
elem.focus();
return False;
}
return True;
}
</script></head>
<?php
echo '<body><form onsumbit="return formValidator()" method="post">
<table border="1" cellspacing="0" cellpadding="0"><tr><td colspan="2">
<h1>Add Account</h1></td></tr>
<tr>
<td>Client Name: <font size="1">(required)</font></td>
<td><input type="text" id="client_name" name="client_name" size="35"/></td></tr>
</table>
<input type="submit" name="submit_account" value="Add Account"/>
</form></body></html>';
?>
3 answers
solution1
1 2013-05-21 16:44:49
- JavaScript is case sensitive.
TrueandFalseare not defined (you meantrueandfalse) so, on encountering them, the JavaScript engine will throw an exception and normal form submission will resume. - You are testing the
lengthproperty of anHTMLInputElementwhich (unless you define it otherwise) will always beundefined. You want to test the length of the value .elem.value.length.
solution2
0 2013-05-21 16:45:13
Few issues:
1) True and False, are not recognized as JavaScript is case sensitive. Try using true and false.
2) You also need to use the elem.value.length (or just the elem.value)
so change
elem.length
to elem.value.length.
3) No need for two check of true / false, one is enough.
html><head><script type="text/javascript">
function formValidator() {
var client_name = document.getElementByID('client_name');
return notEmpty(client_name, "Client Name Blank"); // no need for true false
}
function notEmpty(elem, helperMSG) {
if(elem.value.length == 0) { ///changed to use value.
alert(helperMSG);
elem.focus();
return false; //change to lowercase false
}
return true; //change to lowercase true.
}
</script></head>
solution3
0 2013-05-21 16:45:54
Use this:-
<script type="text/javascript">
function formValidator() {
var client_name = document.getElementByID('client_name');
if(notEmpty(client_name, "Client Name Blank")){
return true; // Changed True to true
}
return false; // Changed False to false
}
function notEmpty(elem, helperMSG) {
if(elem.value.length == 0) // checking length of an element's value
{
alert(helperMSG);
elem.focus();
return false; // Changed False to false
}
return true; // Changed True to true
}
</script>
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.