Jquery validation settings (need same behavior)

Question

I am using jquery validation & bootstrap. In views that i only have one form and I dont have to init the validator on the form. I have the input and the validation message span under the input. Styling is great. Red messages etc.

However, when i have 2 forms in a view I need to create a validator object myself. However when I create it and validation messages get displayed they don't have the same color/style.

How can init a validator with the same settings?

In jquery.validate.unobtrusive I found the following

options: {  // options structure passed to jQuery Validate's validate() method
                errorClass: defaultOptions.errorClass || "input-validation-error",
                errorElement: defaultOptions.errorElement || "span",
                errorPlacement: function () {
                    onError.apply(form, arguments);
                    execInContext("errorPlacement", arguments);
                },
                invalidHandler: function () {
                    onErrors.apply(form, arguments);
                    execInContext("invalidHandler", arguments);
                },
                messages: {},
                rules: {},
                success: function () {
                    onSuccess.apply(form, arguments);
                    execInContext("success", arguments);
                }
            },

So I am assuming I need those settings. But how can i invoke functions defined in that JavaScript file (e.g. onError, onSuccess)

enter image description here

1 Textbox: I dont have to call validate() or anything

 @Html.TextBox("locationDate", "", new { @class = "dateInputMMYY form-control", @placeholder = "Move Date" })
 @Html.ValidationMessage("locationDate")

2 TextBox: I invoke .validate() on the form:

@Html.TextBox("end", "", new { @class = "dateInput form-control search", @placeholder = "End Date" })
@Html.ValidationMessage("end")

You really need to clean up your OP. Where is the ***RENDERED*** HTML output? Show just enough code to create a complete example of your problem. Otherwise, we have no idea what you want. — Sparky, Sep 23 '14 at 16:50
Quote: _"However, when i have 2 forms in a view I need to create a validator object myself. However when I create it and validation messages get displayed they don't have the same color/style."_ Hint: the jQuery Validation plugin ***does not*** style anything. We'll need to see the rendered HTML of both forms to see why they're getting different CSS. — Sparky, Sep 23 '14 at 16:55
It adds classes that will change the style : e.g. "input-validation-error" class on an input element makes it red — den, Sep 24 '14 at 08:12
Yes, but it _only_ toggles classes. The red styling is not part of this plugin, as the plugin does not contain CSS. Also, that is not the rendered HTML you just posted. The `.validate()` method must always be called somewhere as that's the plugin's initialization. In your case, your framework is likely already doing this for you. However, based on your answer, it looks like you figured it all out. — Sparky, Sep 24 '14 at 14:37

score 0 · Accepted Answer · answered Sep 24 '14 at 12:43

After long research and from help from this article

http://nadeemkhedr.wordpress.com/2012/08/27/how-the-unobtrusive-jquery-validate-plugin-works-internally-in-asp-net-mvc/

I found out that unobtrusive doesn't validate the form because the input element is missing the data-val="true" attribute.

Adding that attribute to the input selects the input for unobtrusive validation.

Jquery validation settings (need same behavior)

1 Answers1