Asp.Net MVC Validators passing through the controller

Question

When we create a project in Asp.Net it by default inserts some validators to be used with Razor, @Html.ValidationMessageFor(model => model.property).

I saw in different projects that these messages are generated through the return of the controller, that is, when the form is sent, it checks the ModelState and according to the answer, brings the mandatory fields and so "active" the message for what is missing, however, I have also seen in some projects that he does not need to enter the controller to perform the check, what I need to know is what defines this situation.

What does the validator do before entering the controller know which fields need to be filled in?

EDITION:

I think I’d better insert the Crypts that carry out the validations and also the others that I use to know if any is disturbing the other.

Follow the code below:

<script src="~/Scripts/jQuery-2.1.4.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/template/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />

    @*USAR NESTA ORDEM*@
    <link href="~/Content/template/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/jquery-confirm.css" rel="stylesheet" type="text/css" />
<link href="~/Content/meucs.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/angular.min.js"></script>
<script>angular.module("Angular", []);</script>
<script src="~/Scripts/tecbox/MainController.js"></script>    
<script src="~/Scripts/modernizr-2.8.3.js" type="text/javascript"></script>

Answer 1

I created a form with the following in Razor:

<div class="form-group">
    @Html.LabelFor(model => model.DataNascimento, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextBoxFor(model => model.DataNascimento, "{0:dd/MM/yyyy}", new { @class = "form-control datepicker", size = "16" })
        @Html.ValidationMessageFor(model => model.DataNascimento, "", new { @class = "text-danger" })
    </div>
</div>

This generates the following HTML:

<div class="form-group">
    <label class="control-label col-md-2" for="DataNascimento">Data de Nascimento</label>
    <div class="col-md-10">
        <input class="form-control datepicker hasDatepicker" data-val="true" data-val-date="O campo Data de Nascimento deve ser uma data." data-val-required="O campo Data de Nascimento é obrigatório." id="DataNascimento" name="DataNascimento" size="16" type="text" value="" aria-required="true">
        <span class="field-validation-valid text-danger" data-valmsg-for="DataNascimento" data-valmsg-replace="true"></span>
    </div>
</div>

Note that you have several notes beginning with "date-" and "Aria-". The specification of WAI-ARIA is here. About data- there’s something here. jQuery Validation uses these attributes to know what to validate. That’s why the requisition doesn’t even go to the Controller: JS performs some validation and only after it allows the form to be finally sent.

I tried not to spend a lot of nescimento in the form. See what happened:

<div class="form-group">
    <label class="control-label col-md-2" for="DataNascimento">Data de Nascimento</label>
    <div class="col-md-10">
        <input class="form-control datepicker hasDatepicker input-validation-error" data-val="true" data-val-date="O campo Data de Nascimento deve ser uma data." data-val-required="O campo Data de Nascimento é obrigatório." id="DataNascimento" name="DataNascimento" size="16" type="text" value="" aria-required="true" aria-describedby="DataNascimento-error">
        <span class="text-danger field-validation-error" data-valmsg-for="DataNascimento" data-valmsg-replace="true"><span id="DataNascimento-error" class="">O campo Data de Nascimento é obrigatório.</span></span>
    </div>
</div>

Several things were changed by themselves.

Normally, to use with ASP.NET MVC, the following inclusion already leaves everything ready for you.

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

The Bundle is as follows:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate*"));

Answer 2

Validations that are performed on the client with ASP.Net MVC use Jquery Validation (https://github.com/jzaefferer/jquery-validation).

In this case, simpler validations as required for example can be done in the browser before they are performed by the Controller.