bagaimana cara memeriksa apakah suatu formulir valid secara terprogram menggunakan jQuery Validation Plugin

96

Saya memiliki formulir dengan beberapa tombol dan saya menggunakan jQuery Validation Plugin dari http://jquery.bassistance.de/validate/ . Saya hanya ingin tahu apakah ada cara saya dapat memeriksa apakah formulir dianggap dalam keadaan valid oleh plugin validasi jquery dari mana saja di kode javascript saya.

javascript jquery jquery-validate

— Jaime Hablutzel
sumber

2

Bagi mereka yang ingin menggunakan HTML5 dan vanilla JS (tanpa jQuery): stackoverflow.com/questions/12470622/…

— 2540625

145

Gunakan .valid()dari plugin jQuery Validation:

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

Memeriksa apakah formulir yang dipilih valid atau apakah semua elemen yang dipilih valid. validate () perlu dipanggil pada formulir sebelum memeriksanya menggunakan metode ini.

Dimana formulir dengan id='form_id'adalah formulir yang sudah .validate()dipanggil sebelumnya.

— Andrew Whitaker
sumber

Terima kasih, saya sudah melakukan sesuatu seperti: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {adaErrors = true;}}); : S Terima kasih

— Jaime Hablutzel

@jaime: Tidak masalah, senang membantu:)

— Andrew Whitaker

Sebenarnya tidak perlu menjalankan .validate () di formulir terlebih dahulu. Anda cukup melakukan if (form.valid ()) {} dan itu akan berhasil, di mana 'form' adalah elemen form yang Anda targetkan.

— Gareth Daine

13

TypeError: $ ("# myForm"). Valid () bukan sebuah fungsi.

— artgrohe

4

Jika Anda menerima TypeError valid() not a functiontambahkan plugin ke file Anda karena pluginnya tidak termasuk dalam jquery library mis. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

— StackEdd

34

Jawaban 2015: kami memiliki ini di luar kotak pada browser modern, cukup gunakan API CheckValidity HTML5 dari jQuery. Saya juga telah membuat modul jquery-html5-validity untuk melakukan ini:

npm install jquery-html5-validity

Kemudian:

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

maka Anda dapat menjalankan:

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

true

— mikemaccana
sumber

1

dapatkah kita menyebutnya dalam bentuk keseluruhan bukan pada setiap elemen?

— parisssss

1

Bagus! hanya apa yang saya cari

— Fester

Saya lebih suka ini daripada validfungsi karena tidak memanggil validatefungsi dan memvalidasi formulir Anda.

— KevinAdu

@parisssss Membuat modul untuk melakukannya pada banyak pilihan seperti yang diminta.

— mikemaccana

24

Jawaban @mikemaccana bermanfaat.

Dan saya juga menggunakan https://github.com/ryanseddon/H5F . Ditemukan di http://microjs.com . Ini semacam polyfill dan Anda dapat menggunakannya sebagai berikut (contoh jQuery digunakan):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}

— antongorodezkiy
sumber

yang ini lebih baik karena tidak memicu validasi formulir

— Bishoy Hanna

Bekerja dengan atribut pola. Terima kasih.

— MJ Vakili

6

valid ().

http://docs.jquery.com/Plugins/Validation/valid

— ysrb
sumber

5

iContribute: Tidak ada kata terlambat untuk jawaban yang benar.

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

Dengan cara ini validasi HTML5 dasar untuk bidang 'wajib' dilakukan tanpa mengganggu pengiriman standar menggunakan nilai 'nama' formulir.

— juan.benavides
sumber

Perhatikan, itu :inputdan :visiblepenyeleksi adalah ekstensi jQuery dan bukan bagian dari CSS. Lihat detailnya di dokumen

— Geradlus_RU

3

Formulir juga dapat menjadi tidak valid karena pencocokan pola dan bukan hanya karena bidang yang wajib diisi tidak ada

— terang

5

Untuk sekelompok masukan Anda dapat menggunakan versi yang lebih baik berdasarkan jawaban @ mikemaccana

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

sekarang Anda dapat menggunakan ini untuk memverifikasi apakah formulir tersebut valid:

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

Anda bisa menggunakan teknik yang sama untuk mendapatkan semua pesan kesalahan:

$.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
sumber

Saya telah membuat plugin jQuery untuk melakukan .each () untuk Anda.

— mikemaccana

1

Untuk Magento, Anda memeriksa validasi formulir dengan sesuatu seperti di bawah ini.

Anda dapat mencoba ini:

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

Semoga ini bisa membantu Anda!

— Kazim Noorani
sumber