CODEWITHSUNDEEP
javascriptjqueryhtmlformsjquery-validate
Jon Rogers
Jon Rogers

Reputation: 13

JQuery Validation matching fields

I am developing a project with a registration form. I have 2 email fields as well as 2 password fields, each need to match each other. I am using JQuery validate and Bootstrap in an ASP.NET MVC 4 (C#) framework. Even if they are matching, the fields are getting the error that they do not match.

HTML

Registration Form

<div class="row">
    <form id="formRegister" class="form-horizontal col-xs-5">
        <div class="form-group">
            <label for="textFirstName" class="control-label col-xs-2">First name</label>
            <div class="col-xs-4">
                <input type="text" name="textFirstName" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="textLastName" class="control-label col-xs-2">Last name</label>
            <div class="col-xs-4">
                <input type="text" name="textLastName" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="textEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-4">
                <input type="text" name="textEmail" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="textEmail2" class="control-label col-xs-2">Reenter email</label>
            <div class="col-xs-4">
                <input type="text" name="textEmail2" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="passwordPW1" class="control-label col-xs-2">Password</label>
            <div class="col-xs-4">
                <input type="password" name="passwordPW1" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <label for="passwordPW2" class="control-label col-xs-2">Reenter Password</label>
            <div class="col-xs-4">
                <input type="password" name="passwordPW2" class="form-control" />
            </div>
            <div class="col-xs-6"></div>
        </div>
        <div class="form-group">
            <div class="btn-group col-xs-offset-2 col-xs-5">
                <button type="submit" class="btn btn-info">Submit</button>
                <button type="reset" class="btn btn-info">Clear</button>
            </div>
        </div>

    </form>
</div>

JS

jQuery(function ($) {
    $('#formRegister').validate({
        errorElement: "div",
        errorPlacement: function(error, element) {
            error.appendTo(element.parent("div").next("div"));
        },
        rules: {
            textFirstName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            textLastName: {
                required: false,
                maxlength: 50
            },
            textEmail: {
                required: true,
                email: true
            },
            textEmail2: {
                equalTo: "#textEmail"
            },
            passwordPW1: {
                required: true,
                minlength: 4
            },
            passwordPW2: {
                equalTo: "#passwordPW1"
            }
        },
        messages: {
            textFirstName: "The first name must be from 1 to 50 characters in length",
            textLastName: "The last name must be from 0 to 50 characters in length",
            textEmail: "Please enter a valid email address",
            textEmail2: "Emails do not match",
            passwordPW1: "The password must be from 4 to 50 characters in length",
            passwordPW2: "Passwords do not match"
        },
        highlight: function (element) {
            $(element).closest('next').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
            .closest('.next').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

Upvotes: 0

Views: 1386

Answers (3)

amphetamachine
amphetamachine

Reputation: 30595

Your problem is that you're referring to selectors that don't match anything. For instance, #textEmail (used in the equalTo property) won't match anything in your current DOM.

Replace this line:

<input type="text" name="textEmail" class="form-control" />

With this line: 

<input type="text" id="textEmail" name="textEmail" class="form-control" />

Alternatively, you can use a different selector in your equalTo property:

    // ...
    rules: {
        // ...
        textEmail2: {
            equalTo: "[name=textEmail]"
        },
        // ...

Upvotes: 1

Reptar
Reptar

Reputation: 372

I don't know anything about .asp.net and bootstrap, but in your form, you are using the name tag, while in your javascript, you are using a #, which refers to an ID. Give your input an the id textEmail and passwordPW1

Upvotes: 0

matthias_h
matthias_h

Reputation: 11416

Your validation for equalTo currently is

textEmail2: {
            equalTo: "#textEmail"
        }

but the input textEmail has no id="textEmail". Try to add this id and it should work then.
The same applies to other validation rules where you match against ids that are not yet added at the inputs.

Upvotes: 1

Related Questions