Sprawdzanie jQuery z maską wprowadzania

Question

Masz ten problem, że dane wejściowe formularza z przypisaną maską (jako symbol zastępczy) nie są sprawdzane jako puste przez walidację jQuery.

używam:

• https://github.com/RobinHerbots/jquery.inputmask
• https://github.com/1000hz/bootstrap-validator (który wykorzystuje jQuery natywną walidacji w tym przypadku)

jakichś dziwnych zachowań:

1. Wejścia z atrybutem required są sprawdzone (przez jQuery) jako nie jest pusty i dlatego ważny, ale z drugiej strony dane wejściowe nie są uważane za "nie puste" i nie są sprawdzane pod kątem innych reguł sprawdzania poprawności (jest to validator.js)
2. Kiedy piszę coś do pola wejściowego, a następnie je kasuję, Otrzymuję komunikat o błędzie required

Czy ktoś może dać mi wskazówkę?

EDIT: odpowiedni kod:

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();  
}); 

Answer 1

to nie jest dokładnie to rozwiązanie, ale ...

zmieniające maska ​​wejściowa dla jakiegoś odpowiednika rozwiązuje problem.

Wciąż daleki od doskonałości, ale: (

WYJAŚNIENIE:.

Inne biblioteki maskujące, nie mają te dwa dziwne zachowania wspomniano, więc jest to możliwe do sprawdzania poprawności pola

użyłem: https://github.com/digitalBush/jquery.maskedinput

Answer 2

udało mi do korzystania z RobinHerbots męska Inputmask (3.3.11), z jQuery Weryfikuj, poprzez aktywację clearIncomplete. Zobacz Input mask documentation dedicated section:

Wyczyść niekompletną wejście na rozmycie

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

PERSONNALY, jeśli to możliwe, wolę ustawienie to przez HTML atrybutu danych:

data-inputmask-clearincomplete="true" 

Wadą jest: częściowe wprowadzanie danych zostanie skasowane, gdy ostrość zostanie utracona, ale mogę z tym żyć. Więc może ty też ...

Edit: jeśli trzeba dodać walidację maski do końca swojego procesu jQuery walidacji, można zasymulować błąd jQuery Weryfikuj, wykonując następujące czynności:

// 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(); 

Answer 3

Mam ten sam problem, gdy połączyłem te dwie biblioteki razem.

Właściwie istnieje podobny bilet tutaj: https://github.com/RobinHerbots/Inputmask/issues/1034

Oto rozwiązanie dostarczone przez RobinHerbots:

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

Walidator zakłada, że ​​nie jest pusta, gdy maska ​​ostrości/aktywowanych jest tam . po prostu włącz fokus i najechanie na maskę off naprawi problem.