JS form validation using functions

Hi guys,

I need some help here…

I have created a simple JS and HTML NAME form validation and checked box as shown (If anyone can help me about the check box a better and easy way to code would be great).

I would like to use the functions that I have created - can anyone tell me HOW I can use them please? I tried to use like this…


	var name = document.getElementById('name').value;
	if(name(!notEmpty &&  !isAlphabet)) {
	  error_mesg += "\
Please enter your Name";
	  error_num++;
	}

…but it does not work…anyone can give me some idea?


..
..
<script type='text/javascript'>

function formValidation(){

	var error_mesg = "Following error found\
";
	var error_num = 0;
	
	var name = document.getElementById('name').value;
	if(name==""){
	  error_mesg += "\
Please enter your Name";
	  error_num++;
	}

        var terms = !document.getElementById('terms').checked; //Can anyone tell me what is the function of "checked" here for?
	
	if (terms){
            error_mesg += "\
Please check the terms and conditions";
	     error_num++;
	}

     if(error_num>0){
	  alert(error_mesg);
	  elem.focus();
	  return false;
	}else{
	  //submit form
	  return true;
	}
}

function notEmpty(elem, error_mesg){
	if(elem.value.length == 0){
		alert(error_mesg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isAlphabet(elem, error_mesg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(error_mesg);
		elem.focus();
		return false;
	}
}

..
..
[HTML FORM]
..
<form name="form" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" onsubmit="return formValidation()">

<tr  align="left" valign="top>
    <td width="20%">NAME:<font color="#CE0000" >*</font></td>
	
	<td width="80%"><input name="name" type="text" id="name" size="30" /></td>
	
	
  </tr>

<tr><td><input type=checkbox name=terms value='yes'>I agree to terms and conditions </td></tr>

..
..
<input type="hidden" name="action" value="register"/>
<input name="submit" type="submit" value="Proceed" />

if(name==“”){

Since “name” has other meanings, I would not use it as the identifier for the form field! Just to be safe. I’d use anything different, like say “firstName” or something.

Second, you want to know if the input field is empty, right? You need to check its value then:

<input type=“text” name=“firstName” id=“firstName” size=“30”>

if(firstName.value == ‘’)

Though this reference to firstName would only work if first you defined it: tell Javascript what “firstName” is. One way you do this is using document.forms.

Thanks Stomme poes for the reply.

Few questions:

  1. You said that I cannot use the same input name and ID as in JS? Is that mean the input name in <input name = “name”…/> and in JS script as ID ‘name’ in should be differentiate? If so, why the script still run?

  2. I would like to validate the name should not be empty.

  3. Name should be only enter in alphabet. Using the functions that I have created here:


function notEmpty(elem, error_mesg){
	if(elem.value.length == 0){
		alert(error_mesg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isAlphabet(elem, error_mesg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(error_mesg);
		elem.focus();
		return false;
	}
}

The script in JS as:


var name = document.getElementById('name').value;
	if(name==""){
	  error_mesg += "\
Please enter your Name";
	  error_num++;
	}

Does work but I wonder if I can make it something like this…(This is a wrong syntax though so the script below isn’t running:


var name = document.getElementById('name').value;
	if(name(!notEmpty &&  !isAlphabet)) {
	  error_mesg += "\
Please enter your Name";
	  error_num++;
	}

I’m sorry, I think I’ve entirely misread your first post!

  1. You said that I cannot use the same input name and ID as in JS? Is that mean the input name in <input name = “name”…/> and in JS script as ID ‘name’ in should be differentiate? If so, why the script still run?

I’m just saying I don’t think it’s a great idea. It’s perfectly valid though. I try to avoid words where there are multiple meanings: here name is also the attribute of all your inputs.


var name = document.getElementById('name').value

Sorry I had indeed missed this! This is ok.

Does work but I wonder if I can make it something like this…(This is a wrong syntax though so the script below isn’t running:

var name = document.getElementById('name').value;
	if(name(!notEmpty &&  !isAlphabet)) {
	  error_mesg += "\
Please enter your Name";
	  error_num++;
	}

Oh oh now I see what you’re doing.

Is name the only one you’re going to check?

I wonder if something more like this (not tested):


//if I were to grab all the text inputs
        var textInputs = [];
        var form = document.forms.idOfYourForm); 
        var allInputs = form.elements;
        for (var i=0, l=allInputs.length; i<l; i++) {
            if (allInputs[i].type=='text') {
                textInputs.push(allInputs[i]);
            }
        }

    var alphaExp = /^[a-zA-Z]+$/;
    for (var i=0, l=inputs.length; i<l; i++) {
        if ((inputs[i].value !=='')) && (alphaExp.test(inputs[i].value)) {
            //all the stuff you had in the functions upon success
        }
        else {
            //all the stuff you had in the functions upon failure
        }
    }

I dunno my code for grabbing just the text ones might be clunky… Maybe just an if statement in the for loop before the other if checking emptiness.

Maybe


    var form = document.forms.idOfYourForm), 
         alphaExp = /^[a-zA-Z]+$/;
    var inputs = form.elements;
    for (var i=0, l=inputs.length; i<l; i++) {
        if (inputs[i].type=='text') { 
            if ((inputs[i].value !=='')) && (alphaExp.test(inputs[i].value)) {
                //all the stuff you had in the functions upon success
            }
            else {
                //all the stuff you had in the functions upon failure
            }
        }//could then "if" some other types of inputs
    }

With && if the left side is false, the right side won’t be checked at all I believe, but you want both to be true before success, right?

You asked


var terms = !document.getElementById('terms').checked; //Can anyone tell me what is the function of "checked" here for?
	
	if (terms){
            error_mesg += "\
Please check the terms and conditions";
	     error_num++;
	}

I’d do something like


var terms = document.getElementById('terms');

if (terms.checked==false){
    //errors
}