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:

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

Answer 1

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.

Answer 2

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

Answer 3

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