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

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?

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.

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.

adicione isso ao seu _Layout.cshtml

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

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.

teste isto:

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

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.

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>

;)