ASP.NET MVC3 JQuery Validate Plugin custom error Placement

Question

I am trying to handle errorPlacement JQuery Validate plugin in ASP.NET MVC 3 Project with Unobtrusive validation provided by Microsoft. I am never able to hit the errorPlacement function and I am not sure what am I doing wrong. I am providing the code for Model/View/Controller below. Please let me know what am I doing wrong?

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Project.Models.SampleModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
</head>
<body>
    <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript">

         $(document).ready(function ()
    {
        $("#form").validate(
      {
          errorPlacement: function (error, element)
          {
              alert("Code to define customer error");
          }
      })

    });
    </script>
    <% using (Html.BeginForm("Index", "Sample", FormMethod.Post, new { id = "form" }))
       { %>
    <%: Html.ValidationSummary(false) %>
    <fieldset>
        <legend>NewModel</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Name) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Age) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Age) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Address) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.Address) %>
        </div>
        <br />
        <p>
            <input type="submit" id="submit" value="Submit" />
        </p>
    </fieldset>
    <% } %>
</body>
</html>

Model

public class SampleModel
    {


        [Required]
        [DataType(DataType.Text)]
        [DisplayName("Name")]
        public string Name { get; set; }

        [Required]
        [DataType(DataType.Text)]
        [DisplayName("Age")]
        public string Age { get; set; }

        [Required]
        [DataType(DataType.MultilineText)]
        [DisplayName("Address")]
        public string Address { get; set; }


    }

Controller

public class SampleController : Controller
    {
        //
        // GET: /New/

        public ActionResult Index()
        {
            return View();
        }

    }

score 5 · Answer 1 · answered Nov 08 '11 at 13:47

I found an article here which addresses the issue.

In short:

var valOpts = $.data($('form')[0], 'validator').settings; //we've got jQuery.validation settings woohoo!
var baseError = valOpts.errorPlacement;
valOpts.errorPlacement = function (error, input) {
    input.attr('title', error.text()); //error is the $('<span>...</span>')
    baseError(error, input); //removing this breaks form validation
};

score 2 · Answer 2 · answered Mar 22 '11 at 19:24

In MVC3 Microsoft uses jQuery validation plugin for builtin validation. The usage is in jquery.validate.unobtrusive.min.js. Find OnError there - and change it's logic.

function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);

        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
        }
        else {
            error.hide();
        }
    }

score 0 · Answer 3 · edited Sep 26 '12 at 07:02

0

Try to replace with jquery.unobtrusive-ajax.min.js.

It worked for me but I didn't know what errors could possibly occur in future.

edited Sep 26 '12 at 07:02

Mihai Iorga

39,330
16
106
107

answered Sep 06 '12 at 03:49

Lykers

1

score 0 · Answer 4 · answered Jan 11 '13 at 12:13

After reading through many posts and trying to find an answer I wasn't able to get error placement to work. I use twitter bootstrap in my MVC 4 application and wanted a way to put the error class in to the control-group div to make it go red when there is an error.

It wasn't possible to access the initialized jquery validator object through the form.

As a fact, we know that we can pass settings to jQuery validation when initializing validation in a website. But in MVC, it is done automatically (I'm not sure In Where it is done)

Anyway, If we find this initialized object, we can extend the settings and pass our own functions to highlight, unhighlight, showErrors, etc.

How to do this

jQuery.validator provided the instance of validation object that was already initialized. in that object, there is a function called setDefaults. you can create a settings object with the functions that you want to customize. Example below

$(function () {
        var settings = {
            highlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
            }
        }

        if (jQuery.validator) {
            jQuery.validator.setDefaults(settings);
        }
});

score 0 · Answer 5 · answered Oct 22 '15 at 15:55

0

Your custom code and options need to load AFTER jquery.validate and BEFORE jquery.validate.unobtrusive.

answered Oct 22 '15 at 15:55

NickWebman

178
2
8

score 0 · Answer 6 · answered Feb 16 '11 at 17:38

Looks like your code may have gotten mangled a little bit in posting, but I will try. Your jQuery code looks good to me.

You included the jquery and jquery validator libaries? You are running your code inside $(document).ready? You have a field that is invalid? Your alert will only call if there is an error. You can trigger by hitting submit with an invalid field.

score 0 · Answer 7 · edited May 23 '17 at 11:58

while having a similar problem I found a solution. Here is my solution. I link to my question and copy the answer below. Hope this is what you are looking for:

Integrating qTip with MVC3 and jQuery Validation (errorPlacement)

1) First, locate the script jquery.validate.unobtrusive.js provided by microsoft.

2) Second, on the script locate the function validationInfo(form) and replace the errorPlacement instruction in the options structure with the one provided by qTip, or any of your choice.

3) Same goes for style and other options you wish to change in how validation is handled.

4) Include all necessary files were needed.

Hope this helps someone having a similar problem.

Example Code:

function validationInfo(form) {
    var $form = $(form),
        result = $form.data(data_validation);

    if (!result) {
        result = {
            options: {  // options structure passed to jQuery Validate's validate() method
                //errorClass: "input-validation-error",
                errorClass: "error",
                errorElement: "span",
                //errorPlacement: $.proxy(onError, form),
                errorPlacement: function (onError, form) {
                    var error = onError;
                    var element = form;
                    // Set positioning based on the elements position in the form
                    var elem = $(element),
                        corners = ['left center', 'right center'],
                        flipIt = elem.parents('span.right').length > 0;

                    // Check we have a valid error message
                    if (!error.is(':empty')) {
                        // Apply the tooltip only if it isn't valid
                        elem.filter(':not(.valid)').qtip({
                            overwrite: false,
                            content: error,
                            position: {
                                my: corners[flipIt ? 0 : 1],
                                at: corners[flipIt ? 1 : 0],
                                viewport: $(window)
                            },
                            show: {
                                event: false,
                                ready: true
                            },
                            hide: false,
                            style: {
                                classes: 'ui-tooltip-red' // Make it red... the classic error colour!
                            }
                        })

                        // If we have a tooltip on this element already, just update its content
                        .qtip('option', 'content.text', error);
                    }

                    // If the error is empty, remove the qTip
                    else { elem.qtip('destroy'); }
                },
                invalidHandler: $.proxy(onErrors, form),
                messages: {},
                rules: {},
                success: $.proxy(onSuccess, form)
            },
            attachValidation: function () {
                $form.validate(this.options);
            },
            validate: function () {  // a validation function that is called by unobtrusive Ajax
                $form.validate();
                return $form.valid();
            }
        };
        $form.data(data_validation, result);
    }

    return result;
}

ASP.NET MVC3 JQuery Validate Plugin custom error Placement

7 Answers7