jQuery Validate Plugin - Jak stworzyć prostą regułę niestandardową?

351

Jak stworzyć prostą, niestandardową regułę za pomocą wtyczki jQuery Validate (używając addMethod), która nie używa wyrażenia regularnego?

Na przykład, jaka funkcja stworzyłaby regułę, która sprawdza się tylko wtedy, gdy zaznaczone jest co najmniej jedno z grupy pól wyboru?

Edward
źródło
41
95 głosów pozytywnych, wydaje mi się, że to znaczy bassistance.de/jquery-plugins/jquery-plugin-validation dokumentacja może być niejasna: P
Simon Arnold
Nie wiem, czy nadal szukasz (4 lata później), ale to może pomóc w nauce.jquery.com/plugins/...
Ron van der Heijden

Odpowiedzi:

376

Możesz stworzyć prostą regułę, robiąc coś takiego:

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

A następnie zastosuj to w ten sposób:

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

Wystarczy zmienić zawartość „addMethod”, aby sprawdzić poprawność pól wyboru.

Mark Spangler
źródło
23
Co to jest this.optional (element) || robiąc w tej funkcji? Wygląda na to, że każda reguła ma taką zasadę, ale nie mogę powiedzieć, dlaczego miałaby być odpowiednia dla jakiejkolwiek reguły oprócz „wymaganej”.
machineghost
38
Pominięcie tego oznaczałoby, że metoda byłaby zawsze stosowana, nawet gdy element nie jest wymagany.
Mark Spangler
Rozumiem, że this.optional (element) zwraca true, jeśli element jest pusty?
tnunamak
12
aby się uruchomić, „kwota” powinna być identyfikatorem i nazwą jakiegoś elementu na stronie?
Hoàng Long
6
Tak, kwota odnosi się do atrybutu nazwy jakiegoś pola formularza wejściowego.
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
źródło
Wypróbowałem tę metodę i działa ona całkiem nieźle, jednak mężczyźni zwracający jakiekolwiek inne msg niż true nadal nie sprawdzają poprawności „ok” utknęła w „Nazwa użytkownika jest już zajęta”, co może być nie tak? Sprawdziłem również, czy jest on zwracany poprawnie przez echo wartości zamiast zwracania wartości false i true, i to działa. wydaje mi się, że moja przeglądarka nie odbiera zwrotu false, return true? doprowadza mnie to do szału ...
Mikelangelo
1
sprawił, że zadziałało, wstawiając zmienną, która nazywa się wynikiem przed dodaniem metody, wydaje się prawdą, fałszywe wartości rejestrują się poprawnie w funkcji sukcesu
Mikelangelo
23
Uważaj na to. Nie jest to w pełni funkcjonalny kod, ponieważ „sukces” AJAX powróci po „odpowiedzi zwrotnej”; uruchamia się, powodując nieoczekiwane zachowania
Malachi
1
@Malachi jest poprawny. Można to naprawić, wykonując zamiast tego połączenie synchronizujące, ale to paskudne. Zastanawiam się, czy jest jakiś inny sposób na osiągnięcie tego? Są, remotejak sugerują inni, ale o ile mogę stwierdzić, że zezwala tylko na jedną walidację, więc nie zadziałałoby, gdybyś potrzebował dwóch walidacji asynchronicznych lub miał kilka komunikatów o błędach w zależności od odpowiedzi.
Adam Bergmark
2
istnieje zdalna metoda sprawdzania poprawności jquery: 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 }    
});
pospolity
źródło
7
addClassRules to miły dodatek do odpowiedzi.
4
@commonpike Właśnie tego szukałem, wielkie dzięki.
Simba
46

Niestandardowa reguła i atrybut danych

Możesz utworzyć niestandardową regułę i dołączyć ją do elementu za pomocą dataatrybutu za pomocą składnidata-rule-rulename="true";

Aby sprawdzić, czy co najmniej jedno z pól wyboru jest zaznaczone:

sprawdzono jedną regułę danych

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

Możesz także przesłonić komunikat reguły (tzn. Należy wybrać przynajmniej 1) , używając składni data-msg-rulename="my new message".

UWAGA

Jeśli używasz tej data-rule-rulenamemetody, musisz upewnić się, że nazwa reguły jest pisana małymi literami. Wynika to z faktu, że funkcja sprawdzania poprawności jQuery dataRulesma zastosowanie .toLowerCase()do porównywania, a specyfikacja HTML5 nie zezwala na wielkie litery.

Przykład roboczy

$.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
źródło
2
tylko dla jquery.validate ver> = 1.10
Pavel Nazarov
Nie mogłem przez całe życie znaleźć tego w oficjalnej dokumentacji, szkoda, że ​​nie wyjaśnili tego. Dzięki!
Josh Mc
22

Dzięki, działało!

Oto końcowy kod:

$.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
źródło
13

Możesz dodać niestandardową regułę:

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

I dodaj to z reguły tak:

PhoneToggle: {
    booleanRequired: 'on'
}        
Bogdan Mates
źródło
1

W tym przypadku: formularz rejestracji użytkownika, użytkownik musi wybrać nazwę użytkownika, która nie zostanie podjęta.

Oznacza to, że musimy utworzyć niestandardową regułę sprawdzania poprawności, która wyśle ​​żądanie asynchroniczne http ze zdalnym serwerem.

  1. utwórz element wejściowy w swoim HTML:
<input name="user_name" type="text" >
  1. zadeklaruj zasady walidacji formularza:
  $("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. kod zdalny powinien wyglądać następująco:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
Siwei Shen 申思维
źródło