[RESOLVED] Javascript form validation process does not work correctly

I'm having problems with a javascript form validation that i have been working on for 8 hours now and every time I test it, it does something new unexpected.

I have a form with just 1 select pull down and 2 text inputs.


I want to check to make sure that any other option has been chosen from the list of selections other than the first generic option. If any other option has been selected, proceed to the next check...

Next, I want to check if the value of the second input (id="customAmt") is only a number. If not throw the error messages (both in side the input and at the bottom of the form in a <p> tag. If the input is only a number then proceed.

Last I want to check if a proper email has been added and done correctly. It should throw both an error message inside the input and in the bottom <p> tag.

Should be easy enough, but I keep running into trouble somewhere and I when I fix 1 thing something else acts unexpected.

This is in a PHP file which sends the form to itself and processes it after validation.

Manytimes, the form just skips the validation and sends the form anyway with all of the default values.


Here is the javascript/jquery I am testing which I put in the head of the code.

Code:

---

<script type="text/javascript">
$(document).ready(function(){
        // Place ID's of all required fields here.
        required = ["customDays", "customAmt", "customer_email"];
        // If using an ID other than #email or #error then replace it here
        email = $("#customer_email");
        errornotice = $("#msgsC");
        cAmt = $("#customAmt");
        // The text to show up within a field when it is incorrect
        emptyerror = "Enter traffic amount in numbers";
        emailerror = "Please enter a valid e-mail.";
        howMuch = "Enter a number";

        $("#customPkg").submit(function(){       
                //Validate required fields
                for (i=0;i<required.length;i++) {
                        var input = $('#'+required[i]);
                        if ((input.val() == "") || (input.val() == emptyerror)) {
                                input.addClass("errorAlert");
                                input.val(emptyerror);
                                errornotice.fadeIn(750);
                        } else {
                                input.removeClass("errorAlert");
                        }
                }
                //validate if option is selected
                if ($("#customDays option:selected").length == 0){
                        $("msgsC").addClass("text-error");
                        $("msgsC").html("Please choose how many days");
                }
               
                //validate numbers and commas only in the visits per day feild
                        if (!cAmt.match(/^\d+$/)){
                        cAmt.val(howMuch);
                        $("#msgsC").addClass("text-error");
                        $("#msgsC").html(emptyerror);
                        }
               
                // Validate the e-mail.
                if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
                        email.addClass("errorAlert");
                        email.val(emailerror);
                        $("#msgsC").addClass("text-error");
                        $("#msgsC").html(emailerror);
                }

                //if any inputs on the page have the class 'text-error' the form will not submit
                if ($(":input").hasClass("text-error") || $(":input").hasClass("errorAlert")) {
                        return false;
                } else {
                        errornotice.hide();
                        return true;
                }
        });
       
        // Clears any fields in the form when the user clicks on them
        $(":input").focus(function(){               
          if ($(this).hasClass("errorAlert") ) {
                        $(this).val("");
                        $(this).removeClass("errorAlert");
          }
        });
});       

</script>

---

Here is the HTML code

HTML Code:

---

<div style="background-color:#ffffff;" class="thumbnail">
                                                                                                <h3>Need A Pkg<br />Customized?</h3>
                                                                                                <p style="height:20px;">How Many Days Do You Need?</p>
                                                                                <form id="customPkg" method="post" style="height:150px;" action="<? $_SERVER['PHP_SELF']; ?>">
                                                                                <table>
                                                                                <tr><td align="center"><select name="customDays" id="customDays" style="width:100px;height:22px;padding:0;text-align:center;">
                                                                                                                <option value="chooseDays">Choose Days</option>
                                                                                                                <option value="7 days"> 7 days </option>
                                                                                                                <option value="15 days"> 15 days </option>
                                                                                                                <option value="30 days"> 30 days </option>
                                                                                                                <option value="60 days"> 60 days </option>
                                                                                                                <option value="90 days"> 90 days  </option>
                                                                                                                <option value="15 days"> 180 days </option>
                                                                                </select> </td></tr>
                                                                                <tr><td align="center">
                                                                                <label style="width:190px;height:15px;margin-top:-10px;">How Much Traffic Per Day?</label></td></tr>
                                                                                <tr><td align="center">
                                                                                <input size="40" type="text" style="width:92px;height:15px;" name="customAmt" id="customAmt" onclick="this.focus();this.select()" maxlength="7" value="Enter # per Day" />
                                                                                </td></tr>
                                                                                </table>
                                                                                <input size="40" type="text" style="width:190px;height:15px;margin-top:-5px;text-align:center;" class="errorAlert" name="customer_email" id="customer_email" onclick="this.focus();this.select()" maxlength="50" value="Enter your email" />
                                                                                <!-- Button -->
                                                                                <button alt="Customize" name="submit" class="btn btn-large btn-block btn-primary" value="CustomRequest" type="submit">Send Request</button>
                                                                                </form>
                                                                                <span id="msgsC" style="margin:0;">Pageviews Depend On Traffic Amt</span>
                                                                                                </div>

---

The PHP form sends with no trouble at all. The problem is in the validation code. Any help would be appreciated, as I have been working on this for hours and going around in circles.

Nevermind. I took a breather, walked away for a while, then came back and reassessed. I was missing a parenthesis. Anyhow. I fixed it now. Thread Resolved.