JavaScript Validation - about the Confirm Password field

Question

I am making a sign up page and I am instructed to add client side validation and javascript validation. In the HTML file(signup.html), I have 8 input fields, 7 of those have regular expression, but only 4 have required field. I am having a problem about the "Confirm Password" field. Even though the input is different from the "Password" field, the validation process still continues, instead of alerting the user that the password must be the same to proceed.

Here is the HTML code for the form:

            <form method="POST" action="http://webdevfoundations.net/scripts/formdemo.asp" id="signUp" onSubmit="confirmForm(this);">
                <fieldset id="personalInfo">
                    <legend>
                        Personal Information
                    </legend>
                    <table class="userInput">
                        <tr>
                            <td class="label">
                                <label for="firstName">
                                    First Name 
                                </label>
                            </td>
                            <td>
                                <input type="text" name="first" id="firstName" pattern="[a-zA-Z]{2,}" title="Must have at least 2 characters of alphabet" maxlength="50" autofocus/>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">
                                <label for="lastName">
                                    Last Name
                                </label>
                            </td>
                            <td>
                                <input type="text" name="last" id="lastName" pattern="[a-zA-Z]{2,}" title="Must have at least 2 characters of alphabet" maxlength="50"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">
                                <label for="email">
                                    Email<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="email" name="email" id="email" pattern="\w.*+\@+[a-z]+\.[a-z]{2,7}" title="Example: abc@yahoo.com" required/>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">
                                <label for="age">
                                    Age
                                </label>
                            </td>
                            <td>
                                <input type="number" name="age" id="age" pattern="[1-9]{1,2}" title="Numeric value must be used" min="3"/>
                            </td>
                        </tr>
                    </table>
                </fieldset> 

                <br/>

                <fieldset id="genderField">
                    <legend>
                        Gender
                    </legend>
                    <input type="radio" name="gender" id="genderM" value="Male">
                    <label for="genderM">
                        Male
                    </label>

                    <input type="radio" name="gender" id="genderF" value="Female">
                    <label for="genderF">
                        Female
                    </label>                                
                </fieldset>

                <br/>

                <fieldset id="logInfo"> 
                    <legend>
                        Log In Information
                    </legend>
                    <table class="userInput">
                        <tr>
                            <td>
                                <label for="userName">
                                    Username<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" name="user" id="userName" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{5,}" title="Must have at least 5 characters, including UPPER/lowercase letters and number" required/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="password">
                                    Password<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="password" name="pword" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{5,}" title="Must have at least 5 characters, including UPPER/lowercase letters and number" required/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="confirmP">
                                    Confirm Password<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="password" name="pwordConfirm" id="confirmP" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{5,}" title="Must be the same password as above" required/>
                            </td>
                        </tr>
                    </table>
                </fieldset>

                <br />
                <input type="submit" value="Sign Up"/>
            </form>

Here is the JavaScript code:

function confirmForm(form)
{
        if(!(form.first.value.match(/^[a-zA-Z]{2,}$/))) {
        alert("Invalid First Name");
        form.first.focus();
            return false;
    }

    if(!(form.last.value.match(/^[a-zA-Z]{2,}$/))) {
        alert("Invalid Last Name");
        form.last.focus();
        return false;
    }

    if(!(form.email.value.match(/^\w.*+@[a-z]+\.[a-z]{2,7}$/))) {
        alert("Invalid Email");
        form.email.focus();
        return false;
    }

    if(!(form.age.value.match(/^[1-9]{1,3}$/))){
        alert("Invalid Age");
        form.age.focus
        return false
    }

    if(!(form.user.value.match(/^\w{5,}$/))) {
        alert("Invalid Username");
        form.user.focus();
        return false;
    }

    if(!(form.pword.value.match(/^.\w{5,}$/))){
        alert("Invalid Password");
        form.pword.focus();
        return false;
    }

    if(!(form.pwordConfirm.value == form.pword.value)){
        alert("Password must be the same");
        form.pwordConfirm.focus();
        return false;
    }
    else {
        return true;
    }
}

Answer 1

you need to do return function confirmForm() on form tag something like this.

id="signUp" onSubmit="return confirmForm(this);">
//-----use return here--^

Also use test instead of match which returns true or false on success or failure of valdation.

var patt1 = /^[a-zA-Z]{2,}$/;
if(!(patt1.test(form.first.value)

The emal validation pattern is also wrong, remove * from email pattern

should be

/^\w.+\@+[a-z]+\.[a-z]{2,7}$/

instead of

/^\w.*+@[a-z]+\.[a-z]{2,7}$/

Here is the complete JSfiddle DEMO