CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsjquery-validate
Lost
Lost

Reputation: 13565

Jquery Validator does not seem to work

I am pretty sure I am missing something very obvious but I am trying to validate my one of the textbox with required condition and I am using Jquery validator for that. My code looks like below:

 var validator = $("#ForgotPassword").validate({
                rules: {
                    EmailAddress: { required: true }
                },
                messages: {
                    EmailAddress: {
                        required: "Email address is required."
                    }
                }
            });

My DOm is like something below:

<form id = "ForgotPassword" class="ui-helper-hidden"  title="Forgot Password" action="" method="GET">
                <p>Please enter the email address you registered with. We’ll send you an email with a password reset link.</p>
                <div class="inputwrapper _100">
                    <label for="Email">Email</label>
                    <input type="text" id="EmailAddress" name="Email" data-bind ="value : ForgotPasswordEmailAddress"/>
                    <span id="EmailAddress_Error" class="ui-helper-hidden errorMessage" ></span>
                </div>
            </form>

But when I put a watch on my validator object on the run time, I do not see any error. Is is because I am looking at the wrong place or my binding are not right?

Upvotes: 1

Views: 260

Answers (2)

Wiz
Wiz

Reputation: 500

I think the problem is with the name in rules and messages. You should be using Email as the rule and message not EmailAddress because thats the name attribute on the control

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

Try this please or paste rest of your validation code:

For validation plugin you need to have name - EmailAddress in this case:

Hope it help the cause :)

<form id = "ForgotPassword" class="ui-helper-hidden"  title="Forgot Password" action="" method="GET">
                <p>Please enter the email address you registered with. We’ll send you an email with a password reset link.</p>
                <div class="inputwrapper _100">
                    <label for="Email">Email</label>
                    <input type="text" id="EmailAddress" name="EmailAddress" class="EmailAddress" data-bind ="value : ForgotPasswordEmailAddress"/>
                    <span id="EmailAddress_Error" class="ui-helper-hidden errorMessage" ></span>
                </div>
            </form>

Upvotes: 2

Related Questions