OnComplete with optional chars

[3ynm]

Hello guys, I want know how can I achieve to get a "complete notification" considering optional chars, I don't know if it's a bug, but surely is a needed capability.

Here an example: http://jsfiddle.net/ddztrehg/1/

thanks!

[ccortezia]

Yes I got it too. The naive length comparison made in this line seems to be causing it.

[Furti87]

This would be my Solution for this Problem (not fully testet though)

        callbacks: function (e) {
            var val = p.val(),
                changed = val !== oldValue,
                defaultArgs = [val, e, el, options],
                callback = function (name, criteria, args) {
                    if (typeof options[name] === 'function' && criteria) {
                        options[name].apply(this, args);
                    }
                };

            /* Inserted by Furti87 */
            var minLength = 0;
            var maxLength = mask.length;

            for (var i = 0; i < mask.length; ++i) {
                var maskDigit = mask.charAt(i)
                var translation = jMask.translation[maskDigit];
                if (!translation || !translation.optional) {
                    ++minLength;
                }
            }

            callback('onChange', changed === true, defaultArgs);
            callback('onKeyPress', changed === true, defaultArgs);
            /* Changed by Furti87 */
            //callback('onComplete', val.length === mask.length, defaultArgs);
            callback('onComplete', val.length >= minLength && val.length <= maxLength, defaultArgs);
            callback('onInvalid', p.invalid.length > 0, [val, e, el, p.invalid, options]);
        }

[Heirema]

Sorry Furty87, your code doesnt work :disappointed: Dont sure something like '++i' can work anyway :wink: As I need this correction, I made some changements :

            callbacks: function (e) {
                var val = p.val(),
                    changed = val !== oldValue,
                    defaultArgs = [val, e, el, options],
                    callback = function(name, criteria, args) {
                        if (typeof options[name] === 'function' && criteria) {
                            options[name].apply(this, args);
                        }
                    };
                /* Inserted by Heirema */
        var CompletePossible = false, 
                maskDigit, translation;
                for (var i = val.length-1 ; i < mask.length-1 ; i++) {
                    maskDigit = mask.charAt(i+1);
                    translation = jMask.translation[maskDigit];
                    if (translation && translation.optional) {
                        CompletePossible = true;
                    } else {
                        CompletePossible = false;
                        break;
                    }
                }

                callback('onChange', changed === true, defaultArgs);
                callback('onKeyPress', changed === true, defaultArgs);
                /* Changed by Heirema */
                callback('onCompleteAcceptable', CompletePossible, defaultArgs);
                callback('onComplete', val.length === mask.length, defaultArgs);
                callback('onInvalid', p.invalid.length > 0, [val, e, el, p.invalid, options]);
            }
        };

Its adding a new callback : onCompleteAcceptable And its working fine for me :smile: If it can be usefull to someone ....

[Furti87]

Hi,

For my needs that did the trick.

In respect of ++i see: http://stackoverflow.com/questions/3469885/somevariable-vs-somevariable-in-javascript

There is a difference if you put the '++' in front or a the end ;-)

Thata difference xou can find im many programing languages like c, c++, c#, java and so on.

If it doesn't effect the context '++i' like in a for loop would always be slightly more performant because the interpreter doesn't need to evaluate the variable in advance.

Have a nice weekend.

Furti

Am 19.08.2016 um 22:47 schrieb Heirema:

Sorry Furty87, your code doesnt work 😞 Dont sure something like '++i' can work anyway 😉 As I need this correction, I made some changements :

` callbacks: function (e) { var val = p.val(), changed = val !== oldValue, defaultArgs = [val, e, el, options], callback = function(name, criteria, args) { if (typeof options[name] === 'function' && criteria) { options[name].apply(this, args); } }; /* Inserted by Heirema */ var CompletePossible = false, maskDigit, translation; for (var i = val.length-1 ; i < mask.length-1 ; i++) { maskDigit = mask.charAt(i+1); translation = jMask.translation[maskDigit]; if (translation && translation.optional) { CompletePossible = true; } else { CompletePossible = false; break; } }

|callback('onChange', changed === true, defaultArgs); callback('onKeyPress', changed === true, defaultArgs); /* Changed by Heirema */ callback('onCompleteAcceptable', CompletePossible, defaultArgs); callback('onComplete', val.length === mask.length, defaultArgs); callback('onInvalid', p.invalid.length > 0, [val, e, el, p.invalid, options]); } }; |

`Its adding a new callback : onCompleteAcceptable And its working fine for me 😄 If it can be usefull to someone ....

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/igorescobar/jQuery-Mask-Plugin/issues/265#issuecomment-241130816, or mute the thread https://github.com/notifications/unsubscribe-auth/APeI47PkmFd7LiZjSNFsPUw6_0mrreeDks5qhhZrgaJpZM4DZhft.

[Heirema]

Hi Furty, Yes, I admit I did not know. Always good to learn something ;) Thank you. Have a nice weekend too.

[deckar01]

I'm not able to determine if the input is complete when using optional or recursive characters.

With optional characters, the complete event doesn't fire until the last optional character is entered.

With recursive characters, the complete event only fires when the first recursive character is entered.

My use case is validating the input before the form is submitted, so it would be nice to have an interface for checking the input status that doesn't require listening to an event and maintaining each input's state myself.

[igorescobar]

As you guys see the implementation of this event is very very simple: https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/src/jquery.mask.js#L330 callback('onComplete', val.length === mask.length, defaultArgs);

It will only work if your mask doesn't have optional or recursive characters as pointed by @deckar01.

It wasn't better implemented basically because I can't figure a effective way to make it work on those situations. But I could implement something like reducing the number of required characters according to the number of optional chars and any recursive digits counts as only one.

[deckar01]

You might be able to determine if there are unfinished, required rules after each update.

[deckar01]

I decided to just perform my own regex validation for now. There is a little bit of duplication between the mask and the regex, but I needed to do some custom cleanup that the regex helped with anyway.