SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question form validation question

    i'm trying to loop through the form elements and break the loop if a field is found empty but can't seem to quite get it to work. following is my function that i call with onSubmit="return validateForm(this);" in the form action. where should the break; be?

    Code:
    function validateForm(f){
    	// make sure none are empty
    	for (var i = 0; i<9; i++){
    		if (f.elements[i].value == ""){
    			self.alert("Please fill in the form completely!");
    			f.elements[i].focus();
    			// if the browser is Netscape 6 or IE
    			if(document.all || document.getElementByID){
    				// change the color of text field
    				f.elements[i].value.style.background = "yellow";
    			}
    			
    			return false;
    			break;
    		}
    	}
    }

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This works for me:

    <form name="a" onSubmit="return(validateForm(this));" action="javascript:alert('sent')">
    <input name="b" type="text">
    <input name="c" type="text">
    <input type="submit">
    </form>

    Also, are you trying to set the value's font color or box's background color?

    f.elements[i].style.backgroundColor = "yellow";

    Any rate, I tend to put the action & submit within my validation routines so that I have better control.

    function validateForm(f)
    {
    var isOk2Send = true;
    if (f.elements[i].value == "" )
    {
    isOk2Send = false;
    .....
    }
    if (isOk2Send)
    {
    f.action = 'something';
    f.submit()
    }
    else alert('Nothing was sent')
    }

    and call it either with an image or a button like this:
    <input type='button' onclick='validateForm(this.form)' value='Submit'>

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Vincent Puglia
    Hi,
    Also, are you trying to set the value's font color or box's background color?
    f.elements[i].style.backgroundColor = "yellow";
    yes, box background. it works in some other code i'm using. i'm trying to condense down the js by moving it into a loop, rather than call out an if statement for each field name.

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Bill,

    you might want to change this:
    for (var i = 0; i<9; i++){

    to this:
    for (var i = 0; i<f.length; i++){


    where 'f' is the form object you pass. That way the code becomes more reusable.

    if interested, see the 'Validating Forms' script/tutorial at my site

    Vinny
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah, did that. here's what i ended up with:

    Code:
    function validateForm(f){
    	for(var i=0; i<f.elements.length; i++) {
    		// check for blank fields
    		if (f.elements[i].value == ""){
    			alert('All fields must have an entry');
    			f.elements[i].focus();
    			// if the browser is Netscape 6+ or IE
    			if(document.all || document.getElementByID){
    				// change the color of text field
    				f.elements[i].style.background = "yellow";
    			}
    			return false;
    		}
    		// check if user id and password have at least 6 characters
    		if (f.elements[i].name == "wbUserid" || f.elements[i].name == "wbPass"){
    			if (f.elements[i].value.length < 6){
    				alert("Value must have at least 6 characters");
    				f.elements[i].value = "";
    				f.elements[i].focus();
    				// if the browser is Netscape 6+ or IE
    				if(document.all || document.getElementByID){
    					// change the color of text field
    					f.elements[i].style.background = "yellow";
    				}
    				return false;
    			}
    		}
    		// check for valid e-mail
    		if (f.elements[i].name == "Email"){
    			if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(f.Email.value))){
    				self.alert("Invalid E-mail Address! Please re-enter.");
    				f.Email.focus();
    				f.Email.select();
    				// if the browser is Netscape 6 or IE
    				if(document.all || document.getElementByID){
    					// change the color of text field
    					f.Email.style.background = "yellow";
    				}
    				return false;
    			}
    		}
    	}
    }


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
  •