SitePoint Sponsor

User Tag List

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

    validation in forms

    I am having a problem with the script validating the first three forms. The javascript just checks the first one and then does something funky. I need it to check the first three forms and then submit if they have filled out. Can someone maybe tell me what I should put in where to fix this problem?

    <html>
    <body>
    <script type="text/javascript">
    function check() {
    var required = Array('name', 'E-mail', 'description of change');
    for (var i=0;i<required.length;i++) {
    var box = "document.changes." + required[i];
    if (eval(box).value == "") {
    alert('Please fill in your ' + eval(box).name);
    eval(box).focus();
    return false;
    }
    }
    return true;
    }
    </script>

    * denotes a required field
    <br>
    <br>
    <form name="changes" action="#">
    <table class="form">
    <tr>
    <td>* Name/td>
    <td><input name="name" /></td>
    </tr>
    <tr>
    <td>* E-mail/td>
    <td><input name="E-mail" /></td>
    </tr>
    <tr>
    <td>* Description of change/td>
    <td><textarea rows="2" cols="20" name="description of change"></textarea></td>
    </tr>
    <tr>
    <td>Teaching/td>
    <td><input name="teaching" /></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" name="button" value="Submit" onclick="check();"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't have hyphens in your property names. Replace 'E-mail' with 'Email' or 'E_mail'.

    You can't have spaces in property names either. Replace 'description of change' with 'descriptionOfChange' or 'description_of_change'.

    Don't forget to change the ids on the form elements as well.

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed what you said and it worked. But I was wondering if the information I typed in is suppose to stay there or if the page was automatically refreshing or if it was submitting.

    thanks

    <html>
    <body>
    <script type="text/javascript">
    function check() {
    var required = Array('name', 'Email', 'description_of_change');
    for (var i=0;i<required.length;i++) {
    var box = "document.changes." + required[i];
    if (eval(box).value == "") {
    alert('Please fill in your ' + eval(box).name);
    eval(box).focus();
    return false;
    }
    }
    return true;
    }
    </script>

    * denotes a required field
    <br>
    <br>
    <form name="changes" action="#">
    <table class="form">
    <tr>
    <td>* Name/td>
    <td><input name="name" /></td>
    </tr>
    <tr>
    <td>* E-mail/td>
    <td><input name="Email" /></td>
    </tr>
    <tr>
    <td>* Description of change/td>
    <td><textarea rows="2" cols="20" name="description_of_change"></textarea></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" name="button" value="Submit" onclick="check();"></td>
    </tr>
    </table>
    </form>
    </body>

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Here are a few changes:
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function check() {
    	var required = Array({id:'name', text:'Name'}, {id:'Email', text:'E-mail'}, {id:'descriptionOfChange', text:'Description of change'});
    	for (var i=0;i<required.length;i++) {
    		var box = document.changes[required[i].id];
    		if (box.value == "") {
    			alert('Please fill in your ' + required[i].text);
    			box.focus();
    			return false;
    		}
    	}
    	return true;
    }
    </script>
    
    </head>
    
    <body>
    
    * denotes a required field
    <br>
    <br>
    <form name="changes" action="#" onsubmit="return check();">
    <table class="form">
    <tr>
    <td>* Name</td>
    <td><input name="name" /></td>
    </tr>
    <tr>
    <td>* E-mail</td>
    <td><input name="Email" /></td>
    </tr>
    <tr>
    <td>* Description of change</td>
    <td><textarea rows="2" cols="20" name="descriptionOfChange"></textarea></td>
    </tr>
    <tr>
    <td>Teaching</td>
    <td><input name="teaching" /></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" name="button" value="Submit"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    The script has been moved into the <head> section.
    The event handler has been moved to the 'onsubmit' event of the form:
    Code:
    onsubmit="return check();"
    Now, if check returns false then so does onsubmit.

    I've got rid of the eval() function and used square bracket notation to access properties of each box.

    I've added 'text' and 'id' properties for each required name, so that the alerts can use text that matches your labels.

  5. #5
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you soooo much!!!!


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
  •