2009-11-30 6 views
7

Ich verwende derzeit das Validierungs-Plugin, um ein Formular zu validieren (mit ASP.Net-Steuerelementen). Ich habe die Regeln aus dem Standard-Setup innerhalb der form.validate Methode dh gezupft:JQuery validiert Regeln dynamisch hinzufügen

$("form").validate({ 

    rules: { 
     ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0: "required" 
    } 

}); 

Ich habe jetzt diese in verschiedenen Funktionen, die die ruless hinzufügen je nachdem, welche Schaltfläche geklickt wird. Dies funktioniert gut für Textfelder, aber für eine RadiobuttonListe, wenn das Plugin versucht, die Regel hinzuzufügen, gibt es einen Fehler, der besagt, dass das Element nicht definiert ist.

function addRuleSet() { 
    $("#ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0").rules("add", { required: true }); 

}

ich glaube, das Problem ist, dass ich den Namen Attribut bin mit (asp setzt in $), um die Gruppe zu definieren, die die Radioknöpfe gehören eher als eine ID (, aber in der statischen Einstellungen alle Elemente sind mit dem Namen Attribut definiert.Allerdings bin ich mir nicht sicher, wie man umgehen eine Regel für eine Gruppe von zugeordneten Radio-Buttons hinzufügen, würde jeder Rat gewürdigt werden.Es ist

PS Ich muss wirklich die RadioButtonList eher aufrufen als die einzelnen Radiobuttons

Antwort

9

Sie können eine Regel auch anwenden, indem Sie Klassen für das Element festlegen. Wenn Sie beispielsweise einer Eingabe die Klasse "erforderlich" geben, gilt die erforderliche Regel für dieses Element. Um dies zu tun, würden Sie die CssClass-Eigenschaft für das Steuerelement verwenden. Möglicherweise müssen Sie mit zusammengesetzten Steuerelementen wie RadioButtonList experimentieren, um sicherzustellen, dass die Klasse auf die generierten Eingabeelemente und nicht auf den Container angewendet wird. Wenn Sie Probleme damit haben, können Sie die Klasse mit jQuery hinzufügen, nachdem die Seite basierend auf einem Selektor geladen wurde.

<asp:RadioButtonList id="RadList" runat="server" CssClass="required"> 
    ... 
</asp:RadioButtonList> 

oder

<script type="text/javascript"> 
    $(function() { 
      $(':radio').addClass('required'); 
      $('form').validate(); 
    }); 
</script> 

Für eine komplexe, klassenbasierte Regel können Sie neue Regeln hinzufügen addClassRules verwenden.

<script type="text/javascript"> 
    $(function() { 
     $.validator.addClassRules({ 
      range0to10: { 
        range: [0, 10] 
      }, 
      name: { 
        minlength: 2, 
        required: true 
      } 
     }); 
     $('form').validate(); 
    }); 
</script> 

<form ... > 
<input type="text" name="rating" id="rating" class="range0to10" /> 
<input type="text" name="firstName" id="firstName" class="name" /> 
<input type="text" name="lastName" id="lastName" class="name" /> 
</form> 
+0

Ja danke dafür, ich schätze, dass dies für einfache Regeln wie erfordern würde, aber wäre es möglich, etwas wie Reichweite zu definieren: [0,10]? – Monkeeman69

+0

Eigentlich ist es nicht schwer, wenn Sie die Methode addClassRules verwenden. Ich werde aktualisieren. – tvanfosson

+0

Wäre schön zu sehen, danke. – Monkeeman69

1

Nach Tagen der mich das Fahren verrückt, fragt die Frage hat mich, wie das Denken richtig Rückkehr das Element zu bekommen, und ich kam in dieser Methode der Referenzierung staright weg, die mir es erlaubt, zu tun:

$("input:radio[name='ctl00$ContentPlaceHolder1$dgQuestions$ctl14$iRadList_Col0']").rules("add", { required: true }); 
+5

Hinweis: Sie können diesen Selektor auf $ verkürzen ("input: radio [name $ = 'iRadList']"). Rules ~ der $ nachname wählt jedes Element aus, das mit iRadList endet <- einfacher zu lesen –

+0

Das ist ein kluger Tipp Bobby. –