Validation --- Please help

**Humper** · 08-20-2006, 09:25 PM

I have a form that I want to validate some of the user input..

here is the javascript --in header

Code:

function validateForm() { 
  if(  document.getElementById('FirstName').value == "" ||
	   document.getElementById('LastName').value == "" ||
	   document.getElementById('Site').value == "" ||
	   document.getElementById('Building').value == "" ||
	   document.getElementById('StudentRoom').value == "" ||
	   document.getElementById('Phone').value == "" ||
	   document.getElementById('email').value == "" ||
	   document.getElementById('ipaddress').value == "" ||
	   document.getElementById('mac').value == "" ||)
	{
			alert("Please fill in all fields.");
	}
	else if(document.getElementById('email').value.indexOf("@") == -1 || document.getElementById('email').value.indexOf(".") == -1)
	{
    		alert("Your E-mail address is not in the correct format.");
  	}
	else if(document.getElementById('email').value.indexOf(" ") > 0)
	{
    		alert("Your E-mail address cannot contain spaces.");
  	}
	else if(document.getElementByID('Phone').value.search(/\d{3}\-\d{3}\-\d{4}/)==-1)
    {
      		alert("The phone number you entered is not valid.\r\nPlease enter a phone number with the format xxx-xxx-xxxx.");
	}
	else
	{
		document.form2.submit();
	}
}

this is the form in the php file...

Code:

<form action="procunivtblV2.php" method="post" name="form2">
              <table width="600" border="0" align="center" cellpadding="5" cellspacing="0">
                <tr class="FAQheader">
                  <td width="42%" valign="top" class="textsmallLeft">&nbsp;</td>
                  <td colspan="2" valign="top" class="textsmallLeft">&nbsp;</td>
                </tr>
                <tr class="FAQheader">
                  <td valign="top" class="textsmallLeft">Resident First Name<br>
                                              <input name="FirstName" type="text" id="FirstName" size="20" maxlength="20"></td>
                  <td colspan="2" valign="top" class="textsmallLeft">Resident
                    Last Name<br>
                                              <input name="LastName" type="text" id="LastName" size="20" maxlength="20"></td>
                </tr>
                <tr class="FAQheader">
                  <td valign="top" class="textsmallLeft">Property<br>
                      <select name="Site" size="1" id="Site">
                        <option selected="selected"><? print $SiteName; ?>
                    </select></td>
                  <td width="24%" valign="top" class="textsmallLeft">Building
                    Number<br>
                                              <input name="Building" type="text" id="Building" size="6" maxlength="6"></td>
                  <td width="34%" valign="top" class="textsmallLeft">Room Number<br>
                                              <input name="StudentRoom" type="text" id="StudentRoom" size="5" maxlength="5"></td>
                </tr>
                <tr class="FAQheader">
                  <td valign="top" class="textsmallLeft">Phone Number<br>
                      <input name="Phone" type="text" id="Phone" size="12" maxlength="12">
                      <br>
              (enter format similar to 333-333-3333) </td>
                  <td colspan="2" valign="top" class="textsmallLeft">Email Address<br>
                                              <input name="email" type="text" id="email" value="tickets@airwave-networks.com" size="30" maxlength="50"></td>
                </tr>
				<tr class="FAQheader">
                  <td valign="top" class="textsmallLeft">IP Address: <br>
                    <input name="ipaddress" type="text" id="ipaddress" size="20"><br>
					<a href="New_Links/Setup_OS.html" target="_blank">How do I find this?</a></td>
                  <td colspan="2" valign="top" class="textsmallLeft">MAC:<br>
                    <input name="mac" type="text" id="mac" size="20" maxlength="20">
                    <br>
						<a href="New_Links/Setup_OS.html" target="_blank">How do I find this?</a><br/>
						Use computers NIC MAC unless this is a request to add a game console. If this is for game console, use game consoles MAC. <a href="New_Links/How_To.htm" target="_blank">Click here to find game console MAC.</a> </td>
                </tr>
                <tr class="FAQheader">
                  <td colspan="3" valign="top" class="textsmallLeft">Problem
                    Description (Please be as specific as possible)<br>
                                              <textarea name="Problem" cols="40" rows="5" id="Problem"></textarea></td>
                </tr>
                <tr>
                  <td><? print"<input name=\"Origin\" type=\"hidden\" value=\"$Origin\"><input name=\"Submit\" type=\"submit\" onclick=\"validateForm()\" value=\"Submit Trouble Ticket\">"; ?> </td>
                  <td colspan="2">&nbsp;</td>
                </tr>
              </table>
            </form>

