Plugin Validasi jQuery - Bagaimana cara membuat aturan kustom sederhana?

351

Bagaimana Anda membuat aturan kustom yang sederhana menggunakan plugin jQuery Validate (using addMethod) yang tidak menggunakan regex?

Misalnya, fungsi apa yang akan membuat aturan yang memvalidasi hanya jika setidaknya satu dari sekelompok kotak centang dicentang?

Edward
sumber
41
95 upvotes, saya kira ini berarti dokumentasi bassistance.de/jquery-plugins/jquery-plugin- validasi mungkin tidak jelas: P
Simon Arnold
Tidak tahu apakah Anda masih mencari (4 tahun kemudian) tetapi ini bisa membantu learn.jquery.com/plugins/…
Ron van der Heijden

Jawaban:

376

Anda dapat membuat aturan sederhana dengan melakukan sesuatu seperti ini:

jQuery.validator.addMethod("greaterThanZero", function(value, element) {
    return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");

Dan kemudian menerapkan ini seperti ini:

$('validatorElement').validate({
    rules : {
        amount : { greaterThanZero : true }
    }
});

Cukup ubah konten 'addMethod' untuk memvalidasi kotak centang Anda.

Mark Spangler
sumber
23
Apa ini.optional (elemen) || lakukan di fungsi itu? Sepertinya setiap aturan memiliki itu, tapi saya tidak tahu mengapa itu relevan untuk aturan apa pun kecuali "wajib".
machineghost
38
Membiarkannya berarti bahwa metode tersebut akan selalu diterapkan, bahkan ketika elemen tersebut tidak diperlukan.
Mark Spangler
Saya menganggap bahwa this.optional (elemen) mengembalikan true jika elemen nol?
tnunamak
12
untuk menjalankannya, "jumlah" harus menjadi id dan nama beberapa elemen di halaman?
Hoàng Long
6
Ya, jumlah mengacu pada atribut nama dari beberapa bidang formulir input.
Mark Spangler
96
$(document).ready(function(){
    var response;
    $.validator.addMethod(
        "uniqueUserName", 
        function(value, element) {
            $.ajax({
                type: "POST",
                url: "http://"+location.host+"/checkUser.php",
                data: "checkUsername="+value,
                dataType:"html",
                success: function(msg)
                {
                    //If username exists, set response to true
                    response = ( msg == 'true' ) ? true : false;
                }
             });
            return response;
        },
        "Username is Already Taken"
    );

    $("#regFormPart1").validate({
        username: {
            required: true,
            minlength: 8,
            uniqueUserName: true
        },
        messages: {
            username: {
                required: "Username is required",
                minlength: "Username must be at least 8 characters",
                uniqueUserName: "This Username is taken already"
            }
        }
    });
});
Tracy
sumber
Saya mencoba metode ini dan ini bekerja dengan sangat baik, namun, para pria mengembalikan pesan selain daripada benar itu masih tidak memvalidasi "ok" itu terjebak dalam "Username is Already Diambil", apa yang salah? saya juga telah memeriksa bahwa itu dikembalikan dengan benar dengan menggema nilai bukannya mengembalikan yang salah dan benar, dan ini berfungsi. Sepertinya saya bahwa browser saya tidak mengambil return false, return true? ini membuatku gila ..
Mikelangelo
1
mendapatkannya berfungsi dengan memasukkan variabel yang disebut hasil sebelum addmethod, tampaknya benar, nilai-nilai palsu mendaftar dengan benar dalam fungsi sukses
Mikelangelo
23
Hati-hati dengan ini. Ini bukan kode yang berfungsi penuh karena "keberhasilan" AJAX akan kembali setelah 'respon balik;' berlari, menghasilkan perilaku yang tidak terduga
Maleakhi
1
@Malachi benar. Ini dapat diperbaiki dengan melakukan panggilan sinkronisasi tetapi itu tidak baik. Saya ingin tahu apakah ada cara lain untuk mencapai ini? Ada remoteseperti yang disarankan orang lain tetapi sejauh yang saya tahu hanya mengizinkan satu validasi, jadi tidak akan berfungsi jika Anda perlu dua validasi async atau memiliki beberapa pesan kesalahan tergantung pada respons.
Adam Bergmark
2
ada metode jarak jauh untuk memvalidasi jquery: jqueryvalidation.org/remote-method
TecHunter
70
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
        return jQuery.validator.methods['date'].call(
            this,value,element
        )||value==("0000/00/00");
    }, "Please enter a valid date."
);

