Plugin Validasi jQuery - Bagaimana cara membuat aturan kustom sederhana?

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?

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.

$(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"
            }
        }
    });
});

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

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>

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

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'
}        

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" >

2. 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'
      },
    },

3. kode remote harus seperti:

class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end