Como disparar manualmente a validação com o jQuery validate?

143

Quero disparar a validação manualmente, incluindo a exibição de mensagens de erro com o jQuery Validate .

O cenário que estou tentando realizar é um formulário como este:

<form>
 <input id=i1> <button id=b1>
 <input id=i2> <button id=b2>
</form>

Ao clicar b1, somente i1deve ser validado. Ao clicar b2, somente i2deve ser validado. No entanto, todos os campos devem ser publicados. Como posso fazer isso? Pensei em manipular o evento click b1/b2e validar manualmente uma parte do formulário.

usr
fonte
Por que não validá-lo manualmente? Este plugin é muito útil para validar todo o formulário, mas, neste caso, mais situável, valide o formulário manualmente.
Anatoliy
O formulário não é maior do que no meu exemplo. Eu quero automatizado.
usr

Respostas:

176

Essa biblioteca parece permitir a validação de elementos únicos. Basta associar um evento de clique ao seu botão e tente o seguinte:

$("#myform").validate().element("#i1");

Exemplos aqui:

https://jqueryvalidation.org/Validator.element

Roberto Aloi
fonte
15
Isso valida o formulário inteiro ... para validar apenas 1 campo, a maneira correta é esta: stackoverflow.com/a/12195091/114029
Leniel Maccaferri
Por qualquer motivo, não recebo o texto de erro personalizado ao validar dessa maneira. Pode ter algo a ver com o fato de eu estar executando dentro de um diálogo Durandal. Tendo toneladas de problemas com essa estrutura no referido contexto.
usar o seguinte código
@Roberto Aloi: O link está obsoleto
Sebastian
@Sebastian Obrigado pelo ping, atualizou o link agora!
Roberto Aloi 8/03
113

Ou pode-se simplesmente usar: $('#myElem').valid()

if ($('#myElem').valid()){
   // will also trigger unobtrusive validation only for this element if in place 
   // add your extra logic here to execute only when element is valid
}

Observe que validate()precisa ser chamado no formulário antes de verificar usando este método.

Link da documentação: https://jqueryvalidation.org/valid/

Anastasiosyal
fonte
15
validate()precisa ser chamado no formulário antes de verificar usando este método.
GETah
eu tenho consulta como esta if ($ ( '# myElem') val () == '2017/04/12'.) {seleção errada data} else {seleção válida}
srinivas gowda
29

Minha abordagem foi a seguinte. Agora, eu só queria que meu formulário fosse validado quando uma caixa de seleção específica foi clicada / alterada:

$('#myForm input:checkbox[name=yourChkBxName]').click(
 function(e){
  $("#myForm").valid();
}
)
Yoosaf Abdulla
fonte
Minha consulta if ($ ('# someID) ===' 2017-4-12) {$ ("# myform"). Validate (). Element ("# i1"). Valid ();} else {$ ( ... "#myform") validate () elemento ( "# i1") inválido ();} é o código correto
srinivas gowda
14

Conforme escrito na documentação , a maneira de acionar a validação de formulário programaticamente é invocar validator.form ()

var validator = $( "#myform" ).validate();
validator.form();
Eva M
fonte
2
Isso não responde à pergunta, já que se trata de validar apenas um campo específico. Mas é exatamente o que eu estava procurando. Obrigado!
jlh 28/01
4

Existe um método não documentado a partir da versão 1.14

validator.checkForm()

Este método é validado silenciosamente para retornar verdadeiro / falso. Não dispara mensagens de erro.

user5936891
fonte
9
indocumentado = pode quebrar a qualquer momento.
usr
2

Eva M de cima, quase teve a resposta conforme postada acima (Obrigado Eva M!):

var validator = $( "#myform" ).validate();
validator.form();

Essa é quase a resposta, mas causa problemas, mesmo no plug-in de validação de jquery mais atualizado a partir de 13 de dezembro de 2018. O problema é que, se alguém copia diretamente esse exemplo, e NUNCA chama ".validate ()" mais de uma vez , o processamento do foco / chave da validação pode ser interrompido e a validação pode não mostrar erros corretamente.

Aqui está como usar a resposta de Eva M e garantir que esses problemas de foco / chave / ocultação de erros não ocorram:

1) Salve seu validador em uma variável / global.

