show error message after validating - jQuery Validate

Question

I have a function which compares two fields.

$.validator.addMethod("validatormethod", function (value, element) {
    return $('#Field1').val() > $('#Field2').val()
}, "Test");

The form is dynamic and hence the form is validated using each:

$('.validateclass').each(function () {
        $(this).rules('add', {
            validatormethod: true,
            messages: {validatormethod: "Test" }
        })
    });

$('.validateclass2').each(function () {
        $(this).rules('add', {
            required: true,
            messages: {required: "This field is required" }
        })
    });

$('#myForm').valid();

Now my problem is the message Test appears as soon as the page loads. It should appear only after the field is compared. I know it is due the the line $('#formSaveComponent').valid();. But I want the required message to appear when the page loads. Is there some way I can get this done using jQuery Validate plugin.

SAMPLE FIDDLE

Show the HTML for your form. Also explain more about why you're triggering .valid() when the page loads and what your title is supposed to mean. Showing error message after validation is the default behavior. — Sparky
– Sparky, Commented Oct 27, 2014 at 18:07
I am triggering as there are many fields and for some fields, I want the validation to trigger as soon as the page loads. Not after clicking the submit button. — user2281858
– user2281858, Commented Oct 27, 2014 at 18:10
Setting .Valid() on the form load will run for every field on the form at the time it's loaded, which is why "Test" is showing up. If you only want some things to validate, you should specify the fields you want to validate, not the entire form. — tlbignerd
– tlbignerd, Commented Oct 27, 2014 at 18:13
You still need to click the edit link to clarify the question for the reader and add some relevant HTML. — Sparky
– Sparky, Commented Oct 27, 2014 at 18:13
check the small fiddle I have created, what I am trying to do is, Trigger the error message Test after the submit/tab event. — user2281858
– user2281858, Commented Oct 27, 2014 at 18:17

Sparky · Accepted Answer · 2014-10-27 18:48:24Z

1

Quote OP:

"Now my problem is the message Test appears as soon as the page loads. It should appear only after the field is compared."

You've written your custom method as if the fields are required... that is why you're getting the error message immediately and while the fields are still empty.

As long as these fields are not required, you would need to add this.optional( element ) || to your custom method as follows...

$.validator.addMethod("validatormethod", function (value, element) {
    return this.optional( element ) || $('#Field1').val() > $('#Field2').val()
}, "Test");

Now the custom method will not fire unless something is entered into the relevant fields.

EDIT 1

Although I have no idea why, in your jsFiddle, you are comparing txtLastName to txtFirstName with a > comparison operator... exactly how could one name be "greater than" the other?

EDIT 2

Your jsFiddle is broken because...

You are targeting fields by id, however your fields only contain a name and no id. Change $('#fieldname') into $('[name="fieldname"]') to target them by name.
You are comparing two strings with a comparision operator, which will always fail because strings are not numbers. You need parseInt() to convert the string into an integer in order to compare them...
```
parseInt($('[name="fieldname"]').val())
```

DEMO: http://jsfiddle.net/h4bf10vt/3/

edited Oct 27, 2014 at 18:48

answered Oct 27, 2014 at 18:12

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2281858 Over a year ago

this works, but the message 'Test' appears even if it is a proper(valid) field

Sparky Over a year ago

@user2281858, that makes no sense as error messages are never shown when fields are valid; and why I've twice asked you to show the relevant HTML code in your question. I'll look at your jsFiddle, but as per this site's rules, jsFiddle are not substitutes for showing the code within the question itself.

Sparky Over a year ago

@user2281858, my code in your jsFiddle: jsfiddle.net/h4bf10vt/2 ~ Explain exactly how & where this is failing.

user2281858 Over a year ago

i don't have the relevant HTML with me currently, but the behavior is same as the fiddle. I am comparing 2 textboxes, if one is greater than the other, the error message should appear.

Sparky Over a year ago

@user2281858, I solved your original question. If the core function of your custom method is also broken, then you should have clearly explained the goal of your custom method in the OP. However, assuming you're comparing two numbers... see my edited answer.

|

Collectives™ on Stack Overflow

show error message after validating - jQuery Validate

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related