jQuery Validate Plugin - Wie erstellt man eine einfache benutzerdefinierte Regel?

Question

Wie erstellt man eine einfache, benutzerdefinierte Regel mit dem jQuery Validate Plugin (mit addMethod ), die keine Regex verwendet?

Welche Funktion würde zum Beispiel eine Regel erstellen, die nur dann überprüft wird, wenn mindestens eines der Kontrollkästchen einer Gruppe markiert ist?

Answer 1

Sie können eine einfache Regel erstellen, indem Sie etwa so vorgehen:

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

Und dies dann so anwenden:

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

Ändern Sie einfach den Inhalt der "addMethod", um Ihre Kontrollkästchen zu validieren.

Answer 2

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

Answer 3

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

Answer 4

Benutzerdefinierte Regel und Datenattribut

Sie können eine benutzerdefinierte Regel erstellen und sie an ein Element anhängen, indem Sie die data Attribut mit der Syntax data-rule-rulename="true";

Um also zu prüfen, ob mindestens eines einer Gruppe von Kontrollkästchen markiert ist:

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

Und Sie können auch die Meldung einer Regel überschreiben (d.h.: Mindestens 1 muss ausgewählt werden) durch Verwendung der Syntax data-msg-rulename="my new message" .

ANMERKUNG

Wenn Sie die data-rule-rulename Methode müssen Sie sicherstellen, dass der Name der Regel in Kleinbuchstaben geschrieben ist. Das liegt daran, dass die jQuery-Validierungsfunktion dataRules gilt .toLowerCase() zu vergleichen und die HTML5 spec erlaubt keine Großbuchstaben.

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>

Answer 5

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