Search code examples
javascriptjquerytwitter-bootstrapvalidationmasking

jQuery validation with input mask


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

I use:

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

Solution

  • 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