// connect it to a css class
jQuery.validator.addClassRules({
    optdate : { optdate : true }    
});
Commonpike
sumber
7
addClassRules adalah tambahan yang bagus untuk jawabannya.
Empat
@commonpike Inilah yang sebenarnya saya cari, Terima kasih banyak.
Simba
46

Aturan Kustom dan atribut data

Anda dapat membuat aturan khusus dan melampirkannya ke elemen menggunakan dataatribut menggunakan sintaksdata-rule-rulename="true";

Jadi untuk memeriksa apakah setidaknya satu dari sekelompok kotak centang dicentang:

data-rule-oneormorechecked

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

addMethod

$.validator.addMethod("oneormorechecked", function(value, element) {
   return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

Dan Anda juga dapat mengganti pesan aturan (yaitu: Atleast 1 harus dipilih) dengan menggunakan sintaks data-msg-rulename="my new message".

CATATAN

Jika Anda menggunakan data-rule-rulenamemetode ini maka Anda harus memastikan bahwa nama aturan semua huruf kecil. Ini karena fungsi validasi jQuery dataRulesberlaku .toLowerCase()untuk membandingkan dan spesifikasi HTML5 tidak mengizinkan huruf besar.

Contoh Kerja

$.validator.addMethod("oneormorechecked", function(value, element) {
  return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form class="validate">
    red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
    blue<input type="checkbox" name="colours[]" value="blue" /><br/>
    green<input type="checkbox" name="colours[]" value="green" /><br/>
    <input type="submit" value="submit"/>
</form>

BenG
sumber
2
hanya untuk jquery.validate ver> = 1.10
Pavel Nazarov
Saya tidak bisa seumur hidup saya menemukan ini di dokumentasi resmi, saya berharap mereka membuat ini lebih jelas. Terima kasih!
Josh Mc
22

Terima kasih, itu berhasil!

Ini kode terakhir:

$.validator.addMethod("greaterThanZero", function(value, element) {
    var the_list_array = $("#some_form .super_item:checked");
    return the_list_array.length > 0;
}, "* Please check at least one check box");
Ciaran Bruen
sumber
13

Anda dapat menambahkan aturan khusus seperti ini:

$.validator.addMethod(
    'booleanRequired',
    function (value, element, requiredValue) {
        return value === requiredValue;
    },
    'Please check your input.'
);

Dan tambahkan sebagai aturan seperti ini:

PhoneToggle: {
    booleanRequired: 'on'
}        
Bogdan Mates
sumber
1

Untuk kasus ini: formulir pendaftaran pengguna, pengguna harus memilih nama pengguna yang tidak diambil.

Ini berarti kita harus membuat aturan validasi khusus, yang akan mengirim permintaan http async dengan server jarak jauh.

  1. buat elemen input di html Anda:
<input name="user_name" type="text" >
  1. nyatakan aturan validasi formulir Anda:
  $("form").validate({
    rules: {
      'user_name': {
        //  here jquery validate will start a GET request, to 
        //  /interface/users/is_username_valid?user_name=<input_value>
        //  the response should be "raw text", with content "true" or "false" only
        remote: '/interface/users/is_username_valid'
      },
    },
  1. kode remote harus seperti:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
Siwei Shen 申思维
sumber