jQuery Validate Plugin - Come creare una semplice regola personalizzata?

Come si crea una regola semplice e personalizzata utilizzando il plug-in jQuery Validate (utilizzando addMethod) che non utilizza un regex?

Ad esempio, quale funzione creerebbe una regola che convalida solo se è selezionata almeno una delle caselle di controllo?

Puoi creare una semplice regola facendo una cosa del genere:

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

E quindi applicandolo in questo modo:

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

Basta modificare il contenuto di 'addMethod' per convalidare le caselle di controllo.

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

Regola personalizzata e attributo dati

È possibile creare una regola personalizzata e collegarla a un elemento utilizzando l' dataattributo utilizzando la sintassidata-rule-rulename="true";

Quindi per verificare se almeno uno di un gruppo di caselle di controllo è spuntato:

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

E puoi anche sovrascrivere il messaggio di una regola (cioè: Atleast 1 deve essere selezionato) usando la sintassi data-msg-rulename="my new message".

NOTA

Se si utilizza il data-rule-rulenamemetodo, è necessario assicurarsi che il nome della regola sia tutto minuscolo. Questo perché la funzione di convalida jQuery si dataRulesapplica .toLowerCase()al confronto e le specifiche HTML5 non consentono maiuscole.

Esempio di lavoro

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

Grazie, ha funzionato!

Ecco il codice finale:

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

Puoi aggiungere una regola personalizzata come questa:

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

E aggiungilo come una regola come questa:

PhoneToggle: {
    booleanRequired: 'on'
}        

In questo caso: modulo di registrazione utente, l'utente deve scegliere un nome utente non utilizzato.

Ciò significa che dobbiamo creare una regola di convalida personalizzata, che invierà una richiesta http asincrona con il server remoto.

1. crea un elemento di input nel tuo html:

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

2. dichiarare le regole di convalida del modulo:

  $("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. il codice remoto dovrebbe essere come:

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