Javascript form validation

ranura · May 24, 2012

I have this html page

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

<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.

rythemton · May 24, 2012

The problem is that you are returning a value before the next check. As soon as you return a value, the function ends. Try setting a default value, and changing it. Then you return it at the end, only once:

function sampleFunction() {
    checkValue = true;
    if(form.aut_make.value==""){
        document.getElementById("id_aut_make").innerHTML = "You must enter the make";
        checkValue = false; // Here we are changing the check value because there are errors, but not 'return'ing anything yet.
    }else{
        document.getElementById("id_aut_make").innerHTML = "";
    }
    // Add the rest of the checks here. Setting the check value more than once won't hurt anything.
    
    return checkValue;
}

Sign In

Javascript form validation

Recommended Posts

ranura

Link to comment

Share on other sites

rythemton

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information