We display a form and then disable the submit button until user enters the data as per requirement and the data validation is completed. Note that we are using all client side JavaScript validation here. Once all data are validation is passed then we will display the button ( or enable it ) for the user to submit the form.
We will track changes of all the elements of the form and apply data validation once any change or data is entered on the form. This is required as some time once the validation is done then user may change some data which does not pass our validation.
We will be using window onload function to initialize all the elements and keep the submit button disabled. We have used getElementById to identify each element within the form.
Let us first display the form. You can check this form by entering some data in name field ( minimum 3 char ) and making gender selection, then by selecting a game and finally agreeing to the terms and condition. If all these validations are passed then only the submit button will be enabled for the visitor to submit.
Inside the window.onload function ( see below for the code ) we have assigned all the form elements to variables and trigger the function validateField by using onchange event handler.
Now our main code is inside the validateField function. Inside this function the oEvent is used to know which element is used or changed. You can read more on this type of Event handler in our getElementById form element tutorial. Here is the code used inside validation function validateField function.
function formValidation(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
var t1ck=true;
var msg=" ";
if(document.getElementById("t1").value.length < 3 )
{ t1ck=false; msg = msg + "Your name should be minimun 3 char length";}
if(!document.getElementById("r1").checked && !document.getElementById("r2").checked)
{ t1ck=false;msg = msg + " Select your Gender";}
if(document.getElementById("s1").value.length < 3 )
{ t1ck=false;msg = msg + " Select one of the games ";}
if(!document.getElementById("c1").checked )
{ t1ck=false;msg = msg + " You must agree to terms & conditions ";}
//alert(msg + t1ck);
if(t1ck){document.getElementById("btnSignUp").disabled = false; }
else{document.getElementById("btnSignUp").disabled = true; }
}
You can see we have set a flag t1ck to true and then check condition of all the form elements, if the condition is failed then we are setting the flag t1ck to false. You can see we are also generating a message associated with each form elements. We linked this message to an alert message. We kept this alert message commented as this will display the status of all the messages for every change in any form element. This helps in development or learning environment but not in actual application level. So you can un-comment this line and know about the status of each validation while your are trying to learn the code. Here is the full code.
In our above DEMO page we are displaying messages for easy understanding of the user.
<html>
<head>
<script type="text/javascript" >
function formValidation(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
var t1ck=true;
var msg=" ";
if(document.getElementById("t1").value.length < 3 )
{ t1ck=false; msg = msg + "Your name should be minimun 3 char length";}
if(!document.getElementById("r1").checked && !document.getElementById("r2").checked)
{ t1ck=false;msg = msg + " Select your Gender";}
if(document.getElementById("s1").value.length < 3 )
{ t1ck=false;msg = msg + " Select one of the games ";}
if(!document.getElementById("c1").checked )
{ t1ck=false;msg = msg + " You must agree to terms & conditions ";}
//alert(msg + t1ck);
if(t1ck){document.getElementById("btnSignUp").disabled = false; }
else{document.getElementById("btnSignUp").disabled = true; }
}
function resetForm(){
document.getElementById("btnSignUp").disabled = true;
var frmMain = document.forms[0];
frmMain.reset();
}
window.onload = function () {
var btnSignUp = document.getElementById("btnSignUp");
var btnReset = document.getElementById("btnReset");
var t1 = document.getElementById("t1");
var r1 = document.getElementById("r1");
var r2 = document.getElementById("r2");
var s1=document.getElementById("s1");
var c1=document.getElementById("c1");
var t1ck=false;
document.getElementById("btnSignUp").disabled = true;
t1.onkeyup = formValidation;
r1.onclick = formValidation;
r2.onclick = formValidation;
s1.onclick = formValidation;
c1.onclick = formValidation;
btnReset.onclick = resetForm;
}
</script>
</head>
<body >
<form method=" post" action="form-success.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="t1" name="FirstName"></td>
</tr>
<tr>
<tr>
<td>Gender</td>
<td><input type="radio" id="r1" name="gender" value=Male>Male
<input type="radio" id="r2" name="gender" value=Female>Female</td>
</tr>
<tr>
<td>Games Played</td>
<td><select name="games" id="s1" >
<option value=''>Select One</option><option value=Football>FootBall</option>
<option value=Tenis>Tenis</option>
<option value=cricket>Cricket</option>
</select>
</td>
</tr>
<tr><td>Terms & Condition</td><td><input type=checkbox name=agree value=yes id=c1></td></tr>
</table>
<input type="submit" id="btnSignUp" value="Sign Up!!" /> <input type=reset id=btnReset value=Reset>
</form>
</body>
</html>
