jQuery Masked Input: Prevent field blank out on blur

Working on a client project, we had recently used jQuery Masked Input (http://digitalbush.com/projects/masked-input-plugin/) for the Mobile Number Mask Input. It was working fine and client was happy with this, until a request came from client as below:

Error: If a validation fails in the Contact # field, the alert appears & at the same time the field is blanked out.

Expected Behavior: Show the alert, but do not remove the already entered numbers. It can be a case that the user has entered 6 digits of the mobile # and forgot to enter the last one, but it is annoying to enter the complete number again.

When we replied that in this case we need to remove the mask and apply a different validation, the response was: “The users have gone used to it now & like the option. Can’t it remain with a validation in place?”

Then we started the research and were able to successfully accomplish the task with the following changes:

The following lines in the function checkVal(allow):

if (!allow && lastMatch + 1 < partialPosition) {
input.val("");
clearBuffer(0, len);
} else if (allow || lastMatch + 1 >= partialPosition) {
writeBuffer();
if (!allow) input.val(input.val().substring(0, lastMatch + 1));
}
return (partialPosition ? i : firstNonMaskPos);


were changed to:

if (!allow && lastMatch + 1 < partialPosition) {
if (lastMatch == -1) {
input.val("");
clearBuffer(0, len);
}
} else if (allow || lastMatch + 1 >= partialPosition) {
writeBuffer();
if (!allow) input.val(input.val().substring(0, lastMatch + 1));
}
return (partialPosition ? i : firstNonMaskPos);


What we are doing is pretty simple. We check for “lastMatch”which stores the index of last matched input character. If none is matched, then only we clear the input field, else the input remains as it is. While validating the input on form submit, we check the occurance of the underscore (“_”) character like below:

var obj1 = document.getElementById('txtContactNo');
if (obj1.value == '' || obj1.value.indexOf("_") > -1)
{
alert('Please specify a valid Mobile # e.g. 0091-1234567890');
return false;
}

Have a quality time ahead.

If a validation fails in any of the Contact # fields, the alert appears & at the same time the field is blanked out.
Leave a comment ?

30 Comments.

  1. [...] jQuery Masked Input: Prevent field blank out on blur | Team IT0091 Speaks [...]

  2. Hello there! I know this is kinda off topic however , I’d figured I’d ask. Would you be interested in exchanging links or maybe guest authoring a blog article or vice-versa? My site discusses a lot of the same subjects as yours and I feel we could greatly benefit from each other. If you happen to be interested feel free to send me an email. I look forward to hearing from you! Excellent blog by the way!

  3. tremendous issues here. I?
    My website is about Wedding planner.

  4. I never thought of it that way, well put!

  5. This really is a fantastic article i stumbled upon as a result of google and yahoo. I just benefit from to you and i want to find out in regards to this topic area present in some other current posting for those who have time for it to let us know in which. There’s no doubt that you’ll make the idea crystal clear alot more inside your subsequent thread and i’m actually awaiting this. Seriously watching for it all. Thanks. :) :)

  6. Wonderful goods from you, man. I have understand your stuff previous to and you’re just too excellent. I really like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it enjoyable and you still care for to keep it smart. I can not wait to read far more from you. This is really a tremendous site.

  7. The things i have observed in terms of computer memory is always that there are requirements such as SDRAM, DDR and many others, that must fit the specifications of the motherboard. If the computer’s motherboard is rather current and there are no os issues, modernizing the ram literally takes under 1 hour. It’s among the easiest laptop upgrade treatments one can think about. Thanks for expressing your ideas.

  8. That’s really srhwed! Good to see the logic set out so well.

  9. Tip top stuff. I’ll epxcet more now.

  10. I couldn’t resist commenting

  11. I really like reading and I think this website got some really useful stuff on it!

  12. Thanks for any other fantastic post. Where else may just anyone get that kind of information in such an ideal approach of writing? I’ve a presentation subsequent week, and I am at the look for such info.

  13. I think this is one of the most significant information for me. And i’m glad reading your article. But wanna remark on some general things, The web site style is wonderful, the articles is really nice : D. Good job, cheers

  14. Whats up are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any coding knowledge to make your own blog? Any help would be really appreciated!

  15. You really make it seem really easy together with your presentation but I to find this topic to be actually one thing that I believe I would by no means understand. It seems too complex and extremely wide for me. I am having a look forward for your next publish, I?ll try to get the hang of it!

  16. I feel that is among the so much significant info for me. And i’m happy reading your article. But want to observation on few general things, The web site style is wonderful, the articles is in reality great : D. Just right process, cheers

  17. Hope my comment makes it amongst all the spam above! (note the absence of reference to the actia; content of the post) I’m an actual human being and not a spam bot… I found this masked input change exactly what I was looking for. It should’ve been one of the options actually, maybe you could further alter it that way or I could do that as well in which case I’ll definitely quote ur URL. Thanks a lot anyway!

  18. I added settings.clearOnError that defaults to true, and then added an additional condition to yours:
    if(settings.clearOnError && lastMatch == -1)

    Thanks a lot, you saved me a lot of time!

  19. PS: sorry, the exact condition is:

    if(settings.clearOnError || (!settings.clearOnError && lastMatch == -1)) {

    Settings was first initialized earlier…

    settings = $.extend({
    placeholder: “_”,
    completed: null,
    clearOnError: true
    }, settings);

  20. An gripping discussion is couturier statement. I cogitate that you should pen author on this topic, it might not be a sacred master but mostly people are not sufficiency to communicate on specified topics. To the succeeding. Cheers like your jQuery Masked Input: Prevent field blank out on blur | Team IT0091 Speaks.

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>