web-dev-qa-db-fra.com

validation jQuery avec masque de saisie

Ce problème concerne le fait que les entrées de formulaire avec un masque attribué (en tant qu'espace réservé) ne sont pas validées comme vides par la validation jQuery.

J'utilise:

Quelques comportements étranges:

  1. Les entrées avec l'attribut required sont validées (par jQuery) comme non vides et donc valides, mais dans le cas contraire, les entrées ne sont pas considérées comme "non vides" et ne sont pas vérifiées pour d'autres règles de validation (c'est par validator.js)
  2. Lorsque j'écris quelque chose dans le champ de saisie puis que je l'efface, le message d'erreur required s'affiche

Quelqu'un peut-il me donner un indice?

EDIT: Code pertinent:

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();      
});
javascriptjquerytwitter-bootstrapvalidationmasking
9
D. Cichowski

Ce n'est pas exactement la solution, mais ...

changer le masque de saisie pour un équivalent résout le problème.

Encore loin d'être parfait, cependant: (

EXPLICATION:

Les autres bibliothèques de masquage, ne mentionnant pas ces deux comportements étranges, il est donc possible de valider des champs.

J'ai utilisé: https://github.com/digitalBush/jquery.maskedinput

2
D. Cichowski

J'ai résolu ce problème avec:

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

J'ai réussi à utiliser le masque de saisie de RobinHerbots (3.3.11), avec jQuery Validate, en activant clearIncomplete. Voir Section dédiée à la documentation du masque de saisie : 

Effacer la saisie incomplète sur le flou

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

Personnellement, lorsque cela est possible, je préfère définir cet attribut de données HTML:

data-inputmask-clearincomplete="true"

L'inconvénient est que: l'entrée partielle est effacée lorsque la mise au point est perdue, mais je peux vivre avec cela. Alors peut-être que toi aussi ...

Edit: si vous devez ajouter la validation du masque au reste de votre processus de validation jQuery, vous pouvez simuler une erreur de validation jQuery en procédant comme suit:

// 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