Page 1 of 1

Javascript form validation

Posted: Wed May 23, 2012 9:33 pm
by ranura
I have this html page

----------------------------

Code: Select all

<html>
<head>
<script type="text/javascript">
function validation(form){
		if(form.aut_make.value==""){
			document.getElementById("id_aut_make").innerHTML = "You must enter the make";
            return false;
		}else{
			document.getElementById("id_aut_make").innerHTML = "";
        }
		if(form.aut_type.value==""){
			document.getElementById("id_aut_type").innerHTML = "You must enter the type";
			return false;
		}else{
			document.getElementById("id_aut_type").innerHTML = "";
		}
		if(form.aut_model.value==""){
			document.getElementById("id_aut_model").innerHTML = "You must enter the model";
			return false;
		}else{
			document.getElementById("id_aut_model").innerHTML = "";
		}
}
</script>
</head>

<body>
				<form action="2.html" method="post" onSubmit="return validation(this)">
					<table>
						<tr>
							<td width="75px">Make</td>
							<td>
								<input type="text" name="aut_make" style="width: 172px;">
							</td>
							<td>
								<div style="color:#FF0000; " id="id_aut_make"> </div>
							</td>
						</tr>
						<tr>
							<td width="75px">Type</td>
							<td>
								<input type="text" name="aut_type" style="width: 172px;">
							</td>
							<td>
								<div style="color:#FF0000; " id="id_aut_type"> </div>
							</td>
						</tr>
						<tr>
							<td width="75px">Model</td>
							<td>
								<input type="text" name="aut_model" style="width: 172px;">
							</td>
							<td>
								<div style="color:#FF0000; " id="id_aut_model"> </div>
							</td>
						</tr>
						<tr>
							<td width="75px"></td>
							<td>
								<input type="submit" name="aut_submit" value="Submit">
							</td>
							<td></td>
						</tr>
					</table>
				</form>
</body>
</html>
----------------------------

This form validates whether user filled all 3 fields or not. If the user didin't fill the form (3 fields) and submits, it displays one validation message at a time. I need to display all 3 validations at the same time.

How can I do this?
Thank you.

Re: Javascript form validation

Posted: Wed May 23, 2012 11:12 pm
by Christopher

Code: Select all

function validation(form){
	var result = true;
	if(form.aut_make.value==""){
		document.getElementById("id_aut_make").innerHTML = "You must enter the make";
        result = false;
	} else {
		document.getElementById("id_aut_make").innerHTML = "";
	}
	if(form.aut_type.value==""){
		document.getElementById("id_aut_type").innerHTML = "You must enter the type";
        result = false;
	}else{
		document.getElementById("id_aut_type").innerHTML = "";
	}
	if(form.aut_model.value==""){
		document.getElementById("id_aut_model").innerHTML = "You must enter the model";
        result = false;
	}else{
		document.getElementById("id_aut_model").innerHTML = "";
	}
	return result;
}