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

351

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?

Edward
quelle
41
95 Upvotes, ich denke, diese mittlere Dokumentation von Bassistance.de/jquery-plugins/jquery-plugin-validation ist möglicherweise unklar: P
Simon Arnold
Ich weiß nicht, ob Sie noch suchen (4 Jahre später), aber dies könnte helfen zu lernen.jquery.com/plugins/…
Ron van der Heijden

Antworten:

376

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.

Mark Spangler
quelle
23
Was ist das this.optional (Element) || in dieser Funktion tun? Es scheint, als ob jede Regel das hat, aber ich kann nicht sagen, warum es für jede Regel außer "erforderlich" relevant wäre.
Machineghost
38
Wenn Sie es weglassen, wird die Methode immer angewendet, auch wenn das Element nicht benötigt wird.
Mark Spangler
Ich gehe davon aus, dass this.optional (Element) true zurückgibt, wenn das Element null ist.
Tnunamak
12
Damit es ausgeführt werden kann, sollte "Betrag" die ID und der Name eines Elements auf der Seite sein.
Hoàng Long
6
Ja, Betrag bezieht sich auf das Namensattribut eines Eingabeformularfelds.
Mark Spangler
96
$(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"
            }
        }
    });
});
Tracy
quelle
Ich habe diese Methode ausprobiert und sie funktioniert ziemlich gut. Männer, die eine andere Nachricht als true zurückgeben, validieren jedoch immer noch nicht "ok". Sie steckt in "Benutzername ist bereits vergeben" fest. Was kann falsch sein? Ich habe auch überprüft, ob es richtig zurückgegeben wird, indem ich Werte wiedergebe, anstatt false und true zurückzugeben, und das funktioniert. scheint mir, dass mein Browser die Rückgabe false nicht aufnimmt, return true? das macht mich verrückt ..
Mikelangelo
1
Es hat funktioniert, indem eine Variable eingefügt wurde, die vor der Add-Methode als Ergebnis bezeichnet wird. Es scheint, dass die wahren, falschen Werte innerhalb der Erfolgsfunktion ordnungsgemäß registriert werden
Mikelangelo
23
Sei vorsichtig damit. Dies ist kein voll funktionsfähiger Code, da der "Erfolg" von AJAX nach "Rückantwort" zurückkommt. läuft, was zu unerwarteten Verhaltensweisen führt
Malachi
1
@ Malachi ist richtig. Dies kann durch einen Synchronisierungsaufruf behoben werden, aber das ist unangenehm. Ich frage mich, ob es einen anderen Weg gibt, dies zu erreichen. Es gibt, remotewie andere vorgeschlagen haben, aber soweit ich das beurteilen kann, erlaubt dies nur eine Validierung, so dass es nicht funktionieren würde, wenn Sie zwei asynchrone Validierungen benötigen oder je nach Antwort mehrere Fehlermeldungen haben.
Adam Bergmark
2
Es gibt eine entfernte Methode für die jquery-Validierung: jqueryvalidation.org/remote-method
TecHunter
70
// 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 }    
});
Commonpike
quelle
7
addClassRules ist eine schöne Ergänzung zur Antwort.
Vier
@commonpike Das ist genau das, wonach ich gesucht habe. Vielen Dank.
Simba
46

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>

BenG
quelle
2
nur für jquery.validate ver> = 1.10
Pavel Nazarov
Ich konnte dies für mein ganzes Leben nicht in der offiziellen Dokumentation finden, ich wünschte, sie hätten dies klarer gemacht. Vielen Dank!
Josh Mc
22

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");
Ciaran Bruen
quelle
13

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'
}        
Bogdan Kumpels
quelle
1

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" >
  1. 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'
      },
    },
  1. 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
Siwei Shen 申思维
quelle