Jak możemy określić reguły wtyczki sprawdzania poprawności jQuery według klasy?

Question

jQuery Validation plugin działa świetnie i jest bardzo łatwy w użyciu:

$(".selector").validate({ 
}) 

Tylko poprzez ustawienie klas css jak „wymaganego Wyślij”, wyświetlony zostanie komunikat domyślny.

Muszę jednak dostosować komunikaty. Dokumentacja mówi, można określić reguły przy użyciu pary klucz-wartość dla pierwiastków i ich odpowiednich komunikatów:

$(".selector").validate({ 
    rules: { 
    name: "required", 
    email: { 
     required: true, 
     email: true 
    } 
    }, 
    messages: { 
    name: "Please specify your name", 
    email: { 
     required: "We need your email address to contact you", 
     email: "Your email address must be in the format of name@domain.com" 
    } 
    } 
}) 

Ale to nie jest możliwe, aby określić reguły dla każdego elementu formularza, zwłaszcza kontroli serwerowych generowanych w ASP. NETTO. Czy możliwe jest określenie reguł, które miałyby zastosowanie do WSZYSTKICH elementów? A może w jakiś sposób mogę użyć selektora klasy?

Próbowałem następujących, ale to nie działa:

$("#frmMyForm").validate 
({ 
    rules: 
    { 
     $(".required email"): 
     { 
      required: true, 
      email: true 
     } 
    }, 
    messages: 
    { 
     $(".required email"): 
     { 
      required: "Please enter your email address", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}); 

To wydawało się, że błąd składni - plugin nic nie zrobił. Następnie próbowałem:

$("#frmMyForm").validate 
({ 
    rules: 
    { 
     ".required email": 
     { 
      required: true, 
      email: true 
     } 
    }, 
    messages: 
    { 
     ".required email": 
     { 
      required: "Please enter your email address", 
      email: "Your email address must be in the format of name@domain.com" 
     } 
    } 
}); 

Nie wystąpił błąd składni - wtyczka działała, ale ignorowała reguły/niestandardowe wiadomości. Czy ktoś tutaj użył plugin jQuery Validation? Jeśli tak, w jaki sposób zastosowałeś reguły/niestandardowe wiadomości do wielu elementów?

Dzięki!

Answer 1

Dla celów moim przykładzie jest to podstawa kod zaczynający:

HTML:

<input type="text" name="field_1" /> 
<input type="text" name="field_2" /> 
<input type="text" name="field_3" /> 

JS:

$('#myForm').validate({ 
    rules: { 
     field_1: { 
      required: true, 
      number: true 
     }, 
     field_2: { 
      required: true, 
      number: true 
     }, 
     field_3: { 
      required: true, 
      number: true 
     } 
    } 
}); 

DEMO: http://jsfiddle.net/rq5ra/

---

UWAGA: Bez względu na to, który poniżej technika służy do przypisania reguł, jest to bezwzględny wymóg wtyczki, że każdy element ma unikalnyname atrybut.

---

Wariant 1a) można przypisać klasy do pól w oparciu o pożądanych wspólnych zasad, a następnie przypisać te zasady do klas. Możesz również przypisać niestandardowe wiadomości.

HTML:

<input type="text" name="field_1" class="num" /> 
<input type="text" name="field_2" class="num" /> 
<input type="text" name="field_3" class="num" /> 

.rules() metoda koniecznością nazwać po powołuje .validate()

JS:

$('#myForm').validate({ 
    // your other plugin options 
}); 

$('.num').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true, 
     messages: { 
      required: "your custom message", 
      number: "your custom message" 
     } 
    }); 
}); 

DEMO: http://jsfiddle.net/rq5ra/1/

Wariant 1b) samo jak wyżej, ale zamiast używać class, pasuje wspólną część atrybutu name:

$('[name*="field"]').each(function() { 
    $(this).rules('add', { 
     required: true, 
     number: true, 
     messages: { // optional custom messages 
      required: "your custom message", 
      number: "your custom message" 
     } 
    }); 
}); 

DEMO: http://jsfiddle.net/rq5ra/6/

---

Opcja 2a) Możesz wyciągnąć grupy reguł i połączyć je w wspólne zmienne.

var ruleSet1 = { 
     required: true, 
     number: true 
    }; 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet1, 
     field_2: ruleSet1, 
     field_3: ruleSet1 
    } 
}); 

