Form Validation

[starr_2005]

I have my form working with my validation, but when I try to validate the message area and I hit send, it sends the message to the email address with no message. I am also trying to validate my captcha code, but not to sure how to go about it. I couldnt post my whole page because I am new poster and not allow to due to the fact that I only have 5 posts.

<script type="text/javascript">
function ValidateContactForm()
{
     var name = document.ContactForm.name;
    var email = document.ContactForm.email;
    var text = document.ContactForm.text;

    if (name.value == "")
    {
        window.alert("Please enter your name.");
        name.focus();
        return false;
    }
    
    if (email.value == "")
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf("@", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (comment.value == "")
    {
        window.alert("Please provide a detailed description or comment.");
        text.focus();
        return false;
    }
    return true;
}
</script>

[starr_2005]

<div id="contact_form">
            
                    <h4>Quick Contact</h4>
                    
                    <form method="post" name="ContactForm" id="contact" action="email.php" onsubmit="return ValidateContactForm();">
                        
                        <div class="col_w340 float_l">
                        
                            <label for="name">Name (* Required):</label> <input name="name" type="text" class="input_field" id="author" maxlength="40" />
                          	<div class="cleaner_h10"></div>

 <label for="subject">Subject:</label> <input name="subject" type="text" class="input_field" id="subject" maxlength="40" />
                          	<div class="cleaner_h10"></div>

                            
                            <label for="email">Email (* Required):</label> <input name="email" type="text" class="input_field" id="email" maxlength="40" />
                          	<div class="cleaner_h10"></div>

[weegillis]

First thing I spotted was a label that's misidentifying its respective control:

<label for="name">Name (* Required):</label> <input name="name" type="text" class="input_field" id="author" maxlength="40" />

LABEL identifies its associated control by ID=, not NAME=. Your label should read 'for="author".

[starr_2005]

First thing I spotted was a label that's misidentifying its respective control:

<label for="name">Name (* Required):</label> <input name="name" type="text" class="input_field" id="author" maxlength="40" />

LABEL identifies its associated control by ID=, not NAME=. Your label should read 'for="author".

I didnt notice that. I thought the label and ID were suppose to be named the same.

[starr_2005]

Do I need to define my variables? So far, I've checked around some examples and its not included.

[weegillis]

I didnt notice that. I thought the label and ID were suppose to be named the same.

The NAME on your control is the variable identifying the associated field content that the handler receives, parses out, validates and reconstitutes into the outgoing email.

The ID is used by the browser to locate and identify the control in the DOM. This is why LABEL refers to ID, not NAME.

[weegillis]

Do I need to define my variables? So far, I've checked around some examples and its not included.

Your variables are defined by the NAME that you assign to the control input data. If you have three controls, one for the person's name, one for their e-mail and one for their comment, then their names respectively might be (arbitrarily) "myname", "myemail", & "mycomments".

The handler will parse these names out of the $POST_VARIABLES, and then refer to their associated data by $myname, $myemail, and $mycomments.

[weegillis]

I should add to above that the NAME on the control does not have to match the ID, but sometimes it makes it easier to debug. There is good reason for these two remaining independent--it fits in with dynamic creation of forms from templates.

[starr_2005]

So, my validation will work fine without how I defined my variables before my first IF statement? And I will agree, sometimes for me, I do find it easy that the name on control matches the ID.

[dean]

You didn't post your entire form, but I noticed in your javascript that you check for an empty value in "comment" then place focus on "text". Which is the name you gave to your textarea?
I would also note that javascript client-side validation is strictly for user friendliness and has no bearing on security. You need to validate in your php file, server-side. The javascript validating is ok, but optional.
The name and id attributes are two separate things. They could have the same value or not. If you should ever wish to apply labels to radio buttons, they would have to have different values.