Konflikt zwischen jQuery Validate und maskierter Eingabe

Versuchte ich folgende Lösung, und es funktioniert wie ein Charme.

$("[data-input-type=phone]", "body")
  .mask("(999) 999 99 99")
  .bind("blur", function () {
    //force revalidate on blur.

    var frm = $(this).parents("form");
    //if form has a validator
    if ($.data( frm[0], 'validator' )) {
      var validator = $(this).parents("form").validate();
      validator.settings.onfocusout.apply(validator, [this]);
    }
  });

Was löst das problem event bestellen.
Wenn ein element maskiert, es wird überprüft, maskedinput plugin auf blur, aber gleiche element validiert durch den validator plugin auf focusout Ereignis (was ist ein wrapper für die Unschärfe, die auf nicht-ie-Browser), die aufgerufen wird, bevor maskedinput die Unschärfe.

In dieser situation input-element hat den Wert "(___) ___ __ __" wenn der validator prüft den Wert. Wenn der code erreicht maskedinput das blur-Ereignis-plugin-tests und löscht den Wert, da es keine gültige Eingabe.

Validierung Ergebnis kann unterschiedlich sein für jede Validierung Fall. Zum Beispiel required Regeln passieren mit Erfolg seit element einen Wert hat. nicht erforderlich number Felder wird scheitern, selbst wenn wir lassen Sie die Eingabe leer, da eine Maske wie "999" getestet werden kann, wie 12_

den obigen code testet, ob form maskierter Eingabe-Validierung befestigt ist, und erinnert daran, focusout-Ereignisprozedur. Da unsere handler angeschlossen ist, wie die neueste, hoffentlich wird es genannt.

Einer Warnung, code einfach kopiert Verhalten der validation plugin. Es wird wahrscheinlich funktionieren, für ein Jahrzehnt, aber nicht, wenn die Validierung plugin entscheidet, Dinge zu tun, anders als jetzt.

aufrichtig

InformationsquelleAutor der Antwort

Ich hatte ein ähnliches problem und konnte es lösen, ändern der Standard-Platzhalter-Zeichen auf eine leere Zeichenfolge.

War ich mit einem .mask('9?99'); war und Validierung mit einem einfachen 'Anzahl' - Regel, und wurde mit der gleichen Art von Konflikt.

Änderte ich die Maske Erklärung zu .mask('9?99',{placeholder:''}); und... nicht mehr in Konflikt. 🙂

Es ist ein mögliches problem in Ihrem Fall, weil der - in der zip-code wird immer eingefügt, in der form von der Maske plugin. Ich denke, Sie können ändern Sie die regexp zu ^\d{5}\-$|^\d{5}\-\d{4}$ (matching der Strich in beiden Fällen) und es sollten dann überprüfen.

Sowieso, Sie veröffentlicht eine Weile her, und wahrscheinlich brauche das nicht mehr, aber vielleicht jemand anderes helfen. 🙂

InformationsquelleAutor der Antwort Miguel Pinto

Ich habe versucht, einige der Lösungen, aber keine für mich gearbeitet, ich bin mit 'bootstrapValidator' (http://bootstrapvalidator.com/) und 'jquery.maskedinput' (http://digitalbush.com/projects/masked-input-plugin/) also wenn noch jemand dieses problem haben, meine Lösung war:

Mein input war gekennzeichnet mit:

<input type="text" class="form-control" id="telefone" placeholder="(__) ____-_____" name="telefone" required>

Sowie das vollständige Skript wie dieses:

$(document).ready(function() {
   var telefone = $('#telefone'), //THAT'S MY INPUT WITH MASK
       form = telefone.parents("form"), //THAT'S MY FORM WITH THE VALIDATE
       alteredField = false; //THAT'S A FLAG TO SSE IF THE INPUT WAS ALTERED

            //APPLY MY MASK
            telefone.mask('(99) 9999-9999?9');

            //FOCUS ON ANY INPUT
            form.find('input[type=text]').focus(function(){
                //REMOVE THE VALIDATION STATUS
                $(form).data('bootstrapValidator').updateStatus($(this).attr('name'), 'NOT_VALIDATED');
                //ENABLE THE SUBMIT BUTTON
                $(form).data('bootstrapValidator').disableSubmitButtons(false);
            });

            //FOCUS ON THE MASKED INPUT
            telefone.focus(function(){
                //DISABLE THE VALIDATE
                $(form).data('bootstrapValidator').enableFieldValidators('telefone', false);
                //ENABLE THE SUBMIT BUTTON
                $(form).data('bootstrapValidator').disableSubmitButtons(false);
            }).blur(function(){ //BLUR ON THE MASKED INPUT
                //GET THE INPUT VALUE
                var value = telefone.val();
                //ENABLE THE VALIDATE 
                $(form).data('bootstrapValidator').enableFieldValidators('telefone', true);
                //CHECK IF THE VALUE IS EMPTY
                if(value != ""){
                    //CHANGE THE STATUS OF THE INPUT TO VALID 
                    $(form).data('bootstrapValidator').updateStatus('telefone', 'VALID')
                    //ACTIVE THE FLAG
                    alteredField = true;
                }else if (alteredField) { //IF THE INPUT WAS ALTERED BEFORE AND DON'T HAVE VALUE
                    //CHANGE THE STATUS OF THE INPUT TO INVALID
                    $(form).data('bootstrapValidator').updateStatus('telefone', 'INVALID')
                };
            });

        });

Dieser code ändert die standard-Verhalten der "bootstrapValidator", sondern war die einzige Möglichkeit, die ich erhielt, zu lösen, den Fehler zu finden.

Weiß ich nicht über performance-Probleme, also bitte ändern und verbessern den code ^^
Hoffe, dass diese Hilfe ^_^

InformationsquelleAutor der Antwort Luís Gustavo Batista