jQuery-Validierung und Platzhalter-Konflikt

Bin ich mit dem jQuery-Validation-plugin zur Validierung eines Formulars auf meiner Website.

http://docs.jquery.com/Plugins/Validation

Ich bin auch mit dem folgenden code Platzhalter-Unterstützung für Browser, die nicht unterstützen HTML5 placeholder="" Attribut.

//To detect native support for the HTML5 placeholder attribute
var fakeInput = document.createElement("input"),
    placeHolderSupport = ("placeholder" in fakeInput);

//Applies placeholder attribute behavior in web browsers that don't support it
if (!placeHolderSupport) {

    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '') {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() { //line 20
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}

Wenn ich meine form, die folgenden Dinge passieren:

In Browsern, die Unterstützung der placeholder Attribut, das validate() Funktion ausgelöst und alles funktioniert wie es soll.

In Browsern, die keine Unterstützung für die placeholder Attribut, Zeilen 20-25 deaktivieren Sie alle "Platzhalter" und dann die validate() Funktion ausgelöst. Wenn keine Fehler vorhanden sind, wird die Seite legt und alles funktioniert wie es soll.

In nicht unterstützten Browsern, im Falle, daß Fehler vorhanden sind, werden die entsprechenden Felder angewendet class="error" wie gewohnt-aber der Platzhalter-text kommt nicht zurück, bis die blur() Ereignis auf einen bestimmten Bereich. Dies führt dazu, dass diese Felder leer lassen -- und da gibt es keine Etikette (nur die placeholder Attribut) Benutzer sind Links zu erraten, was jedes leere Feld enthalten soll, bis der blur() Ereignis passiert.

Das andere problem, dass nicht unterstützte Browser haben, ist, dass seit der Platzhalter fix ändert die value Attribut zur Anzeige der Platzhalter, Felder sind als erforderlich markiert Gültigkeitsprüfung wenn Sie zu scheitern.

Es scheint, gibt es keine einfache Möglichkeit, verwenden der Validation-plugin mit dem Platzhalter-support-code.

Ich bin auf der Suche, um entweder ändern Sie die Platzhalter support-code oder fügen Sie ein submitHandler: {} Funktion, die als parameter der validate() - Funktion, um diese Arbeit in nicht unterstützten Browsern.

InformationsquelleAutor WNRosenberg | 2010-12-10

Ich lief in ein ähnliches Problem. Haben Sie bekommen das Eure Arbeit? Ich würde gerne Notizen vergleichen.

FWIW, hier ist was ich getan habe:

jsfiddle demo hier.

Eingabe hinzufügen Platzhalter für die jQuery-Unterstützung-Objekt:

$.support.placeholder = (function() {
    var i = document.createElement( 'input' );
    return 'placeholder' in i;
})();

Der Platzhalter Kette:

$('input')
    .addClass('hint')
    .val( function() {
        if ( !$.support.placeholder ) {
            return $(this).attr('placeholder');
        }
    })
    .bind({
        focus: function() {
            var $this = $(this);
            $this.removeClass('hint');
            if ( $this.val() === $this.attr('placeholder') ) {
                $this.val('');
            }
        },
        blur: function() {
            var $this = $(this),

                //Trim whitespace if only space characters are entered,
                //which breaks the placeholders.
                val = $.trim( $this.val() ),
                ph = $this.attr('placeholder');

            if ( val === ph || val === '' ) {
                $this.addClass('hint').val('');
                if ( !$.support.placeholder ) {
                    $this.val(ph);
                }
            }
        }
    });

Fügen Sie eine neue Gültigkeitsregel

addMethod docs

$.validator.addMethod('notPlaceholder', function(val, el) {
    return this.optional(el) || ( val !== $(el).attr('placeholder') );
}, $.validator.messages.required);

Sind die neue Methode in das validate-Objekt Regeln

$('form').validate({
    rules: {
        name: {
            required: true,
            notPlaceholder: true
        },
        email: {
            required: true,
            notPlaceholder: true,
            email: true
        }
    }
});

Überprüfen Sie heraus meine Antwort unten.

InformationsquelleAutor dido

2

Ich denke, dass das hinzufügen dieser zu jquery.validate.js zu den required - Funktion (Linie 900), die beste ist:
```
required: function(value, element, param) {

        //Our change
        if (element.value == element.defaultValue) {
            return false;
        }
        //End our change
```
lösen-problem im one-shot :D-Linie 990 für die neueste version von jquery Validierung, da poste ich diese Meldung

InformationsquelleAutor ripper234
1

Platzhalter plugin update mein Problem gelöst 🙂

schließlich fand eine einfache Lösung. tx

InformationsquelleAutor Tomasz Maj
1

können Sie dies lösen, indem Sie die Bindung dieser an die submit-Funktion (entweder über jQuery Validierung oder manuell)
```
 if(element.val() == text){
      element.val('');
 }
```
InformationsquelleAutor Sara Chipps

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.