jquery validation plugin - change border color + kein text

Ist es trotzdem kann ich ändern an den Rand-die Farbe rot auf einen Fehler eher und loszuwerden der text? Das ist so ziemlich der einzige Fehler, die ich anzeigen möchten, und es würde verschwinden, sobald die input - /textarea-Komponente wird fokussiert.

<div id="contact-form">
            <form method="get" id="contacts">
                <div class="contact-controls">
                    <label class="contact-label" for="name-input">NAME</label>
                    <div class="input-wrapper">
                        <input type="text" name="contact-name" id="name-input" placeholder="Your Name" required>
                    </div>
                </div>
                <div class="contact-controls">
                    <label class="contact-label" for="email-input">EMAIL</label>
                    <div class="input-wrapper">
                        <input type="text" name="contact-email" id="email-input" placeholder="Your Email" required>
                    </div>
                </div>
                <div class="contact-controls">
                    <label class="contact-label" for="message-input">MESSAGE</label>
                    <div class="input-wrapper">
                        <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" required></textarea>
                    </div>
                </div>
                <div class="contact-controls">
                    <input type="hidden" name="save" value="contact">  
                    <button type="submit" class="contact-button">Send</button>  
                </div>
            </form>
        </div>

wir würden sehen müssen, Ihre aktuelle Validierung Skript, das "loswerden der text"
Ah, ich habe es nicht noch, ich Frage mich, ob es einen Weg gibt, oder ist diese ist ein plugin, dass das tun kann, was ich Suche
Ja, es ist ein einfacher Weg. Siehe meine Antwort.

InformationsquelleAutor vytfla | 2013-03-25

jquery jquery-validate

17

Folgendes tun:

1) stellen Sie den errorPlacement callback-Funktion, die return false um die Fehlermeldung zu unterdrücken text.

2) Ändern Sie die CSS-Datei für das plugin ist .error & .valid class's zeigen farbige Ränder, oder was auch immer, um das element. Standardmäßig ist das plugin schon automatisch gilt und entfernt diese zwei class's, es gibt also keine besonderen plugin-Optionen für dieses.

Arbeiten DEMO: http://jsfiddle.net/8vQFd/

jQuery:
```
$(document).ready(function () {

    $('#myform').validate({ //initialize the plugin
        //your rules and options,
        errorPlacement: function(){
            return false;  //suppresses error message text
        }
    });

});
```
- Süße, das ist so ziemlich perfekt. Frage: beim laden der Seite " meine erste input-Feld ist, zeigt bereits ein Fehler (.Fehler { border: 1px solid red}); wie kann ich es machen, damit es nur flags einen Fehler, sobald der Benutzer gibt falsche Zeichen?
- Folgen Sie einfach mein jsfiddle, das bereits tut, was Sie wollen. Da kann ich nicht sehen, Ihr .validate() Funktion, ich bin mir nicht sicher, wie das passiert. Können Sie ändern mein jsFiddle zeigen dieses Problem?
- jsfiddle.net/8vQFd
- das ist nur meine ursprüngliche jsFiddle und es werden keine Fehler markiert auf laden. Sie müssen klicken Sie auf "update" oder "Gabel" - Taste, um die änderungen zu speichern.
- Ah dumm von mir, danke: jsfiddle.net/RaPUY
- So entfernen Sie class="error" aus dem element. Das plugin werde es automatisch zurück, wenn ein Fehler vorliegt. Siehe auch meine Kommentare in JS: jsfiddle.net/RaPUY/2
- Danke, ich dachte, ich nahm es heraus. Ich verstehe nicht, Ihre Kommentare- #myform -> #myForm " und warum haben Sie den Kommentar hinzufügen Schrägstriche am Ende?
- Ich habe einfach versucht, Ihnen zu sagen, dass Sie falsch den #myForm Selektor als #myform, und Sie verließ die schließenden Klammern, }).
- Oh, wow, danke. Ich dachte, ich musste wie dreifach geprüft, die.
InformationsquelleAutor Sparky

Kein Jquery Nicht Hinzufügen/Ändern Alle Funktionen Einfach Hinzufügen von Css -

input[class="error"]{border:1px solid #f00 !important;} input[class="form control error"]{border:1px solid #f00 !important;} .error p{color:#f00 !important;}

InformationsquelleAutor

0

Können Sie eine CSS-Klasse namens".input-Validierung-Fehler, die Hinzugefügt wird, um das input-element von jQuery-validation-plugin, wenn Sie eine Gültigkeitsregel ist gebrochen.

CSS:
```
.input-validation-error {
    border: solid 1px #ff0000;
}
```
InformationsquelleAutor Mohammad Sakhidel

-1

Könnten Sie eine Klasse hinzufügen, um Ihre Eingabe /Texteingabefelder, das wäre eine rote Grenze

Ich es nannte .Fehler

input:focus,textarea:focus{
outline: none !important;
}

input.error, textarea.error{
outline:red groove thin;
}

Dann jquery zu gehen und finden Sie die Eingangs - /Texteingabefelder mit der Klasse".Fehler' und die leere Menge, den Wert der it zu leeren.

$(document).ready(function() {
  $('#contact-form').find('.error').val(' ');
});

Jsfiddle V1

Aktualisiert

Beispiel von JS

 $(document).ready(function() {
  $('#contact-form').find('.error').val(' ');
    $('input, textarea').click(function() {
    $(this).removeClass('error').val('');
   });

    var name = $('#name-input').val();

    if(name == ''){
      $('#name-input').addClass('error');   
    }
   });

CSS

 input:focus,textarea:focus{
  border-color: initial;
 }

 input.error, textarea.error{
  border:1px solid red;
 }

HTML

<div id="contact-form">
        <form method="get" id="contacts">
            <div class="contact-controls">
                <label class="contact-label" for="name-input">NAME</label>
                <div class="input-wrapper">
                    <input type="text" name="contact-name" id="name-input" placeholder="Your Name" value="" class="" required>
                </div>
            </div>
            <div class="contact-controls">
                <label class="contact-label" for="email-input">EMAIL</label>
                <div class="input-wrapper">
                    <input type="email" name="contact-email" id="email-input" placeholder="Your Email" value="" class="" required>
                </div>
            </div>
            <div class="contact-controls">
                <label class="contact-label" for="message-input">MESSAGE</label>
                <div class="input-wrapper">
                    <textarea name="contact-message" id="message-input" rows="15" placeholder="Hi there&#33;" class="" required></textarea>
                </div>
            </div>
            <div class="contact-controls">
                <input type="hidden" name="save" value="contact">  
                <button type="submit" class="contact-button">Send</button>  
            </div>
        </form>
    </div>

JSfiddle V2

Ihre jsfiddle hat die E-Mail/Nachricht grenzt schon rot; ich bin auf der Suche für Sie zu rot ändern, sobald der Benutzer drückt auf senden, wenn die Felder leer sind.
Die immer Sprache, die Sie verwenden, zu verarbeiten Sie Daten, wenn ein Fehler vorliegt, fügen Sie die Klasse "Fehler" auf das Feld "Eingabe" (man könnte auch festlegen, dass der Wert, der übrigens auch)
Ich habe meine Antwort aktualisiert
Ich denke, dass Sie völlig verfehlt den Punkt. Der OP ist mit Hilfe des jQuery Validate plugin, welches bereits verschiedene eingebaute callback-Optionen für all dies tut.

InformationsquelleAutor Eli Stone

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.