var oValidator = $("#myform").validate();

2) NÃO chame $ ("# myform"). Validate () EVER novamente.

Se você chamar $ ("# myform"). Validate () mais de uma vez, isso poderá causar problemas de foco / chave / ocultação de erros.

3) Use a variável / global e o formulário de chamada.

var bIsValid = oValidator.form();
JSB
fonte
1

No meu caso semelhante, eu tinha minha própria lógica de validação e só queria usar a validação do jQuery para mostrar a mensagem. Foi o que eu fiz.

//1) Enable jQuery validation
var validator = $('#myForm').validate();

$('#myButton').click(function(){
  //my own validation logic here
  //.....
  //2) when validation failed, show the error message manually
  validator.showErrors({
    'myField': 'my custom error message'
  });
});

user538220
fonte
0

Eu tentei funcionou tnx @Anastasiosyal eu quero compartilhá-lo nesta discussão.

Não sei como os campos de entrada não foram acionados quando esvaziei os campos. Mas consegui acionar cada campo obrigatório individualmente usando:

$(".setting-p input").bind("change", function () {
        //Seven.NetOps.validateSettings(Seven.NetOps.saveSettings);
        /*$.validator.unobtrusive.parse($('#saveForm'));*/
        $('#NodeZoomLevel').valid();
        $('#ZoomLevel').valid();
        $('#CenterLatitude').valid();
        $('#CenterLongitude').valid();
        $('#NodeIconSize').valid();
        $('#SaveDashboard').valid();
        $('#AutoRefresh').valid();
    });

aqui está a minha opinião

@using (Html.BeginForm("SaveSettings", "Settings", FormMethod.Post, new {id = "saveForm"}))
{
    <div id="sevenRightBody">
        <div id="mapMenuitemPanel" class="setingsPanelStyle" style="display: block;">
            <div class="defaultpanelTitleStyle">Map Settings</div>
            Customize the map view upon initial navigation to the map view page.
            <p class="setting-p">@Html.LabelFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.NodeZoomLevel) @Html.ValidationMessageFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.ZoomLevel) @Html.ValidationMessageFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLatitude) @Html.ValidationMessageFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLongitude) @Html.ValidationMessageFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.NodeIconSize)</p>
            <p class="setting-p">@Html.SliderSelectFor(x => x.NodeIconSize) @Html.ValidationMessageFor(x => x.NodeIconSize)</p>
        </div>

e minha entidade

   public class UserSetting : IEquatable<UserSetting>
    {
        [Required(ErrorMessage = "Missing Node Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Node Zoom Level must be between {1} and {2}.")]
        [DefaultValue(100000)]
        [Display(Name = "Node Zoom Level")]
        public double NodeZoomLevel { get; set; }

        [Required(ErrorMessage = "Missing Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Zoom Level must be between {1} and {2}.")]
        [DefaultValue(1000000)]
        [Display(Name = "Zoom Level")]
        public double ZoomLevel { get; set; }

        [Range(-90, 90, ErrorMessage = "Latitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Latitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Latitude")]
        public double CenterLatitude { get; set; }

        [Range(-180, 180, ErrorMessage = "Longitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Longitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Longitude")]
        public double CenterLongitude { get; set; }

        [Display(Name = "Save Dashboard")]
        public bool SaveDashboard { get; set; }
.....
}
bherto39
fonte
3
Esta resposta assume um ambiente .Net quando a pergunta se refere explicitamente à validação do jQuery.
Kenogu Labz
0

Existe uma boa maneira de usar os validate()parâmetros em um formulário e desejar validar um campo do formulário manualmente posteriormente:

var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));

Documentação: Validator.element ()

Tobi G.
fonte