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)

    My first JS program - form validation - please comment!

    So this was my first JS program so I don't know the language very well and I'd really like feedback. There has got to be a way to make the form validation more generic so that you can use the program across forms instead of form specific like I have. So please any comments/pointers/hints would be great!

    Thanks for reading!
    PHP Code:
    // JavaScript Document
        //window.onload = initForms;
        
    window.onload setup_validation;
        var 
    theForm;
        var 
    submitBtn;
        var 
    errorMsg;
        var 
    fieldArray = new Array();
        
        function 
    setup_validation() {
            if (
    document.getElementById) {
                
    //fieldArray.length = 0;
                
    errorMsg document.getElementById("error");
                
    theForm document.getElementById("theForm");
                
    theForm.onsubmit = function() { return validate_form(); }
                for (var 
    i=0i<theForm.lengthi++) {
                    
    //alert(theForm.elements[i].id);
                    
    switch (theForm.elements[i].id) {
                        case 
    "username":
                            
    theForm.elements[i].onchange validate_field;
                            
    theForm.elements[i].onblur validate_field;
                            
    theForm.elements[i].focus();
                            
    fieldArray[0] = "";
                            
    //fieldArray.length++;
                            
    break;
                        case 
    "passwd1":
                            
    theForm.elements[i].onchange validate_field;
                            
    theForm.elements[i].onblur validate_field;
                            
    fieldArray[2] = "";
                            
    //fieldArray.length++;
                            
    break;
                        case 
    "passwd2":
                            
    theForm.elements[i].onchange validate_field;
                            
    theForm.elements[i].onblur validate_field;
                            
    fieldArray[3] = "";
                            
    //fieldArray.length++;
                            
    break;
                        case 
    "email":
                            
    theForm.elements[i].onchange validate_field;
                            
    theForm.elements[i].onblur validate_field;
                            
    fieldArray[4] = "";
                            
    //fieldArray.length++;
                            
    break;
                        case 
    "submit":
                            
    submitBtn theForm.elements[i];
                            
    submitBtn.disabled true;    
                            break;
                    }
                }
            }
            return 
    false;
        }
        
        function 
    validate_field() {
            
            switch (
    this.id) {
                case 
    "username":
                    if (!
    check_length(this.value6)) {
                        
    this.style.backgroundColor "#ff9";
                        
    this.focus();
                        
    errorMsg.innerHTML "Username has to be 6 characters or more!";
                        
    fieldArray[0] = false;
                        
    check_submit();
                        return 
    false;
                    } else {
                        
    this.style.backgroundColor "#fff";
                        
    errorMsg.innerHTML "";
                        
    fieldArray[0] = true;
                    }
                    
    check_submit();
                    break;
                case 
    "email":
                    if (!
    check_length(this.value0)) {
                        
    this.style.backgroundColor "#ff9";
                        
    this.focus();
                        
    errorMsg.innerHTML "Email can not be empty!";
                        
    fieldArray[4] = false;
                        
    check_submit();
                        return 
    false;
                    } else {
                        
    this.style.backgroundColor "#fff";
                        
    errorMsg.innerHTML "";
                        
    fieldArray[4] = true;
                    }
                    
                    if (!
    validate_email(this.value)) {
                        
    this.style.backgroundColor "#ff9";
                        
    this.focus();
                        
    errorMsg.innerHTML "Please enter a valid email (e.g. test@test.com)";
                        
    fieldArray[4] = false;
                        
    check_submit();
                        return 
    false;
                    } else {
                        
    this.style.backgroundColor "#fff";
                        
    errorMsg.innerHTML "";
                        
    fieldArray[4] = true;
                    }
                    
    check_submit();
                    break;
                case 
    "passwd1":
                    if (!
    check_length(this.value6)) {
                        
    this.style.backgroundColor "#ff9";
                        
    this.focus();
                        
    errorMsg.innerHTML "Your password has to be more than 6 characters!";
                        
    fieldArray[2] = false;
                        
    check_submit();
                        return 
    false;
                    } else {
                        
    this.style.backgroundColor "#fff";
                        
    errorMsg.innerHTML "";
                        
    fieldArray[2] = true;
                    }
                    
    check_submit();
                    break;
                case 
    "passwd2":
                    if (!
    check_length(this.value6)) {
                        
    this.style.backgroundColor "#ff9";
                        
    this.focus();
                        
    errorMsg.innerHTML "Your password has to be more than 6 characters!";
                        
    fieldArray[3] = false;
                        
    check_submit();
                        return 
    false;
                    } else {
                        
    this.style.backgroundColor "#fff";
                        
    errorMsg.innerHTML "";
                        
    fieldArray[3] = true;
                    }
                    
    check_submit();
                    break;
                default:
        
                    break;
            }
            return 
    false;
        }
        
        function 
    validate_form() {
            if (
    validate_passwords(theForm.passwd1.valuetheForm.passwd2.value)) {
                return 
    true;
            }
            
    errorMsg.innerHTML "Your passwords do not match!";
            return 
    false;
        }
        
        function 
    check_submit() {
            for (var 
    i=0i<fieldArray.lengthi++) {
                if (
    fieldArray[i] == false) {
                    
    submitBtn.disabled true;
                    return 
    false;
                } 
            }
            
    submitBtn.disabled false;
            return 
    true;
        }
        
        function 
    check_length(fieldlength) {
            if (
    field.length length) {
                return 
    false;
            }
            return 
    true;
        }
        
        function 
    validate_email(email) {
            var 
    re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            return 
    re.test(email);
        }
        
        function 
    validate_passwords(passwd1passwd2) {
                if (
    passwd1 != passwd2) {
                    return 
    false;
                }
                return 
    true;    
        } 


    XHTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Register
        	<script src="js/registration_form_validation.js" type="text/javascript">
        	<script src="js/global.js" type="text/javascript">
        	<link rel="stylesheet" media="screen" type="text/css" href="css/error.css" />
            <link rel="stylesheet" media="screen" type="text/css" href="css/popup.css" />
        </head>
        <body>	
        	<h1>Register
        </div>
        <div id="content">	
        	<div id="error">
        		<form action="process.php" method="post" id="theForm" title="register">
        			<fieldset id="RSS_Fields">
        				<legend>All fields are required
        				<p>Username 
        				<input name="reg_username" type="text" accesskey="u" tabindex="1" title="Username" id="username" size="15" maxlength="75" value="" class="reqd" />
      
      
        				<p>Password 
        				<input name="reg_password1" type="password" accesskey="p" tabindex="2" title="Password" id="passwd1" size="15" maxlength="75" class="reqd" />
      
      
        				<p>Password Again 
        				<input name="reg_password2" type="password" tabindex="3" title="Password Again" id="passwd2" size="15" maxlength="75" class="reqd passwd1" />
      
      
        				<p>Email 
        				<input name="reg_email" type="text" accesskey="e" tabindex="4" title="Email" id="email" size="15" maxlength="75" value="" class="reqd" />
      
      
        				<p>Submit 
        				<input name="submit" type="submit" tabindex="5" title="Submit" id="submit" value="Submit" />
      
      	
        				<input type="hidden" name="action" value="register" />											
        			</fieldset>
        		</form>	
        </div> 
        </html>


  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's good for a beginner. In time you'll learn how to write scripts that are more efficient.

    1) I'd use more helper functions. You've got a lot of duplicate functionality in there. I might use closures and pass in the index number and error message string to it instead of have two switches.

    http://blog.morrisjohns.com/javascri...es_for_dummies
    http://www.jibbering.com/faq/faq_notes/closures.html

    2) I don't see the point of using check_length().
    Code:
    if(this.value.length < 6) {
    is simpler and shorter than making this call to a fucntion
    Code:
    if (!check_length(this.value, 6)) {
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •