Semantic-ui: [UI] Masked Input

[jlukic]

From @ph7vc #1703

Masked Input:

Developers can supply a regex or some kind of special pattern to JS, and it can be applied to a textbox. The mask would enforce a set of characters; I.E. phone numbers can't have letters in them and would visually give context. I.E. when people see () __ - __ they assume it's a phone number.

Examples
http://demos.telerik.com/kendo-ui/maskedtextbox/index

[mikmikmik]

Did you work on this?

[lsunsi]

That'd be pretty cool actually

[pedroivorbgrodrigues]

I've needed a mask based validation, so I searched and found this: https://github.com/RobinHerbots/jquery.inputmask. Amazing jquery plugin, still active, very powerfull.
And then I figured that an integration with Semantic-UI would be quite simple, for example:

I defined a phone mask this way:

<input type="text" name="phone" data-inputmask="'alias': 'phone'"/>

On my client/init.js I set the alias mask definition: (Yes, I'm using Meteor)

Inputmask.extendAliases({ 
          'phone': {
               mask: "((99) 9999-9999)|((99) 99999-9999)",
               keepStatic: true
          }
});

And the semantic validation rule:

maskedInputValidation = function (value) {
        var mask = $(this).inputmask("getmetadata");
        return Inputmask.isValid(value, mask);
    };
$.extend(true, $.fn.form.settings.rules, {mask: maskedInputValidation});

And here the rule usage at the template js file:

$("#form_with_mask_validations").form({
        on: 'blur',
        fields: {phone: ['empty,'mask']}
});

The rule defined above will work for any text based input fields (text, number....)

Hope it helps in some way. =]

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.