jak sprawdzić programowo, czy formularz jest poprawny przy użyciu wtyczki jQuery Validation

96

Mam formularz z kilkoma przyciskami i używam wtyczki jQuery Validation z http://jquery.bassistance.de/validate/ . Chcę tylko wiedzieć, czy istnieje sposób, w jaki mogę sprawdzić, czy formularz jest uznawany za ważny przez wtyczkę walidacji jquery z dowolnego miejsca w kodzie javascript.

Jaime Hablutzel
źródło
2
Dla tych, którzy chcą używać HTML5 i vanilla JS (bez jQuery): stackoverflow.com/questions/12470622/ ...
2540625

Odpowiedzi:

145

Użyj .valid()z wtyczki jQuery Validation:

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

Sprawdza, czy wybrany formularz jest prawidłowy lub czy wszystkie wybrane elementy są prawidłowe. validate () musi zostać wywołane w formularzu przed sprawdzeniem go przy użyciu tej metody.

Gdzie formularz z id='form_id'jest formularzem, który już go .validate()wywołał.

Andrew Whitaker
źródło
Dziękuję, robiłem już coś takiego: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Dzięki
Jaime Hablutzel
@jaime: Nie ma problemu, cieszę się, że mogę pomóc:)
Andrew Whitaker,
Właściwie nie ma potrzeby, aby najpierw uruchamiać .validate () na formularzu. Możesz po prostu zrobić, jeśli (form.valid ()) {} i to zadziała, gdzie „form” to element formularza, na który celujesz.
Gareth Daine
13
TypeError: $ ("# myForm"). Valid () nie jest funkcją.
artgrohe
4
Jeśli otrzymujesz TypeError valid() not a functionwtyczkę, dodaj wtyczkę do swojego pliku, ponieważ jest to wtyczka nie zawarta w bibliotece jquery, np. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd
34

Odpowiedź z 2015 roku: mamy to prosto z pudełka w nowoczesnych przeglądarkach, po prostu użyj API HTML5 CheckValidity z jQuery. Stworzyłem również moduł jquery-html5-validity, aby to zrobić:

npm install jquery-html5-validity

Następnie:

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

wtedy możesz biegać:

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

true
mikemaccana
źródło
1
czy możemy to nazwać całą formą, a nie każdym elementem?
parisssss
1
Świetny! właśnie to, czego szukałem
Fester
Wolę to zamiast validfunkcji, ponieważ nie wywołuje validatefunkcji i nie weryfikuje formularza.
KevinAdu
@parisssss Utworzono moduł, aby wykonać to na wielu zaznaczeniach zgodnie z żądaniem.
mikemaccana
22

@mikemaccana odpowiedź jest przydatna.

Użyłem też https://github.com/ryanseddon/H5F . Znalezione na http://microjs.com . Jest to rodzaj polyfillu i możesz go użyć w następujący sposób (w przykładzie użyto jQuery):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}
antongorodezkiy
źródło
ten jest lepszy, ponieważ nie uruchamia walidacji formularza
Bishoy Hanna
Pracuj z atrybutem wzorca. Dzięki.
MJ Vakili
5

iContribute: Nigdy nie jest za późno na właściwą odpowiedź.

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

W ten sposób podstawowa walidacja HTML5 dla pól „wymaganych” odbywa się bez zakłócania standardowego przesyłania przy użyciu wartości „name” formularza.

juan.benavides
źródło
Zauważ, że :inputi :visibleselektory są rozszerzeniami jQuery i nie są częścią CSS. Zobacz szczegóły w dokumentacji
Geradlus_RU
3
Formularz może być również nieprawidłowy z powodu dopasowania do wzorca, a nie tylko z powodu braku wymaganych pól
szczery
5

Dla grupy wejść możesz użyć ulepszonej wersji opartej na odpowiedzi @ mikemaccana

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

teraz możesz użyć tego do sprawdzenia, czy formularz jest ważny:

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

Możesz użyć tej samej techniki, aby uzyskać wszystkie komunikaty o błędach:

$.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
źródło
Stworzyłem wtyczkę jQuery, aby wykonać za Ciebie .each ().
mikemaccana
1

W przypadku Magento sprawdzanie poprawności formularza odbywa się jak poniżej.

Możesz spróbować tego:

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;
            }
        });
    });
});

Mam nadzieję, że to może ci pomóc!

Kazim Noorani
źródło