jQuery Doğrulama Eklentisi kullanılarak bir formun programlı olarak geçerli olup olmadığı nasıl kontrol edilir


96

Birkaç düğmeli bir formum var ve http://jquery.bassistance.de/validate/ adresindeki jQuery Doğrulama Eklentisini kullanıyorum . Javascript kodumun herhangi bir yerinden jquery doğrulama eklentisi tarafından formun geçerli durumda kabul edilip edilmediğini kontrol etmenin bir yolu olup olmadığını bilmek istiyorum.


2
HTML5 ve vanilla JS (jQuery yok) kullanmak isteyenler için: stackoverflow.com/questions/12470622/…
2540625

Yanıtlar:


145

.valid()JQuery Doğrulama eklentisinden kullanın :

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

Seçilen formun geçerli olup olmadığını veya seçilen tüm öğelerin geçerli olup olmadığını kontrol eder. validate (), bu yöntemi kullanarak kontrol etmeden önce formda çağrılmalıdır.

Formun id='form_id'daha önce .validate()çağrılmış bir form olduğu yer.


Teşekkür ederim, zaten şöyle bir şey yapıyordum: $ j ("# myform label.error"). Her biri (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Teşekkürler
Jaime Hablutzel

@jaime: Sorun değil, yardımcı olduğum için memnunum:)
Andrew Whitaker

Aslında önce form üzerinde .validate () çalıştırılmasına gerek yoktur. Basitçe if (form.valid ()) {} yapabilirsiniz ve bu işe yarayacaktır, burada 'form' hedeflediğiniz form öğesidir.
Gareth Daine

13
TypeError: $ ("# myForm"). Valid () bir işlev değil.
artgrohe

4
Bir TypeError valid() not a functioneklenti alıyorsanız , eklenti jquery kitaplığında bulunmayan bir eklenti olduğu için dosyanıza ekleyin, örn. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd

34

2015 cevabı: Bunu modern tarayıcılarda kutudan çıkardık , jQuery'nin HTML5 CheckValidity API'sini kullanmanız yeterli . Bunu yapmak için bir jquery-html5-geçerlilik modülü de yaptım :

npm install jquery-html5-validity

Sonra:

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

o zaman çalıştırabilirsiniz:

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

true

1
her elementte değil bütün formda diyebilir miyiz?
parisssss

1
Harika! tam aradığım şey
Fester

validFonksiyonu çağırmadığı validateve formunuzu doğrulamadığı için fonksiyon yerine bunu tercih ederim .
KevinAdu

@parisssss İstendiği gibi birden çok seçim üzerinde yapmak için bir modül yaptı.
mikemaccana



5

iContribute: Doğru bir yanıt için asla geç değildir.

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

Bu şekilde, 'zorunlu' alanlar için temel HTML5 doğrulaması, formun 'ad' değerlerini kullanarak standart gönderime müdahale etmeden gerçekleşir.


Bu :inputve :visibleseçicilerin jQuery uzantıları olduğunu ve CSS'nin parçası olmadığını unutmayın. Belgelerdeki
Geradlus_RU

3
Bir form, desen eşleşmesi nedeniyle de geçersiz olabilir ve yalnızca gerekli alanların eksik olması nedeniyle değil
frank

5

Bir grup girdi için, @ mikemaccana'nın cevabına göre geliştirilmiş bir sürümü kullanabilirsiniz.

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

şimdi formun geçerli olup olmadığını doğrulamak için bunu kullanabilirsiniz:

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

Tüm hata mesajlarını almak için aynı tekniği kullanabilirsiniz:

$.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;
}

Sizin için .each () işlemini yapmak için bir jQuery eklentisi yaptım.
mikemaccana

1

Magento için, aşağıdaki gibi formun geçerliliğini kontrol edersiniz.

Bunu deneyebilirsiniz:

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

Umarım bu size yardımcı olabilir!

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.