SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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..

    Code:
    	var name = document.getElementById('name').value;
    	if(name(!notEmpty &&  !isAlphabet)) {
    	  error_mesg += "\nPlease enter your Name";
    	  error_num++;
    	}
    ..but it does not work...anyone can give me some idea?

    Code:
    ..
    ..
    <script type='text/javascript'>
    
    function formValidation(){
    
    	var error_mesg = "Following error found\n";
    	var error_num = 0;
    	
    	var name = document.getElementById('name').value;
    	if(name==""){
    	  error_mesg += "\nPlease 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 += "\nPlease 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" />

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

    Code:
    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:
    Code:
    var name = document.getElementById('name').value;
    	if(name==""){
    	  error_mesg += "\nPlease 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:

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

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    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:
    Code:
    var name = document.getElementById('name').value;
    	if(name(!notEmpty &&  !isAlphabet)) {
    	  error_mesg += "\nPlease 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):

    Code:
    //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
    Code:
        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
    Code:
    var terms = !document.getElementById('terms').checked; //Can anyone tell me what is the function of "checked" here for?
    	
    	if (terms){
                error_mesg += "\nPlease check the terms and conditions";
    	     error_num++;
    	}
    I'd do something like
    Code:
    var terms = document.getElementById('terms');
    
    if (terms.checked==false){
        //errors
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •