web-dev-qa-db-de.com

jQuery-Validierung mit Eingabemaske

Haben Sie dieses Problem, dass Formulareingaben mit zugewiesener Maske (als Platzhalter) durch die jQuery-Überprüfung nicht als leer validiert werden.

Ich benutze:

Einige seltsame Verhaltensweisen:

  1. Eingaben mit dem Attribut required werden (von jQuery) als nicht leer und daher gültig validiert. In der anderen Hand werden Eingaben jedoch nicht als "nicht leer" betrachtet und nicht auf andere Validierungsregeln geprüft (dies wird von validator.js)
  2. Wenn ich etwas in das Eingabefeld schreibe und dann lösche, erhalte ich eine required-Fehlermeldung

Kann mir jemand einen Tipp geben?

EDIT: Relevanter Code:

HTML/PHP:

<form enctype="multipart/form-data" method="post" id="feedback">
    <div class="kontakt-form-row form-group">
        <div class="kontakt-form">
            <label for="phone" class="element">
                phone<span class="required">*</span>
            </label>
        </div>
        <div class="kontakt-form">
            <div class="element">
                <input id="phone" name="phone" ' . (isset($user['phone']) ? 'value="' . $user['phone'] . '"' : '') . ' type="text" maxlength="20" class="form-control" required="required" data-remote="/validator.php">
            </div>
        </div>
        <div class="help-block with-errors"></div>
    </div>
</form>

JS:

$(document).ready(function() {

    $('#phone').inputmask("+48 999 999 999");

    $('#feedback').validator();      
}); 
9
D. Cichowski

Es ist nicht genau die Lösung, aber ...

Das Ändern der Eingabemaske für ein Äquivalent löst das Problem.

Aber noch lange nicht perfekt:

ERLÄUTERUNG:

Bei anderen Maskierungsbibliotheken werden diese beiden merkwürdigen Verhaltensweisen nicht erwähnt, daher können Felder überprüft werden.

Ich habe verwendet: https://github.com/digitalBush/jquery.maskedinput

2
D. Cichowski

Ich habe dieses Problem gelöst mit:

phone_number: {
            presence: {message: '^ Prosimy o podanie numeru telefonu'},
            format: {
                pattern: '(\\(?(\\+|00)?48\\)?)?[ -]?\\d{3}[ -]?\\d{3}[ -]?\\d{3}',
                message: function (value, attribute, validatorOptions, attributes, globalOptions) {
                    return validate.format("^ Nieprawidłowa wartość w polu Telefon");
                }
            },
            length: {
            minimum: 15,
                message: '^ Prosimy o podanie numeru telefonu'
            },
        },
0
user3089561

Es gelang mir, die Eingabemaske von RobinHerbots (3.3.11) mit jQuery Validate zu verwenden, indem ich clearIncomplete aktivierte. Siehe Abschnitt für Eingabemasken-Dokumentation

Löschen Sie die unvollständige Eingabe bei Unschärfe

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});

Ich persönlich ziehe es vor, wenn möglich, das HTML-Datenattribut festzulegen:

data-inputmask-clearincomplete="true"

Der Nachteil ist: Partielleingabe wird gelöscht, wenn der Fokus verloren geht, aber ich kann damit leben. Also vielleicht auch du ...

Edit: Wenn Sie die Maskenüberprüfung zum Rest Ihres jQuery-Überprüfungsprozesses hinzufügen müssen, können Sie einen jQuery-Bestätigungsfehler simulieren, indem Sie folgende Schritte ausführen:

// Get jQuery Validate validator currently attached
var validator = $form.data('validator');

// Get inputs violating masks
var $maskedInputList 
    = $(':input[data-inputmask-mask]:not([data-inputmask-mask=""])');
var $incompleteMaskedInputList 
    = $maskedInputList.filter(function() { 
        return !$(this).inputmask("isComplete"); 
    });
if ($incompleteMaskedInputList.length > 0)
{
    var errors = {};
    $incompleteMaskedInputList.each(function () {
        var $input = $(this);
        var inputName = $input.prop('name');
        errors[inputName] 
            = localize('IncompleteMaskedInput_Message');
    });

    // Display each mask violation error as jQuery Validate error
    validator.showErrors(errors);

    // Cancel submit if any such error
    isAllInputmaskValid = false;
}

// jQuery Validate validation
var isAllInputValid = validator.form();

// Cancel submit if any of the two validation process fails
if (!isAllInputValid ||
    !isAllInputmaskValid) {
    return;
}

// Form submit
$form.submit();
0
Antoine Robin

Ich habe das gleiche Problem, wenn ich diese beiden Bibliotheken miteinander kombiniere.

Tatsächlich gibt es hier ein ähnliches Ticket: https://github.com/RobinHerbots/Inputmask/issues/1034

Hier ist die Lösung von RobinHerbots:

$("#inputPhone").inputmask("999.999.9999", {showMaskOnFocus: false, showMaskOnHover: false});

Der Validator geht davon aus, dass er nicht leer ist, wenn der Maskenfokus/Hover vorhanden ist. Schalten Sie einfach den Fokus aus und halten Sie den Mauszeiger über die Maske, um das Problem zu beheben.

0
Terence