DEMO: http://jsfiddle.net/rq5ra/4/

---

Wariant 2b) Podobne do 2a powyżej, ale w zależności od stopnia skomplikowania, może oddzielić się zasady, które są wspólne dla pewnych grup i korzystania .extend() rekombinować je na nieskończoną liczbę sposobów.

var ruleSet_default = { 
     required: true, 
     number: true 
    }; 

var ruleSet1 = { 
     max: 99 
    }; 
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1 

var ruleSet2 = { 
     min: 3 
    }; 
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2 

var ruleSet3 = { }; 
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3. Defaults are included since they were already combined into sets 1 & 2 previously. 

$('#myForm').validate({ 
    rules: { 
     field_1: ruleSet2, 
     field_2: ruleSet_default, 
     field_3: ruleSet1, 
     field_4: ruleSet3 
    } 
}); 

Wynik końcowy:

• field_1 będzie wymagana liczba nie mniej niż 3.
• field_2 będzie tylko wymagana liczba.
• field_3 będzie wymagana liczba nie większa niż 99.
• field_4 będzie wymagana liczba między 3 a 99.

DEMO: http://jsfiddle.net/rq5ra/5/

Answer 2

Można użyć addClassRules, jak:

 

jQuery.validator.addClassRules("name", { 
    required: true, 
    minlength: 2 
}); 
 

Answer 3

jQuery.validator.addClassRules(); dołączy do klasy walidacji , ale nie ma opcji dla wiadomości, użyje ogólnych komunikatów o błędach.

Jeśli chcesz, aby pracować wtedy należy byłaby zasady jak ten

$.validator.addMethod(
    "newEmail", //name of a virtual validator 
    $.validator.methods.email, //use the actual email validator 
    "Random message of email" 
); 

//Now you can use the addClassRules and give a custom error message as well. 
$.validator.addClassRules(
    "email", //your class name 
    { newEmail: true } 
); 

Answer 4

Przed tym trzeba to Query złożyć

$("#myform_name").validate({ 
    onfocusout: function(element) { $(element).valid(); } , 
    rules:{ 
     myfield_name: { 
      required:true 
     }, 
     onkeyup: false, 
     messages: { 
      myoffer: "May not be empty" 
     } 
    } 
}); 

Answer 5

Alternatywne podejście:

$.validator.addMethod("cMaxlength", function(value, element, param) { 
 
\t \t 
 
\t return $.validator.methods.maxlength.call(this, value, element, param[1]); 
 

 
}, '{0}');

Streszczenie: https://gist.github.com/uhtred/833f3b957d61e94fbff6

$.validator.addClassRules({ 
 
    'credit-card': { 
 
    \t cMaxlength: [ 'Invalid number.', 19 ] 
 
    } 
 
});

Answer 6

$.validator.addMethod("cMaxlength", function(value, element, param) { 
 
\t \t 
 
\t return $.validator.methods.maxlength.call(this, value, element, param[1]); 
 

 
}, '{0}');

Answer 7

I został zbudowany na odpowiedź Starx do tworzenia powtarzalny łatwy w użyciu funkcji, która wykorzystuje metody standardowe i tworzy nowe komunikaty o błędach dla określonych klas. biorąc pod uwagę fakt, że twoja konkretna klasa będzie używana tylko do przesłonięcia wiadomości, gdy nie powinieneś mieć żadnych konfliktów ponownego użycia tego dla wielu różnych nazw klas przy użyciu dowolnych istniejących metod.

var CreateValidation = function(className, customMessage, validationMethod){ 
    var objectString = '{"'+ className +'": true}', 
    validator = $.validator; 

    validator.addMethod(
    className, 
    validator.methods[validationMethod], 
    customMessage 
); 
    validator.addClassRules(
    className, 
    JSON.parse(objectString) 
); 
}; 

Wykorzystanie Przykład z klasy walidacji bycia "walidacja-klasa-firstname":

CreateValidation('validation-class-firstname', 'Please enter first name', 'required'); 

Answer 8

Można dodać reguły klasy przy użyciu metody addClassRules:

np

$.validator.addClassRules("your-class", { 
    required: true, 
    minlength: 2 
}); 

https://jqueryvalidation.org/jQuery.validator.addClassRules/