Validação do Clientside usando o aplicativo Xforms - MVC

9

Estou tentando realizar uma validação de formulário do lado do cliente usando um episerver xform o html compilado se parece com isso: link Alguma orientação sobre como conseguir isso? Estou pensando em usar a biblioteca .validate, mas terei um problema se adicionarmos um novo controle ao formulário por meio do epi. Também tentei usar uma chamada AJAX com algo parecido com isto:

 $.ajax({
        url: "/industry/XFormPost?XFormId=0643b992-56c6-40a5-91eb-c557443630e0&failedAction=Failed&successAction=Success&contentId=36",
        data: $(this).serialize(),
        type: "POST",
        success: function () {
            alert('Hello this is a valid form');
        }
    });

ele dispara o evento, mas não salva meu formulário no banco de dados. mesmo que todos os campos que eu passei sejam válidos

    
por IndieTech Solutions 15.10.2015 в 03:19
fonte

2 respostas

2

Lamentavelmente, o XForms em seu estado atual é notoriamente complicado de se trabalhar quando se trata de customização. Para renderização e / ou validação personalizada, geralmente implementamos nossa própria renderização completamente.

Existem vários artigos sobre como alcançá-lo, mas isso pode consumir muito tempo. : /

A validação do lado do cliente só pode ser obtida anexando manipuladores de eventos ao HTML gerado padrão, mas isso geralmente não é suficiente. Embora isso possa ser combinado com eventos do lado do servidor, é difícil personalizar adequadamente como o XForms funciona para o usuário final sem renderização personalizada.

    
por Ted Nyberg 19.10.2015 / 10:15
fonte
0

Veja o que acabei fazendo, para incluir uma validação completa do lado do cliente para o meu formulário usando a biblioteca .validate() js. Tenho certeza de que há outras maneiras de conseguir isso, então aqui está minha versão:

O EpiServer tem um campo de classe que você pode usar para todos os seus controles (vergonhosamente não há nenhum campo escondido, mas essa é uma história diferente). Então eu adicionei uma classe css chamada 'requiredField' e adicionei classes extras para diferentes tipos de validações, como 'emailField' para validação de email e 'halfWidthField' para fins de layout CSS para o meu formulário.

Paravalidarotrabalho,precisoadicionarosatributosnecessários.Paraconseguirisso,crieiumpequenoscriptparaadicionaressesatributoscombasenosnomesdeclassequeeujáatribuí.meucódigoJSéparecidocomisto:

$(".contact-form").find(".requiredfield").each(function () {
        $(this).prop('required', true);
    });
    $(".contact-form").find(".emailfield").each(function () {
        $(this).attr('type', 'email');
    });

por último: para que a chamada do ajax acontecesse, eu mudei a visualização e fiz uma chamada Ajax em vez de uma chamada normal.

 @using (Ajax.BeginForm("", "",
                     new AjaxOptions
                     {
                         HttpMethod = "POST",
                         Url = Model.ActionUri
                     }
                     ))
                 {
                     Html.RenderXForm(Model.Form);
                 }

Funciona como esperado e posso personalizar a validação conforme necessário. A forma final é algo como isto:

    
por IndieTech Solutions 27.10.2015 / 18:17
fonte