jQuery Validate Plugin - Як створити просте користувацьке правило?

Як створити просте, власне правило, використовуючи плагін jQuery Validate (використовуючи addMethod), який не використовує регулярний вираз?

Наприклад, яка функція створила б правило, яке підтверджує лише, якщо принаймні одна з групи прапорців встановлена?

Ви можете створити просте правило, виконавши щось подібне:

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

А потім застосувати це так:

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

Просто змініть вміст "addMethod", щоб перевірити ваші прапорці.

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

Спеціальне правило та атрибут даних

Ви можете створити спеціальне правило та приєднати його до елемента за допомогою dataатрибута за допомогою синтаксисуdata-rule-rulename="true";

Отже, щоб перевірити, чи принаймні один із групи прапорців:

Правило даних -один або більше перевірено

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

І ви також можете змінити повідомлення правила (тобто: Atleast 1 повинен бути обраний) , використовуючи синтаксис data-msg-rulename="my new message".

ПРИМІТКА

Якщо ви використовуєте data-rule-rulenameметод, тоді вам потрібно буде переконатися, що ім'я правила є всіма малими літерами. Це відбувається тому, що функція перевірки jQuery dataRulesзастосовується .toLowerCase()для порівняння, а специфікація HTML5 не дозволяє мати великі регістри.

Робочий приклад

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

Спасибі, спрацювало!

Ось підсумковий код:

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

Ви можете додати спеціальне правило на зразок цього:

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

І додайте його як правило так:

PhoneToggle: {
    booleanRequired: 'on'
}        

У цьому випадку: форма реєстрації користувача, користувач повинен вибрати ім'я користувача, яке не прийнято.

Це означає, що ми повинні створити індивідуальне правило перевірки, яке надсилатиме запит async http із віддаленим сервером.

1. створити вхідний елемент у своєму html:

<input name="user_name" type="text" >

2. оголосити правила перевірки форми:

  $("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. віддалений код повинен бути таким:

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