SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2002
    Posts
    225
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form validation? & this.focus() & regular expressions?

    Newbie here to JS so please be kind!

    2 things.

    1. I'm trying to write a function that will validate form input so below is what I have so far. Is there a better way to do this? Also, in the code below when a user doesn't input the correct information I want to set the cursor's focus back on the incorrect field but for some reason it is not doing this.

    2. I'm also trying to validate and email address with a simple regular expression. The function I'm using is below but I get the following error in my JS console:
    Error: invalid quantifier *@\w+([\.-]?\w+)*(\.\w{2,3})+$
    Source File: http://localhost/project/js/registra..._validation.js
    Line: 127, Column: 10
    Source Code:
    var re = /^\w+([\.-]?\w+*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    Code:
     window.onload = setup_validation;
     var theForm;
     var submitBtn;
     var errorMsg;
     
     function setup_validation() {
     	if (document.getElementById) {
     		errorMsg = document.getElementById("error");
     		theForm = document.getElementById("theForm");
     		for (var i=0; i<theForm.length; i++) {
     			//alert(theForm.elements[i].id);
     			theForm.elements[i].onchange = validate_field;
     			if (theForm.elements[i].id == "submit") {
     				//alert(theForm.elements[i].id);
     				submitBtn = theForm.elements[i];
     				submitBtn.disabled = true;	
     			}
     		}
     	}
     	return false;
     }
     
     function validate_field() {
     	// some how display error messages maybe in a new "error" div?
     	//submitBtn.disabled = false;
     	
     	switch (this.id) {
     		case "username":
     			//alert(this.id);
     			//alert(this.value);
     			if (!check_length(this.value, 6)) {
     				this.style.backgroundColor = "#ff9";
     				this.focus();
     				//alert(this.id.focus() + " = focus | " + this.id + " | " + this.value);
     				errorMsg.innerHTML = "Username has to be 6 characters or more!";
     				return false;
     			} else {
     				this.style.backgroundColor = "#fff";
     				errorMsg.innerHTML = "";
     			}
     			// check to see if the form fields are 
     			break;
     		case "email":
     			alert(this.id);
     			alert(this.value);
     			if (!check_length(this.value, 0)) {
     				this.style.backgroundColor = "#ff9";
     				this.focus();
     				errorMsg.innerHTML = "Email can not be empty!";
     				return false;
     			} else {
     				this.style.backgroundColor = "#fff";
     				errorMsg.innerHTML = "";
     			}
     			
     			if (!validate_email(this.value)) {
     				this.style.backgroundColor = "#ff9";
     				this.focus();
     				errorMsg.innerHTML = "Please enter a valid email (e.g. test@test.com)";
     				return false;
     			} else {
     				this.style.backgroundColor = "#fff";
     				errorMsg.innerHTML = "";
     			}
     			break;
     		case "passwd1":
     			//alert(this.id);
     			//alert(this.value);
     			if (!check_length(this.value, 6)) {
     				this.style.backgroundColor = "#ff9";
     				this.focus();
     				errorMsg.innerHTML = "Your password has to be more than 6 characters!";
     				return false;
     			} else {
     				this.style.backgroundColor = "#fff";
     				errorMsg.innerHTML = "";
     			}
     			break;
     		case "passwd2":
     			//alert(this.id);
     			//alert(this.value);
     			if (!check_length(this.value, 6)) {
     				this.style.backgroundColor = "#ff9";
     				this.focus();
     				errorMsg.innerHTML = "Your password has to be more than 6 characters!";
     				return false;
     			} else {
     				this.style.backgroundColor = "#fff";
     				errorMsg.innerHTML = "";
     			}			
     			break;
     		default:
     			//alert("default");
     			break;
     	}
     
     	// if script has gotten here it has pasted all the test?
     	// check to see if we need to enable the submit button
     	// submit should be enabled when all required form fields are filled
     	// out and error free!  Is this the correct place to check? hm.
     	for (var i=0; i<theForm.length; i++) {
     		//alert(theForm.elements[i].value + " = elem value - " + theForm.elements[i].id + " = elem id");
     		if (theForm.elements[i].value.length <= 0) {
     			submitBtn.disabled = true;
     			break;
     		} else {
     			submitBtn.disabled = false;	
     		}
     	}	
     }
     
     function check_length(field, length) {
     	if (field.length < length) {
     		return false;
     	}
     	return true;
     }
     
     function validate_email(email) {
     	var re = /^\w+([\.-]?\w+*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
     	alert(re + " | " + re.test(email) + " | " + email);
     	return re.test(email);
     }
     
     function validate_passwords(passwd1, passwd2) {
     		if (passwd1 != passwd2) {
     			return false;
     		}
     		return true;	
     }

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Regular Expression error is because there was a bracket missing it should be
    ^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+


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
  •