Verwendung von Daten-Attributen mit jquery validate

Question

Ist es möglich, data-attributes mit dem JQuery Validate Plugin zu verwenden. Ich verwende derzeit den Klassennamen z.B.

class="{required:true, messages:{required:'You must choose a site.'}}"` 

sondern müssen das Datenattribut verwenden, z. B.

data-validate="{required:true, messages:{required:'You must choose a site.'}}"`

Den Eingaben kann mehr als ein Datenattribut zugeordnet sein, das nicht mit der Validierung in Zusammenhang steht, z. B.

<input name="txt_txt001" type="text" maxlength="30" id="txt_txt001" class= "     
{required:true, messages:{required:'This field is required.'} }" data-
children="ddl_txt007,ddl_txt008" data-optionGroup="1" data-optionGroupParent=""  />

Ich weiß, dass das Ketchup-Plugin dies anbietet, aber ich möchte nicht dazu übergehen, da ich viel Arbeit in die Einrichtung der Seite mit JQuery Validate gesteckt habe.

Danke

Answer 1

Versuchen Sie, die folgenden Änderungen vorzunehmen, um 1.9.0 zu validieren. Ich habe ein paar Mods gemacht, so dass meine Zeilennummern können aus sein, aber hier geht:

Um ln 149:

var data = $.validator.normalizeRules(
    $.extend(
        {},
        $.validator.metadataRules(element),
        $.validator.classRules(element),
        $.validator.dataRules(element), // add this
        $.validator.attributeRules(element),
        $.validator.staticRules(element)
    ), element);

Fügen Sie dies nach classRules um ln 782 ein:

// pretty much steal everything from the class based settings
dataRules: function(element) {
    var rules = {};
    var classes = $(element).data("validation");
    classes && $.each(classes.split(' '), function() {
        if (this in $.validator.classRuleSettings) {
            $.extend(rules, $.validator.classRuleSettings[this]);
        }
    });
    return rules;
},

Fügen Sie zusätzliche Validatoren zu den Klassenregeln hinzu:

jQuery.validator.addClassRules({
    phone: {
        phoneUS: true
    },
    zipcode: {
        zipcode: true
    },
    notFirstSelect: {
        notFirstSelect : true
    }
});

Dann fügen Sie eine data-validation Attribut zu Ihren for-Feldern hinzufügen:

<input type="text" data-validation="zipcode required" maxlength="10" class="inputText med" value="" name="zip" id="zip">

Das hat bei mir sehr gut funktioniert. Sehen Sie sich das an: http://www.roomandboard.com/rnb/business_interiors/contactus/send.do ein Beispiel für die Anwendung dieses Verfahrens.

Answer 2

Ich habe das Plugin nicht benutzt, aber es scheint keine eingebaute Option zu geben, um das Attribut zu ändern, von dem aus es die Regeln abruft. Aber wenn Sie sich den unkomprimierten Quelltext in der Zeile 767 sehen Sie eine classRules Methode.

In dieser Methode wird in Zeile 769 gibt es:

var classes = $(element).attr('class');

Sie können versuchen, dies zu ändern:

var classes = $(element).attr('data-validate');

Wie gesagt, ich habe dies nicht getestet, obwohl es logischer und semantischer scheint, diese Art von Zeug in ein Datenattribut als eine Klasse zu setzen, wie das Plugin standardmäßig vorschlägt.

Answer 3

ASP.NET MVC 3 enthält eine unaufdringliche Validierung mit HTML5 data- Attribute. Die Datei jquery.validate.unobtrusive.js im MVC 3-Framework analysiert die Daten-Attribute und fügt die Regeln in jquery.validate.js .

Weitere Einzelheiten finden Sie unter dieser Artikel .

Answer 4

Ich weiß, dass dieser Artikel alt ist, aber ich bin gerade auf ihn gestoßen, als ich nach etwas Ähnlichem suchte. Ich dachte mir, da es keine akzeptierte Antwort gibt, brauchen Sie vielleicht noch eine? Wie auch immer, David war vraiment schließen:

var classes = $(element).data("validate");

Dies sollte den Inhalt des Attributs data-validate erfassen. Von dort aus sollten Sie in der Lage sein, den Wert zu parsen oder weiterzugeben, wie Sie es mit dem Klassennamen getan haben.

Answer 5

Empfohlen wird die Verwendung von Daten-Attributen. Sie brauchen jquery.validate.unobtrusive.js nicht mehr. Ab der Version 1.11.0 ist jquery.validate.js standardmäßig enthalten. Die Syntax ist die gleiche geblieben, sehen Sie sich hier Beispiele an: http://denverdeveloper.wordpress.com/2012/09/26/some-things-ive-learned-about-jquery-unobtrusive-validation/