Jump to content

Javascript form validation


ranura

Recommended Posts

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.

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.