Form Validation with JavaScript

I created a simple form including nine or ten fields in HTML, and i want to validate it in JavaScript. How can i do it?

Thanks!!

View Answers

October 18, 2010 at 1:00 PM

Hi Friend,

Try the following code:

1)register.html:

<html>
<script src="validateForm.js">
</script>
<form name="form" method="post" onsubmit="return validate();">
<table>
<tr><td>Enter Name</td><td><input type="text" name="name"></td></tr>
<tr><td>Enter Address</td><td><textarea rows="4" cols="8" name="address"></textarea></td></tr>
<tr><td>Gender</td><td><input type="radio" name="radio">M<input type="radio" name="radio">F</td></tr>
<tr><td>Qualification</td><td><select name="qua"><option value="BTech">BTech</option><option value="BTech">MBA</option><option value="BTech">MCA</option><option value="BTech">MTech</option></select></td></tr>
<tr><td>Specialization</td><td><select id="specialization" name="specialization" multiple="multiple" ><option value="Software">Software</option><option value="Hardware">Hardware</option><option value="Electrical">Electrical</option><option value="Mechanical">Mechanical</option><option value="Finance">Finance</option><option value="Finance">Marketing</option></select></td></tr>
<tr><td>Languages</td><td><input type="checkbox" name="lang1" value="Hindi">Hindi<input type="checkbox" name="lang2" value="English">English<input type="checkbox" name="lang3" value="French">French<input type="checkbox" name="lang4" value="German">German</td></tr>
<tr><td><input type="submit" value="Submit" ></td><td><input type="reset"></td></tr>
</table>
</form>
</html>

October 18, 2010 at 1:01 PM

continue..

2)validationForm.js:

function checkName(text) {
if(isNaN(text)){ return 1;}
else{alert("Please enter a valid name. The only charachters accepted are A - Z and a - z");return 0;}
}
function checkAddress(text) {
if(isNaN(text)){ return 1;}
else{alert("Please enter a valid address. The only charachters accepted are A - Z and a - z");return 0;}
}
function validate(){
    if (document.form.name.value == ""){
        alert ( "Please enter name." );
        document.form.name.focus();
        return false;
    }
    if (checkName(document.form.name.value)==false){
      name.value=""
      name.focus()
      return false
      }
  if (document.form.address.value == ""){
        alert ( "Please enter address." );
        document.form.address.focus();
        return false;
    }
    if (checkAddress(document.form.address.value)==false){
      address.value=""
      address.focus()
      return false
      }
    if ( ( document.form.radio[0].checked == false ) && ( document.form.radio[1].checked == false ) ){
        alert ( "Please choose Gender: M or F" );
        document.form.radio[0].focus();
        return false;
    }
    if ( document.form.qua.selectedIndex == 0 ){
        alert ( "Please select Qualification." );
        document.form.qua.focus();
        return false;
    }
    if(!multiselect&#95;validate(document.getElementById('specialization'))){
    alert ( "Please select Specialization." );
     return false;  
    }
    if ((document.form.lang1.checked == false) &&(document.form.lang2.checked == false) &&(document.form.lang3.checked == false)&&(document.form.lang4.checked == false))
        {
        alert ('You didn\'t choose any of the checkboxes!');
        return false;
        }
        var n=document.form.name.value;
        var add=document.form.address.value;
        document.writeln("Name= "+n);
        document.writeln("");
        document.writeln("Address= "+add);
     var oRadio = document.forms[0].elements[radio].value;
document.write(oRadio);
    return true;
}
    function multiselect&#95;validate(select) {  
        var valid = false;  
        for(var i = 0; i < select.length; i++) {  
            if(select.options[i].selected) {  
                valid = true;  
                break;  
            }  
        }  
     return valid;  
   }  
Thanks

October 18, 2010 at 1:59 PM

Hi,

Did you tested the above code?

Thanks