Javascript regular expression to verify form validation

Question

So basically it's form validation. In the if statement for the reg ex to check the fullname.value, I can't figure out why it does not add the error message to the array. I've tested with a NOT in front but still doesn't seem to get into the else if statement block to add the error message or it skips it entirely. I have added the code below, also I've commented to section that does not function how I thought it would in my head. Look down to the script area.

<html>
<head>
    <title>Form Validation</title>
    <style type="text/css">
        #error {color:red;}
    </style>
</head>
<body>
    <h1>Form Validation with Reg Expressions</h1>
    <div id="error">
    </div>
    <form method="post" action="https://csu.mohawkcollege.ca/tooltime/echo.php" onSubmit="return validateForm(this)">
        <div>
            <label for="fullname">Full Name:</label>
            <input id="fullname" type="text" name="fullname"/>
            Salutation of Mr. or Mrs. followed by two text strings separated by any number of spaces.
        </div>
        <div>
            <label for="street">Street:</label>
            <input id="street" type="text" name="street"/>
            2 or 3 digit number followed by a text string ending with Street or Road separated by any number of spaces.
        </div>
        <div>
            <label for="postalcode">Postal Code:</label>
            <input id="postalcode" type="text" name="postalcode"/>
            Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive.)
        </div>
        <div>
            <label for="phone">Phone:</label>
            <input id="phone" type="text" name="phone"/>
            10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen.
        </div>
        <div>
            <label for="email">Email:</label>
            <input id="email" type="text" name="email"/>
            firstname.lastname@mohawkcollege.domain (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca, or .org)
        </div>
        <input type="submit"/>
    </form>
 <script type="text/javascript">
    var displayErrorMessage = document.getElementById("error");

    function validateForm(form)
    {
        displayErrorMessage.innerHTML = "";

        var errorMessages = [];

        alert("validate function entered");

        // ERROR HAPPENS HERE!!
        // DOES NOT SEEM TO GET INTO THE ELSE IF BLOCK TO ADD ERROR MESSAGE TO THE ARRAY
        if (form.fullname.value == "") errorMessages.push("Full Name cannot be empty");
        else if (!/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/.match(form.fullname.value))
        {
            errorMessages.push("Name format error. Ex. Mr. John Smith");
        }

        if (form.street.value == "") errorMessages.push("Street cannot be empty");

        if (form.postalcode.value == "") errorMessages.push("Postal Code cannot be empty");

        if (form.phone.value == "") errorMessages.push("Phone cannot be empty");

        if (form.email.value == "") errorMessages.push("Email cannot be empty");

        alert(errorMessages.length);

        if (errorMessages.length == 5)
        {
            var unorderedList = document.createElement("ul");
            var list = document.createElement("li");

            list.innerHTML = "Please fill something in. All fields are blank!";

            unorderedList.appendChild(list);

            displayErrorMessage.appendChild(unorderedList);

            return false;
        }
        else if (errorMessages.length > 0)
        {
            var unorderedList = document.createElement("ul");

            for (var n in errorMessages)
            {
                var list = document.createElement("li");
                list.innerHTML = errorMessages[n];
                unorderedList.appendChild(list);
            }

            displayErrorMessage.appendChild(unorderedList);

            return false;
        }
        else
        {
            alert("Got your info -- now the form will be submitted!");
            return true;
        }
    }
</script>
</body>

Answer 1

Try using

!form.fullname.value.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)

The method is string.match(regexp) not the other way around. eg

'Mr. OG Haza'.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)
Output: ["Mr. OG Haza", "Mr."]

Javascript regular expression to verify form validation

Question

1 answers

solution1
1 ACCPTED 2013-11-27 20:43:35

Javascript regular expression to verify form validation

Question

1 answers

solution1 1 ACCPTED 2013-11-27 20:43:35

solution1
1 ACCPTED 2013-11-27 20:43:35