Platzhalter-Problem mit jQuery Validierung

Habe heute bemerkt, dass wir ein Problem mit der jquery Validierung, wenn verwendet, in Verbindung mit Platzhalter text.

Beispiel:

<div class="sort left">
<label for="username" class="inlineelement">Username</label>
<input id="registername"  type="text" placeholder="your name" autocomplete="off" class="required"></input>

Bemerkte ich, dass , wenn wir überprüfen unser Formular mit jquery Validate ( http://docs.jquery.com/Plugins/Validation/Methods )

Gibt es eine Arbeit um für diese, oder sein sollte, gehen Sie zurück zu konzentrieren, html ( Platzhaltertext ) in unserem Formular-Felder ?

  • Ich bin mit jQuery 1.5.1 mit jQuery Validierung 1.8.0 auf Chrome 11.0... und das plugin korrekt überprüft wird. Der Platzhalter-text wird in die Eingabe, und wenn ich nicht geben Sie einen text ein, erscheint die Fehlermeldung. Welche version von jQuery und das plugin benutzt du?
  • Wir sind mit jquery 1.5.2 und jQuery validation plug-in pre-1.5.2 ( konnte Sie nicht finden, eine spätere version der Validierung )
  • Die Letzte version von jQuery Validierung: bassistance.de/jquery-plugins/jquery-plugin-validation - funktioniert mit jQuery 1.5.2.
  • Ok, jetzt haben Sie es, aber ähnliches Problem. Ich denke, wir haben etwas übersehen schmerzlich klar , unsere Klasse erforderlich ist der gleiche für alle firlds. class="required" und unser script: $(document).ready(function(){ $("#registerForm").validate({ rules: { Grund: "erforderlich" } }); }); Nicht sicher, was es sein könnte
  • Bitte Bearbeiten Sie die Frage vollständig zu beschreiben das Problem, das Sie haben.
InformationsquelleAutor 422 | 2011-05-20
  1. 16

    Ich kam auf das gleiche Problem. Nach einigen Herumspielen, fand einen workaround, mit dieser benutzerdefinierte Methode. Dieser benutzerdefinierte Methode wird Platz für Platzhalter.

    jQuery.validator.addMethod("placeholder", function(value, element) {
  return value!=$(element).attr("placeholder");
}, jQuery.validator.messages.required);

    - Tag diese Zeile am Ende der additional-methods.js Datei.

    Werde Sie Sie dann verwenden Sie es wie folgt:

    $("form").validate({
  rules: {
    username: {required: true, placeholder: true},
  },
  message: {
    username: {
      required: "Username required", placeholder: "Username required",
    },
  }
});
    • Eine Frage, die ich sehen kann, ist, wenn die person, will Sie einen Wert, der der gleiche wie der Platzhalter.
    • Hinweis: dies ist ein problem, dass es bewirkt, dass alle Elemente mit Platzhaltern zu Verhalten, wie erforderlich, auch wenn Sie nicht als erforderlich markiert.
    • In der Tat es tut. Schade, dass ich diese Antwort von Ihnen positiv bewertet werden.
    • nicht mit mir zu arbeiten jsfiddle.net/prashantptapase/DzvNr/80
    • ähnlich wie diese zu beantworten: stackoverflow.com/questions/4904017/...
    InformationsquelleAutor jonsuh
  2. 5

    Dies ist eine Allgemeine Art und Weise der Validierung der Platzhalter (verwenden Sie folgenden code NACH der Validierung Logik Initialisierung).
    Es funktioniert durch die Injektion benutzerdefinierte Logik in alle Validierungs-Methoden.

    $(function () {
    $.each($.validator.methods, function (key, value) {
        $.validator.methods[key] = function () {
            var el = $(arguments[1]);
            if (el.is('[placeholder]') && arguments[0] == el.attr('placeholder'))
                arguments[0] = '';

            return value.apply(this, arguments);
        };
    });
});
    • hat Super geklappt, vielen Dank
    • arbeitete für mich, auch!
    InformationsquelleAutor Hogan
  3. 3

    Könnten Sie Skript, um es vielleicht.

    Dadurch entfernen placeholder - Attribut auf "Absenden", und ersetzen Sie Sie im Falle eines Fehlers.

    var placeholders = {};
$('form').validate({
   submitHandler: function(form) {

       $(form).find(':input[placeholder]').each(function() {
          var placeholder = $(this).attr('placeholder'); 
          placeholders[placeholder] = this;
          $(this).removeAttr('placeholder');
       });       

       form.submit();
   },

   invalidHandler: function() {

      $.each(placeholders, function(placeholder, element) {
          $(element).attr('placeholder', placeholder);
      });

   }

});
    • Genie ! geben, dass ein Wirbel, cheers, Alex
    • die $.jede Funktion ist, fehlen die schließen Klammer. Aber, darüber hinaus, IE spuckt zurück, dass die Platzhalter nicht definiert ist, auf der gleichen Linie.
    • Feste fehlenden ). Haben Sie placeholders ?
    • UPS, vergessen zu definieren placeholders. Danke.
    • Keine sorgen 🙂
    InformationsquelleAutor alex
  4. 3

    Ich hatte ähnliche Problem mit einem Formular, an dem ich arbeite. Sie können die jq-Wasserzeichen-plug-in zu tun Platzhalter/Wasserzeichen.

    Funktioniert es mit jQuery Validate-plug-in, also nicht behindert Validierung.

    InformationsquelleAutor smilqn pavlov
  5. 2

    Meine schnelle Lösung:

                $(".validateForm").submit(function(){
            $(this).find("input[type=text]").each(function(){
                if($(this).attr("placeholder") == $(this).val())$(this).val("");
            })
        })
    InformationsquelleAutor user2323336
  6. 1

    Fand ich, dass, wenn Sie hinzufügen von benutzerdefinierten Regeln, sprich: E-Mail:true, dann wird die Validierung wird nicht ignoriert.
    Also wenn man sich in additional-methods.js die kommt zusammen mit der jquery Validierung, download, es gibt eine Regel, genannt alphanumerisch. Dieser hat alle von der Standard-Funktionalität. Verwenden Sie einfach diese benutzerdefinierte Regel und es sollte funktionieren. Ich bin mit http://widgetulous.com/placeholderjs/ für Platzhalter-Unterstützung auf älteren Browsern. Cheers

    InformationsquelleAutor Clinton Green
  7. 1
    $("form").validate();
    $(function () {
                $.each($.validator.methods, function (key, value) {
                $.validator.methods[key] = function () {
                var el = $(arguments[1]);
                if (el.is('[placeholder]') && arguments[0] == el.attr('placeholder'))
                    arguments[0] = '';
                    return value.apply(this, arguments);
                    };
                 });
      });
    InformationsquelleAutor Avinash Saini
  8. 1

    Versuchen, die neueste version von jquery.validieren von http://jqueryvalidation.org/

    version 1.11.1 scheint haben dieses Problem gelöst für mich =D

    • Bestätigt - die Letzte v1.11.1 in Verbindung mit jquery.Platzhalter plugin behebt Probleme.
    InformationsquelleAutor winry
  9. 0

    Benutzte ich einen trick, wenn Sie sich auf den Bereich, der Platzhalter wird.. Der folgende code Schärfe und Unschärfe werden alle Eingabe-Felder.

    function tabFields(){
    $('#form input[type="text"]').each(function(){
        $(this).focus().blur();
    });
}
    InformationsquelleAutor Notflip
Schreibe einen Kommentar