jQuery Validate Plugin - Jak stworzyć prostą regułę niestandardową?

Jak stworzyć prostą, niestandardową regułę za pomocą wtyczki jQuery Validate (używając addMethod), która nie używa wyrażenia regularnego?

Na przykład, jaka funkcja stworzyłaby regułę, która sprawdza się tylko wtedy, gdy zaznaczone jest co najmniej jedno z grupy pól wyboru?

Możesz stworzyć prostą regułę, robiąc coś takiego:

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

A następnie zastosuj to w ten sposób:

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

Wystarczy zmienić zawartość „addMethod”, aby sprawdzić poprawność pól wyboru.

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

Niestandardowa reguła i atrybut danych

Możesz utworzyć niestandardową regułę i dołączyć ją do elementu za pomocą dataatrybutu za pomocą składnidata-rule-rulename="true";

Aby sprawdzić, czy co najmniej jedno z pól wyboru jest zaznaczone:

sprawdzono jedną regułę danych

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

Możesz także przesłonić komunikat reguły (tzn. Należy wybrać przynajmniej 1) , używając składni data-msg-rulename="my new message".

UWAGA

Jeśli używasz tej data-rule-rulenamemetody, musisz upewnić się, że nazwa reguły jest pisana małymi literami. Wynika to z faktu, że funkcja sprawdzania poprawności jQuery dataRulesma zastosowanie .toLowerCase()do porównywania, a specyfikacja HTML5 nie zezwala na wielkie litery.

Przykład roboczy

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

Dzięki, działało!

Oto końcowy kod:

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

Możesz dodać niestandardową regułę:

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

I dodaj to z reguły tak:

PhoneToggle: {
    booleanRequired: 'on'
}        

W tym przypadku: formularz rejestracji użytkownika, użytkownik musi wybrać nazwę użytkownika, która nie zostanie podjęta.

Oznacza to, że musimy utworzyć niestandardową regułę sprawdzania poprawności, która wyśle ​​żądanie asynchroniczne http ze zdalnym serwerem.

1. utwórz element wejściowy w swoim HTML:

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

2. zadeklaruj zasady walidacji formularza:

  $("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. kod zdalny powinien wyglądać następująco:

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