2

Quando criamos um projeto em Asp.Net ele por padrão insere alguns validadores para serem usados com o Razor, @Html.ValidationMessageFor(model => model.property).

Vi em diferentes projetos que estas mensagens são geradas através do retorno do controller, ou seja, quando o formulário é enviado, ele verifica o ModelState e de acordo com a resposta, traz os campos obrigatórios e assim "ativa" a mensagem para o que esta faltando, porém, já vi também em alguns projetos que ele não necessita entrar no controller para realizar a verificação, o que eu preciso saber é o que define esta situação.

O que faz o validador antes de entrar no controller saber quais os campos são necessários serem preenchidos?

EDIÇÃO:

Acho melhor inserir os javascripts que realizam as validações e também os demais que uso para sabermos se algum esta atrapalhando o outro.

Segue o código abaixo:

<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>

2 Respostas 2

2

Criei um formulário com o seguinte em 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>

Isto gera o seguinte 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>

Repare que tem várias anotações começadas por "data-" e por "aria-". A especificação de WAI-ARIA está aqui. Sobre data- tem alguma coisa aqui. O jQuery Validation utiliza estes atributos pra saber o que validar. É por isso que a requisição nem vai para o Controller: o JS realiza alguma validação e só depois ele permite que o formulário seja finalmente enviado.

Experimentei não passar uma data de nescimento no formulário. Veja o que aconteceu:

<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>

Várias coisas foram trocadas sozinhas.

Normalmente, para usar com ASP.NET MVC, a seguinte inclusão já deixa tudo pronto pra você.

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

O Bundle fica da seguinte forma:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        "~/Scripts/jquery.validate*"));
4
  • isso quer dizer que não precisam ser inseridas as propriedades nos elementos html na mão, certo? Pois tenho um outro projeto aqui que funciona, apenas não consigo achar o problema. Estão praticamente iguais. Commented 25/08/2015 às 19:27
  • Certo. Você apenas decora os atributos. O resto o framework faz por você. Commented 25/08/2015 às 19:29
  • Alguma coisa esta errada, ineri um breakpoint no controller e ele ainda esta sendo chamado. Commented 25/08/2015 às 19:43
  • Então passou para o Controller, ou você configurou errado seu projeto. Commented 25/08/2015 às 19:48
1

As validações que são realizadas no client com o ASP.Net MVC utilizam o JQuery Validation (https://github.com/jzaefferer/jquery-validation).

Nesse caso, validações mais simples como required por exemplo conseguem ser feitas no browser antes que sejam realizadas pela Controller.

1
  • Eu já realizei as modificações necessárias, porém não adiantaram. Vou editar a pergunta com a sequencia atual de scripts renderizados para que possamos identificar o problema. Commented 25/08/2015 às 18:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .