Form Validation

[Drezard]

Hello. Now, I need a little help with some form validation. I have this form here:

 

<form action='' method='post'>
Username: <input type='text' name='user'><br>
Password: <input type='password' name='pass'><br>
<input type='submit' name='submit'>
</form>

 

So theres my HTML form. Can someone please give me an example using this code on how to validate a form. Now, I just want it that if the user doesn't enter any thing into either input boxes it throws back an error at the top of the page then shows the form again.

 

- Cheers, Daniel

[fenway]

1) add an onsubmit method handler to the form, along the lines of onclick="return validate(this)".

2) have that function get the form object, and check each element as you see fit.

[tarun]

Well Ive Been Looking Around For You And Ive Found This:

Simple But Does The Job - And It Can Easily Be Changed To Suit Your Needs

Hope Ive Helped,

Tarun

 

 

<style>
.error {
color: red;
display:none;
}
</style>
  
<script>
function checkForm() {
user = document.getElementById("user").value;
pass = document.getElementById("pass").value;
  
if (user == "") {
hideAllErrors();
document.getElementById("userError").style.display = "inline";
document.getElementById("user").select();
document.getElementById("user").focus();
return false;
}else if (pass == "") {
hideAllErrors();
document.getElementById("passError").style.display = "inline";
document.getElementById("pass").select();
document.getElementById("pass").focus();
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("userError").style.display = "none"
document.getElementById("passError").style.display = "none"
}
</script>
  
<form onSubmit="return checkForm();" action='login.php' method='post'>
Username: <input type='text' name='user'><br>
<div class='error' id='userError'><br>Required: Please Enter Your Username<br></div><br>
Password: <input type='password' name='pass'><br>
<div class='error' id='passError'><br>Required: Please Enter Your Password<br></div><br>
<input type='submit' name='submit'>
</form>