I think I am doing this correctly.. but it doesnt validate anything... can someone help me out a bit.. maybe I am over looking something?

**mwinter** · 08-22-2006, 03:15 PM

Originally Posted by Humper

Code:

function validateForm() { 
  if(  document.getElementById('FirstName').value == "" ||

If you are validating a form, don't use the getElementById method to access form controls. Instead, use the elements collection of the form object. For example,

Code:

function validate(form) {
    /* form.elements.FirstName.value
     * form.elements.LastName.value
     * etc.
     *
     * OR:
     *
     * var controls = form.elements;
     * controls.FirstName.value
     * controls.LastName.value
     * etc.
     */
}

HTML Code:

<form action="..." method="post" onsubmit="return validate(this);">
    <!-- ... -->
    <input type="submit" value="Submit trouble ticket">
    <!-- ... -->
</form>

If validation fails, return false from the validate function, otherwise return true. Don't use the submit method. Also, note that it's not usually necessary to identify a form (using a name or id attribute) using this approach. It's also not necessary to add name attributes to submit buttons unless you actually plan to inspect the name/value pair that it creates (such as you might if there's more than one submit button, each of which does different things).

You might want to check for controls that are either empty or contain only whitespace, rather than just the former.

document.getElementById('mac').value == "" ||)

This is a syntax error: there's no expression on the right-hand side of that logical OR operator.

else if(document.getElementById('email').value.indexOf("@") == -1 || document.getElementById('email').value.indexOf(".") == -1)

Regular expressions offer more power when validating against patterns. It's also a good idea to copy values or object references to variables, rather than looking up the same thing again and again.

else if(document.getElementById('email').value.indexOf(" ") > 0)

There isn't much point in trying to over-constrain e-mail addresses on the client. If you want to validate them thoroughly, do it on the server against the complete RFC 2822 grammar.

if(document.getElementByID('Phone').value.search(/\d{3}\-\d{3}\-\d{4}/)==-1)

If you want to check that a string matches a pattern, use the test method of the regular expression object. You also have another error here: the "D" in getElementByID must be lowercase.

document.form2.submit();

Because you haven't cancelled the submission where validation fails, it will happen whether the submit method is called or not. In any case, the submit method should hardly ever be used.

Consider this implementation for validation:

Code:

function validate(form) {
    var controls = form.elements,
        email, phoneNumber;

    if (isEmpty(controls.FirstName.value) || isEmpty(controls.LastName.value)
            || isEmpty(controls.Site.value) || isEmpty(controls.Building.value)
            || isEmpty(controls.StudentRoom.value) || isEmpty(phoneNumber = controls.Phone.value)
            || isEmpty(email = controls.email.value) || isEmpty(controls.ipaddress.value)
            || isEmpty(controls.mac.value)) {
        alert('Please complete all fields.');
        return false;
    }
    if (!isEmailAddress(email)) {
        alert('Please enter a valid e-mail address.');
        return false;
    }
    if (!isPhoneNumber(phoneNumber)) {
        alert('Please enter a phone number with the format xxx-xxx-xxxx.');
        return false;
    }
    return true;
}

function isEmailAddress(string) {
    return /^[^@]+@[^.]+(\.[^.]+)+$/.test(string);
}
function isEmpty(string) {
    return !/\S/.test(string);
}
function isPhoneNumber(string) {
    return /^\d{3}-\d{3}-\d{4}$/.test(string);
}

using the markup approach I showed earlier.

Hope that helps,
Mike

**Humper** · 11-02-2006, 05:50 PM

why wont it let me edit my post? --- My first post................ THIS IS RESOLVED>>> PLEASE DELETE!!!!!!!!!!!!!!!!!!!!!!

**Twey** · 11-02-2006, 06:08 PM

Originally Posted by mwinter

return /^[^@]+@[^.]+(\.[^.]+)+$/.test(string);

Email addresses can contain an arrobat (does English have a term for this symbol?) in the local-part.

Originally Posted by Humper

why wont it let me edit my post? --- My first post................ THIS IS RESOLVED>>> PLEASE DELETE!!!!!!!!!!!!!!!!!!!!!!

The thread will remain for the information of others who might want to read it, unless you have a practical objection?

**mwinter** · 11-02-2006, 07:30 PM

Originally Posted by Twey

Email addresses can contain an arrobat (does English have a term for this symbol?) in the local-part.

E-mail addresses can feature a lot of things, really. That's part of the problem with validating them without going the whole hog. Even replacing [^@] with \. still leaves a limiting regular expression.

Yes, a commercial at can appear in various parts of an address, either in a quoted string or in a comment.

Mike