it-swarm.com.de

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

Wie erstelle ich eine einfache, benutzerdefinierte Regel mit dem Plugin jQuery Validate (mit addMethod ), das keinen regulären Ausdruck verwendet?

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

338
Edward

Sie können eine einfache Regel erstellen, indem Sie folgendermaßen vorgehen:

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

Und dann dies so anwenden:

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

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

351
Mark Spangler
$(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"
            }
        }
    });
});
90
Tracy
// 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 }    
});
70
commonpike

Benutzerdefinierte Regel und Datenattribut

Sie können eine benutzerdefinierte Regel erstellen und mit dem Attribut data unter Verwendung der Syntax data-rule-rulename="true"; An ein Element anhängen.

So überprüfen Sie, ob mindestens eines aus einer Gruppe von Kontrollkästchen aktiviert 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");

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

[~ # ~] note [~ # ~]

Wenn Sie die Methode data-rule-rulename Verwenden, müssen Sie sicherstellen, dass der Regelname nur in Kleinbuchstaben geschrieben ist. Dies liegt daran, dass die jQuery-Validierungsfunktion dataRules.toLowerCase() zum Vergleichen und das HTML5 anwendet = 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>
41
BenG

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

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'
}        
11
Bogdan Mates

In diesem Fall: Benutzer-Anmeldeformular muss der Benutzer 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-Code:
<input name="user_name" type="text" >
  1. deklarieren Sie Ihre Formularvalidierungsregeln:
  $("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 Fernbedienungscode sollte wie folgt lauten:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end