ASP.NET MVC - Preventing Submission of Invalid Forms Using Unobtrusive jQuery Validation

Question

I have an ASP.NET project that automatically enables client-side validation using jQuery.Validate and the unobtrusive shell created by ASP.NET.

a) I definitely have the appropriate libraries: jquery.js , jquery.validate.js and jquery.validate.unobtrusive.js

b) And the MVC rendering engine is definitely enabled ( ClientValidationEnabledand UnobtrusiveJavaScriptEnabledin the section appSettingsin the web.config file)

Here is a trivial example when things are broken:

Model

public class Person
{
    [Required]
    public string Name { get; set; }
}

controller

public ActionResult Edit()
{
    Person p = new Person();
    return View(p);
}

View

@model validation.Models.Person

@using (Html.BeginForm()) {
    @Html.ValidationSummary(false)

    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
}

This creates the following client-side markup:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
    
<form action="/Person" method="post">
  <div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
  </div>
  <label for="Name">Name</label>
  <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
  <input type="submit" value="Save" />
</form>

Run codeHide result

, , , .

?

Answer 1

, , @Html.ValidationMessageFor .

:

, jquery.validate.js :

validate: function( options ) {
  form: function() {
    showErrors: function(errors) {
      defaultShowErrors: function() {
        showLabel: function(element, message) {
          this.settings.errorPlacement(label, $(element) )

errorPlacement jquery.validate.unobtrusive.js:

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

, $(this).find(...) .

container.attr("data-valmsg-replace") undefined

, $.parseJSON undefined. ( ), JavaScript (return false), .

jQuery

jQuery Validate $.parseJSON

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

ValidationMessageFor

, :

@Html.ValidationMessageFor(model => model.Name)

<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
    
<form action="/Person" method="post">
  <div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
  </div>
  <label for="Name">Name</label>
  <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
  <input type="submit" value="Save" />
</form>

Hide result