jQuery Validate Plugin - Wie erstelle ich eine einfache benutzerdefinierte Regel?

Wie erstellen Sie eine einfache, benutzerdefinierte Regel mit dem jQuery Validate-Plugin (using addMethod), das keinen regulären Ausdruck verwendet?

Welche Funktion würde beispielsweise eine Regel erstellen, die nur dann validiert wird, wenn mindestens eines aus einer Gruppe von Kontrollkästchen aktiviert ist?

Sie können eine einfache Regel erstellen, indem Sie Folgendes tun:

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

Und dann so anwenden:

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

Ändern Sie einfach den Inhalt der 'addMethod', um Ihre Kontrollkästchen zu überprüfen.

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

Benutzerdefinierte Regel und Datenattribut

Sie können eine benutzerdefinierte Regel erstellen und sie mithilfe des dataAttributs mithilfe der Syntax an ein Element anhängendata-rule-rulename="true";

So überprüfen Sie, ob mindestens eines aus einer Gruppe von Kontrollkästchen aktiviert ist:

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

Außerdem können Sie die Nachricht einer Regel mithilfe der Syntax überschreiben (dh: Mindestens 1 muss ausgewählt sein)data-msg-rulename="my new message" .

HINWEIS

Wenn Sie die data-rule-rulenameMethode verwenden, müssen Sie sicherstellen, dass der Regelname nur in Kleinbuchstaben geschrieben ist. Dies liegt daran, dass die jQuery-Validierungsfunktion dataRulesfür .toLowerCase()den Vergleich gilt und die HTML5- Spezifikation keine Großbuchstaben zulässt.

Arbeitsbeispiel

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

Danke, es hat funktioniert!

Hier ist der endgültige Code:

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

Sie können eine benutzerdefinierte Regel wie folgt hinzufügen:

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

Und füge es in der Regel so hinzu:

PhoneToggle: {
    booleanRequired: 'on'
}        

Für diesen Fall: Benutzeranmeldeformular, Benutzer muss einen Benutzernamen auswählen, der nicht verwendet wird.

Dies bedeutet, dass wir eine angepasste Validierungsregel erstellen müssen, die eine asynchrone http-Anfrage mit dem Remote-Server sendet.

1. Erstellen Sie ein Eingabeelement in Ihrem HTML:

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

2. Deklarieren Sie Ihre Regeln zur Formularvalidierung:

  $("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. Der Remote-Code sollte wie folgt lauten:

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