jQuery validation with input mask

Question

Have this problem that form inputs with assigned mask (as a placeholder) are not validated as empty by jQuery validation.

I use:

https://github.com/RobinHerbots/jquery.inputmask
https://github.com/1000hz/bootstrap-validator (which uses jQuery native validation in this case)

Some strange behaviors:

Inputs with attribute required are validated (by jQuery) as not empty and therefore valid, but in the other hand input is not considered as "not empty" and not checked for other validation rules (this is by validator.js)
When i write something into input field and then erase it, I get required error message

Can anyone give me some hint?

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

Antoine Robin · Answer 1 · 2017-12-18T14:10:50.567

I managed to use the RobinHerbots's Inputmask (3.3.11), with jQuery Validate, by activating clearIncomplete. See Input mask documentation dedicated section:

Clear the incomplete input on blur

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

Personnaly, when possible, I prefer setting this by HTML data attribute:

data-inputmask-clearincomplete="true"

The drawback is: partial input is erased when focus is lost, but I can live with that. So maybe you too ...

Edit: if you need to add the mask validation to the rest of your jQuery Validate process, you can simulate a jQuery Validate error by doing the following:

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

score 2 · Accepted Answer · answered Sep 16 '15 at 12:42

2

It's not exactly the solution, but...

changing inputmask for some equivalent solves the problem.

Still far from perfect, though : (

EXPLANATION:

Other masking libraries, don't have these two strange behaviors mentioned, so it's possible to validate fields.

I used: https://github.com/digitalBush/jquery.maskedinput

answered Sep 16 '15 at 12:42

D. Cichowski

777
2
7
24

I'm glad you're posting about this issue as I'm having the exact same one. Did using jquery.maskedinput solved your problem? I'm using jquery.maskedinput too but I still get the error message on fields marked as required. – vegas2033 Jan 07 '16 at 18:56
It works for me. Getting error message is exacly the goal here. – D. Cichowski Jan 08 '16 at 09:13
I think we might have different version of the libraries because regardless of the entry (right or wrong), the mask always throw an error. – vegas2033 Jan 08 '16 at 14:15
Nevermind, I miscalculated the max attribute and didn't take in consideration the dashes added by the mask. It works – vegas2033 Jan 08 '16 at 14:54

score 1 · Answer 3 · answered Jan 17 '18 at 18:58

I have the same issue when combined these two libs together.

Actually there is a similar ticket here: https://github.com/RobinHerbots/Inputmask/issues/1034

Here is the solution provided by RobinHerbots:

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

The validator assumes that it is not empty when the mask focus/hover is there. simply turn focus and hover of the mask off will fix the problem.

score 0 · Answer 4 · answered Oct 18 '18 at 09:24

I solved this problem with:

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'
            },
        },

jQuery validation with input mask

4 Answers4