|
Form Validation Help
Hi, I'm new to programming and I'm having trouble grasping certain concepts. I've done some client-side validation (for now... I plan on doing server-side validation before I go live with the form) to make sure there is input in the fields and selections before the form is processed. However, I'd like to make sure that not only are those fields passing data into the form, but also that they are passing the right kind of data (string data, numeric data) and a specified minimum and maximum amount of characters in each field. How would I go about expanding the validation in my code? I understand what my current code is doing but I don't know how to make it do a deeper validation. Would I need to create new functions or could I just add code to my current functions?
Below is an example similar to my current form and validation code.
<html>
<head>
<title>Validation Test</title>
<script language="JavaScript">
function isFilled(elm) {
if (elm.value == "" || elm.value == null) {
return false;
}
else {
return true;
}
}
function isSelected(elm) {
if (elm.value == "") {
return false;
}
else {
return true;
}
}
function submitForm() {
if (isFilled(myForm.first) == false) {
alert("Please enter something in first field.");
myForm.first.focus();
return false;
}
if (isFilled(myForm.second) == false) {
alert("Please enter something in second field.");
myForm.second.focus();
return false;
}
if (isSelected(myForm.selection1) == false) {
alert("Please choose a selection in selection 1");
myForm.selection1.focus();
return false;
}
if (isSelected(myForm.selection2) == false) {
alert("Please choose a selection in selection 2.");
myForm.selection2.focus();
return false;
}
}
</script>
</head>
<body>
<form name="myForm" method="post" action="myForm2.php" onsubmit="return submitForm(this)"
id="myForm">
<label for="first">First: </label>
<input type="text" name="first" id="first" />
<label for="second">Second: </label>
<input type="text" name="second" id="second" />
<label for="selection1">Selection 1: </label>
<select name="selection1" id="selection1">
<option value="">-Choose One-</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="selection2">Selection 2: </label>
<select name="selection2" id="selection2">
<option value="">-Choose One-</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="reset" />
</form>
</body>
</html>
I appreciate any help and/or advice. Thanks!
|