jQuery Validierung Farbe ändern von element-hintergrund

jQuery.überprüfen scheint nicht, ändern Sie die Hintergrundfarbe, die der unwirksamen in Ihrem element standardmäßig. Ist es auch möglich, die Hintergrundfarbe einer select element? Die meisten meiner Elemente sind input type="text", aber ich brauche ein Indikator für die select-Formular-Elemente. Ich bin nicht mit dem Standard-generierte Nachrichten, wie Sie passen nicht zu meinem layout.

Den folgenden code hat ändern Sie die Hintergrundfarbe der input Elemente, die aber nie wieder in seiner vorherigen Stil:

 $('form[name="Anmeldung"]').validate({ 
Fehlerklasse: 'jqInvalid', 
Regeln: { 
fnameCreate: "erforderlich", //input 
monthCreate: "erforderlich", //wählen Sie 
emailCreate: { required: true, email: true }, //Eingang 
passwordCreate: "erforderlich", //input type=password 
}, 
Nachrichten: { 
fnameCreate: "", 
monthCreate: "", 
emailCreate: "", 
passwordCreate: "", 
}, 
errorPlacement: function (error, element) { 
element.css('background', '#ffdddd'); 
} 
});

Bearbeiten (Probe)

<div class="field">
  <div class="labelName_fb">
    <label for="email">Email</label>
  </div>
  <div class="divforText3">
    <div class="divLeft"></div>
    <div class="textbox-image3">
      <input class="txt required" id="emailCreate" name="emailCreate" value="" maxlength="100" type="text"  style='width:180px'>
    </div>
    <div class="divright"></div>
  </div>
</div>

Wo die input element ist die jqInvalid Fehler-Klasse Fehler -.

CSS

/* line 3 */ .error { background: #ffdddd; } /* I have since removed the errorClass option */
/* line 254 */ .field .txt {background:transparent none repeat scroll 0 0;border:medium none;color:#000;font-size:11px;width:130px; margin:5px 0;}

jQuery Validierung Farbe ändern von element-hintergrund

InformationsquelleAutor David Fox | 2010-09-24
  1. 6

    Die ungültige Elemente einer Klasse von error standardmäßig, oder in deinem Fall jqInvalid seit Sie sich gesetzt haben, die errorClass option, einfach Stil, Klasse wie Sie möchten in das stylesheet, zum Beispiel:

    .jqInvalid { background: #ffdddd; }

    Können Sie überschreiben die Besonderheiten, die für die Fehlermeldungen (Standard-element <label>), wenn Sie wollen:

    label.jqInvalid { background: none; }

    Diese CSS-Ansatz kümmert sich um die Entfernung...da die Klasse entfernt wird, wenn es gültig ist. Es gibt auch eine success Klasse, wenn Sie möchten, einen grünen hintergrund angewendet, um gültige Elemente, etc.

    • Ich entfernte die Fehlerklasse und errorPlacement Optionen, und ich merke das .error Klasse Hinzugefügt werden, um die Elemente. Aber, mein CSS nicht überschreiben. In Firebug das CSS ist dort (unterhalb der aktiven CSS), aber es ist Durchgestrichen.
    • Es muss ein anderes styling mit den gleichen Eigenschaften, die übergeordnete it - ...etwas mit mehr Spezifität, was die Regel ist tatsächlich ein Effekt, der mit der gleichen Eigenschaft, die Durchgestrichen für Ihre .error Klasse?
    • Es ist eine Klasse Regel .field .txt wo .field ist ein div wickeln um die box und .txt wird direkt übernommen. Ich dachte beide .txt-und .jqInvalid (oder Fehler) Stile angewendet werden würde, wenn das class-Attribut ist class="txt jqInvalid"??
    • Ich habe es versucht, eine Zeile vor und eine Zeile nach der Zeile von Firebug erwähnt..es ist überschrieben unabhängig.
    • Haben Sie eine Beispiel-Seite? Ich kann einen kurzen Blick...Ihr oberstes Stil ist entweder später erklärte, oder mehrere bestimmte (der immer gewinnt).
    • Siehe edit für den entsprechenden HTML-Code.
    • Können Sie fügen Sie die CSS (in der exakten Reihenfolge, es ist in deinem stylesheet)? Das ist das Problem hier, mindestens das ist, was es klingt wie.
    • Ich fügte das, was ich denke, ist der relevante CSS-und Zeilennummern. Firebug erwähnt keine anderen CSS andere als die berechnete element.style { width: 180px; } welche oben angezeigt wird, die .field .txt Stil
    • Dies war eine Spezifität problem. .error und .jqInvalid sind beide weniger spezifisch als .field .txt
    • In diesem Fall fügen Sie .field .txt.jqInvalid zu den Wahlschalter so ein, dass es noch größere Spezifität.

    InformationsquelleAutor Nick Craver
  2. 2

    War dies eine Spezifität problem. .error und .jqInvalid sind beide weniger spezifisch als .field .txt

    So, die Erhöhung der Spezifität erforderlich, die änderung der CSS .field input.error, die hat mehr Gewicht als .field .txt so ist die Reihenfolge spielte keine Rolle mehr.

    Sehen hier für Infos über die Spezifität

    InformationsquelleAutor David Fox
Schreibe einen Kommentar