validação discreta não funciona com conteúdo dinâmico


96

Estou tendo problemas ao tentar fazer com que a validação jquery discreta funcione com uma visão parcial que é carregada dinamicamente por meio de uma chamada AJAX.

Tenho passado dias tentando fazer esse código funcionar sem sorte.

Aqui está a visão:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

A visão parcial:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

O modelo:

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

O controlador:

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

e, finalmente, o javascript:

$(doument).ready(function () {
$.ajax({
    url: '/test/getview',
    success: function (res) {

        $("#res").html(res);
        $.validator.unobtrusive.parse($("#res"));
    }
});

$("#submit").click(function () {
    if ($("form").valid()) {
        alert('valid');
        return true;
    } else {
        alert('not valid');
        return false;
    }
});

A validação não funciona. Mesmo se eu não preencher nenhuma informação no texbox, o evento submit mostra o alerta ('válido').

No entanto, se em vez de carregar dinamicamente a visualização, eu usar @Html.Partial("test", Model)para renderizar a visualização parcial na visualização principal (e não faço a chamada AJAX), a validação funciona bem.

Isso provavelmente ocorre porque, se eu carregar o conteúdo dinamicamente, os controles ainda não existem no DOM. Mas eu faço uma chamada $.validator.unobtrusive.parse($("#res")); que deve ser o suficiente para deixar o validador sobre os controles recém-carregados ...

Alguém pode ajudar?


Eu também tive o mesmo problema, mas no mvc 2. Eu passo pelo passo a passo como: weblogs.asp.net/imranbaloch/archive/2010/07/11/… Isso também pode te ajudar. weblogs.asp.net/imranbaloch/archive/2011/03/05/… Espero que ajude :)
Naresh Parmar

2
Observe que a unobtrusive.parsefunção leva um seletor como argumento, não um elemento.
Fred de

Respostas:


226

Se você tentar analisar um formulário que já foi analisado, ele não será atualizado

O que você pode fazer ao adicionar um elemento dinâmico ao formulário é

  1. Você pode remover a validação do formulário e revalidá-lo assim:

    var form = $(formSelector)
        .removeData("validator") /* added by the raw jquery.validate plugin */
        .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
    
    $.validator.unobtrusive.parse(form);
  2. Acesse os unobtrusiveValidationdados do formulário usando o datamétodo jquery :

    $(form).data('unobtrusiveValidation')

    em seguida, acesse a coleção de regras e adicione os novos atributos de elementos (o que é um tanto complicado).

Você também pode verificar este artigo sobre Aplicação de validação jquery discreta a conteúdo dinâmico em ASP.Net MVC para um plugin usado para adicionar elementos dinâmicos a um formulário. Este plugin usa a segunda solução.


17
Cara, você é demais, salvou totalmente o meu dia! Resposta incrível!
Dimitar Dimitrov de

Tive medo de convidá-lo sozinho. O script dessa página funciona perfeitamente.
cezarypiatek

Código, funciona muito bem - atualização rápida (se possível) 1. Estou usando knockout e obtendo os nomes dos campos parece um problema, então. $ .validator.unobtrusive.parseDynamicContent ('formulário'); (para obter todos os campos), no final ao enviar. 2. Isso é bom johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/… para dar-lhe uma maneira de nomear os campos (o que parece ser necessário? Estou usando jquery unbtrusive bootstrap ontop dos outros 2, então meu as circunstâncias são provavelmente diferentes)
Richard Housham

Apenas observe que todas as configurações específicas do formulário que você aplicou $("form").data("validator").settingsserão removidas $(formSelector).removeData("validator")e substituídas pelos padrões de $.validator.defaultsquando o formulário foi novamente analisado. Essa é uma ótima maneira de incluir campos dinâmicos, mas certifique-se de repetir qualquer código de inicialização personalizado em cada nova análise.
KyleMit

19

Como complemento à resposta de Nadeem Khedr ....

Se você carregou um formulário no seu DOM dinamicamente e depois chame

jQuery.validator.unobtrusive.parse(form); 

(com os bits extras mencionados) e, em seguida, enviaremos esse formulário usando ajax, lembre-se de chamar

$(form).valid()

que retorna verdadeiro ou falso (e executa a validação real) antes de enviar seu formulário.


oi, estou enfrentando o mesmo problema. estou mostrando minha visão dinâmica em um pop-up (caixa de diálogo jquery). as validações não obstrutivas não estão funcionando. onde chamo $ (form) .valid () na minha visão dinâmica ou em algum outro lugar?
mmssaann

Eu sempre evitava o envio do formulário, retornando false dentro de $ (form) .submit porque estava fazendo um envio AJAX, mas precisava de uma maneira de não chamar o envio AJAX quando a validação falhou. $ (form) .valid () é a resposta! Obrigado!
jgerman de

6

adicione isso ao seu _Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });

3
Isso é particularmente ineficiente.
Liam

5

Surpreendentemente, quando vi esta pergunta, os documentos oficiais do ASP.NET ainda não tinham nenhuma informação sobre o parse()método discreto ou como usá-lo com conteúdo dinâmico. Tomei a liberdade de criar um problema no repositório de documentos (referenciando a resposta original de @Nadeem) e enviar uma solicitação de pull para corrigi-lo. Essas informações agora estão visíveis na seção de validação do lado do cliente do tópico de validação de modelo.


3

teste isto:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}

2

Eu fui atingido pelo mesmo problema e nada funcionou, exceto este:

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

e adicione

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

onde você está tentando salvar o formulário.

Estava salvando o formulário por meio da chamada do Ajax.

Espero que isso ajude alguém.


1
Este é trabalhado para mim. Eu estava encontrando uma solução nos últimos dias, funciona no asp.net core 2. Obrigado.
Pradip Rupareliya

0

apenas copie este código novamente no final do código modal

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.