javascript - online - jquery validate()



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

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

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

https://src-bin.com


Answer #1

Benutzerdefinierte Regel und Datenattribut

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

Um zu überprüfen, ob mindestens eine der Checkboxen aktiviert ist:

Data-Regel-Oneormorechecked

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

addMethode

$.validator.addMethod("oneormorechecked", function(value, element) {
   return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

Und Sie können die Nachricht einer Regel auch überschreiben (zB: Atleast 1 muss ausgewählt sein), indem Sie die Syntax data-msg-rulename="my new message" .

HINWEIS

Wenn Sie die Methode data-rule-rulename verwenden, müssen Sie sicherstellen, dass der Name der Regel aus Kleinbuchstaben besteht. Dies liegt daran, dass die jQuery-Validierungsfunktion dataRules .toLowerCase() zum Vergleichen verwendet und die HTML5 Spezifikation keine Großschreibung 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>


Answer #2

Danke, es hat funktioniert!

Hier ist der letzte 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");

Answer #3

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 benutze es so:

PhoneToggle: {
    booleanRequired: 'on'
}        

Hoffe das hilft


Answer #4

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 das so anwenden:

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

Ändern Sie einfach den Inhalt von 'addMethod', um Ihre Checkboxen zu validieren.


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




jquery-validate