I'm trying to highlight my inputs with jquery validate

Question

I'm working in mvc. This is my view:

@using (Html.BeginForm("CreatePost", "Posts", FormMethod.Post, new { @enctype = "multipart/form-data", @id = "save-post-form" }))
{
<div class="row">
    <div class="col-xs-5" id="post-details-div">
        <div class="form-group">
            <label>Post Title</label>
            @Html.TextBoxFor(m => m.Title, new { @class = "form-control", @autocomplete = "off" })
            @Html.ValidationMessageFor(m => m.Title, null, new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <label>Post Description</label>
            @Html.TextAreaFor(m => m.Description, new { @class = "form-control", @autocomplete = "off" })
            @Html.ValidationMessageFor(m => m.Description, null, new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <label>Post Cover Picture</label>
            @Html.TextBoxFor(m => m.PostCoverFile, new { @type = "file" })
            @Html.ValidationMessageFor(m => m.PostCoverFile, null, new { @class = "text-danger" })
        </div>
    </div>

    <div id="post-content-div">
        <label>Content</label>
        <div class="form-group">
            @Html.TextAreaFor(m => m.Content)
            @Html.ValidationMessageFor(m => m.Content, null, new { @class = "text-danger" })
        </div>
    </div>
</div>
}

@section scripts{

<script>
    require(["createPost"], function (module) {
        $("#navbar-links").find("li[data-name='posts']").addClass('active');
        module.load();

    });
</script>
}

And this is my js file. I have only the form validation. I'm using require js:

define(["jquery", "mainModule", "ckeditor", "jqueryValidateUnobtrusive", "bootstrapTagsInput", "typeAhead"], function ($, module, CKEDITOR) {
    var bind = function () {
        $(document).ready(function () {

        console.log("ready");
        $('#save-post-form').validate({
            highlight: function (element) {
                $(element).addClass('error');
                $(element).removeClass('valid');
                console.log("ceva");
            },
            unhighlight: function (element) {
                $(element).removeClass('error');
                $(element).addClass('valid');
                console.log("ceva");
            }
        });
    });
var createPostPage = {
    load: function () {
        bind();
    }
}

return createPostPage;
});

Nothing happens and I don't know what is wrong... Please help me. The validation works, but the highlight won't trigger.

Answer 1

The validation works, but the highlight won't trigger.

That's because you're already using the unobtrusive-validation plugin as part of ASP. As such, Unobtrusive Validation automatically constructs and calls the .validate() method. This means that your instance of .validate() is always ignored. (As per jQuery Validate's design, the .validate() method can only be called once as the plugin's initialization on your form, and any subsequent calls are always ignored.).

In other words, once you call .validate() (initializes the plugin) on the form, the options are locked in and cannot be changed dynamically by calling .validate() again.

You have two options to over-ride the default highlight and unhighlight...

1. Remove the unobtrusive-validation plugin from your project and construct .validate() method as you desire. Gives you full control but FWIW, you will not get the "unobtrusive" features and benefits of the Unobtrusive Validation plugin.

2. Put your highlight and unhighlight options within the .setDefaults() method instead, and then be sure this method goes someplace before Unobtrusive calls .validate(). To achieve this, you'll probably have to make sure .setDefaults() is not inside of any DOM ready event handler. Just remember that anything you put inside of .setDefaults() will affect all forms on the page.

Read more here: stackoverflow.com/a/40899630/594235

and here (see edit #2 and comments section): stackoverflow.com/a/8565769/594235