como verificar se um formulário é válido programaticamente usando o plugin de validação jQuery

93

Eu tenho um formulário com alguns botões e estou usando o plug-in de validação jQuery de http://jquery.bassistance.de/validate/ . Só quero saber se há alguma maneira de verificar se o formulário é considerado em estado válido pelo plugin de validação jquery de qualquer lugar no meu código javascript.

Jaime Hablutzel
fonte
2
Para aqueles que desejam usar HTML5 e vanilla JS (sem jQuery): stackoverflow.com/questions/12470622/…
2540625

Respostas:

142

Use a .valid()partir do plugin de validação jQuery:

$("#form_id").valid();

Verifica se o formulário selecionado é válido ou se todos os elementos selecionados são válidos. validate () precisa ser chamado no formulário antes de verificá-lo usando este método.

Onde o formulário com id='form_id'é um formulário que já o .validate()chamou.

Andrew Whitaker
fonte
Obrigado, eu já estava fazendo algo como: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Obrigado
Jaime Hablutzel
@jaime: Sem problemas, prazer em ajudar:)
Andrew Whitaker
Na verdade, não há necessidade de executar .validate () no formulário primeiro. Você pode simplesmente fazer if (form.valid ()) {} e isso funcionará, onde 'form' é o elemento de formulário que você está almejando.
Gareth Daine
11
TypeError: $ ("# myForm"). Valid () não é uma função.
artgrohe
2
Se estiver recebendo um, TypeError valid() not a functionadicione o plugin ao seu arquivo, visto que é um plugin não incluído na biblioteca jquery, por exemplo. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd
33

Resposta de 2015: temos isso pronto para usar em navegadores modernos, basta usar a API HTML5 CheckValidity da jQuery. Também criei um módulo jquery-html5-valid para fazer isso:

npm install jquery-html5-validity

Então:

var $ = require('jquery')
require("jquery-html5-validity")($);

então você pode executar:

$('.some-class').isValid()

true
mikemaccana
fonte
1
podemos chamá-lo de forma completa e não em cada elemento?
parisssss de
1
Ótimo! exatamente o que eu estava procurando
Fester
Eu prefiro isso em vez da validfunção, pois não chama a validatefunção e valida seu formulário.
KevinAdu
@parisssss Fez um módulo para fazer isso em várias seleções conforme solicitado.
mikemaccana
19

A resposta @mikemaccana é útil.

E também usei https://github.com/ryanseddon/H5F . Encontrado em http://microjs.com . É algum tipo de polyfill e você pode usá-lo da seguinte maneira (jQuery é usado no exemplo):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}
antongorodezkiy
fonte
este é melhor, pois não aciona a validação do formulário
Bishoy Hanna
Trabalhe com o atributo de padrão. Obrigado.
MJ Vakili
4

iContribute: Nunca é tarde para uma resposta certa.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

Desta forma, a validação HTML5 básica para campos 'obrigatórios' ocorre sem interferir com o envio padrão usando os valores de 'nome' do formulário.

juan.benavides
fonte
Observe que os seletores :inpute :visiblesão extensões jQuery e não fazem parte do CSS. Ver detalhes nos documentos
Geradlus_RU
3
Um formulário também pode ser inválido devido à correspondência de padrões e não apenas porque faltam campos obrigatórios
frank
4

Para um grupo de entradas você pode usar uma versão melhorada com base na resposta de @mikemaccana

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

agora você pode usar isso para verificar se o formulário é válido:

if(!$(".form-control").isValid){
    return;
}

Você pode usar a mesma técnica para obter todas as mensagens de erro:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}
Matias Medina
fonte
Eu fiz um plugin jQuery para fazer o .each () para você.
mikemaccana
1

Para Magento, você verifica a validação do formulário por algo como abaixo.

Você pode tentar isto:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

Espero que isso possa ajudá-lo!

Kazim Noorani
fonte