RobinHerbots / Inputmask

Input Mask plugin
https://robinherbots.github.io/Inputmask/
MIT License
6.39k stars 2.17k forks source link

Oncomplete not work the first time #1947

Open alexdpts opened 6 years ago

alexdpts commented 6 years ago

Oncomplete checks does not work the first time after page load. After page load, i complete form fields and try to check it, but oncomplete function is not works, and all fields is marks as incomplete. I input space and delete it in each field, after this oncomplete check is works Windows 8.1 pro 64bit Google Chrome 67.0.3396.99 64bit Inputmask Version: 4.0.1-beta.23

Using via data-inputmask attributes

masks:

Form check code: `$(document).ready(function(){
$("#acceptRules").click(function(){

    if ( $("#accept").prop("checked") != true ){
        $("#accept").prop("checked", true);
        $("#send").prop("disabled", false);
    } else {
        $("#accept").prop("checked", false);
        $("#send").prop("disabled", true);
    }

});

var cfelems = document.forms.feedback.elements;
var cfValidator = [];
var formValid = false;

$.each(cfelems, function() {
    cfValidator.push(0);
});

// Fill validation array
    $("#send").click(function(){
        $.each(cfelems, function( index, value ) {
            var elementId = '#' + value.id;
            $(elementId).inputmask({
                oncomplete: function () {
                cfValidator[index] = 1;     
                $(elementId).removeClass("errorInput"); // Remove lighting - it's work                          
            },
                onincomplete: function () {
                cfValidator[index] = 0;
                $(elementId).addClass("errorInput"); // Lighting incomplete field - not work
            }
        });

    // Lighting incomlete fields, Unlighting complete fields
        if (cfValidator[index] == 0){
            $(elementId).addClass("errorInput");
        }else{
            $(elementId).removeClass("errorInput");
        }
    });

// Check validity
    var finder = cfValidator.indexOf(0);
    if ( finder != -1 ) {
        formValid = false;
        $.growl.error({ title: "Error", location: "br", message: "All fields must be completed." });
    } else {
        $("#accept").prop("checked", false);
        $("#send").prop("disabled", true);
        formValid = true;
    }
});

});`

A little video in attach oncomplete.zip

alexdpts commented 6 years ago

UPD. when i move part of code: $(elementId).inputmask({ oncomplete: function () { cfValidator[index] = 1; $(elementId).removeClass("errorInput"); // Remove lighting - it's work }, onincomplete: function () { cfValidator[index] = 0; $(elementId).addClass("errorInput"); // Lighting incomplete field - not work } upper than $("#send").click(function(){ problem is solved