[CLOSED] Applying InputMask dynamically on the client

  1. #1

    [CLOSED] Applying InputMask dynamically on the client

    Hi,

    I am masking the mobile number textfield based on the country selection. so that i need to update the mask in javascript.
    I referred the forum http://forums.ext.net/showthread.php...e-client/page2

    But, this is applicable to 1.x, is there any update for 2.x to implement it easily or any inbuilt method to do this.
    Last edited by Daniil; Oct 22, 2013 at 2:40 PM. Reason: [CLOSED]
  2. #2
    Quote Originally Posted by MTSI View Post
    Hi,

    I am masking the mobile number textfield based on the country selection. so that i need to update the mask in javascript.
    I referred the forum http://forums.ext.net/showthread.php...e-client/page2

    But, this is applicable to 1.x, is there any update for 2.x to implement it easily or any inbuilt method to do this.
    I used App.Input1.setMask("9999999999-99999999999999"). its working it seems.
  3. #3
    I can able to change mask. also i applied regex to this field. I modified regex using "text1.regex='regularexpression'". When I am setting regular expression, I am getting Javascript error. Should I do any tweak? How to update mask and regular expression through javascript

    Error: Microsoft JScript runtime error: Object doesn't support property or method 'test'

    In the line if(regex&&!regex.test(value)){errors.push(me.regex Text||me.invalidText);}

    sample code mentioned below

    @model Ext.Net.MVC.Sample.Models.ExtNetModel
    @using Ext.Net
    @using Ext.Net.MVC
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>
        <script type="text/javascript">
            var onCountryChange = function (combo, records, eOpts) {
                App.Text1.regex = "^(\+91[\-\s]?)?[89]\d{9}$";
                App.Input1.setMask("+91 9999999999")
            }
        </script>
    </head>
    <body>
        @Html.X().ResourceManager()
        @(Html.X().Window()
            .Title(Model.WindowTitle)
            .Height(215)
            .Width(350)
            .DefaultButton("Button1")
            .Modal(true)
            .Layout("fit")
            .Items(Html.X().FormPanel()
                .DefaultAnchor("100%")
                .BodyPadding(5)
                .Frame(true)
                        .Items(Html.X().ComboBox()
                    .ID("ComboBoxCountry")
                    .Editable(false)
                    .QueryMode(DataLoadMode.Local)
                    .TriggerAction(TriggerAction.All)
                    .SelectOnFocus(true)
                    .EmptyText("Select a country")            
                    .Listeners(listen => { listen.Select.Fn = "onCountryChange"; })            
                    .Items(
                        new ListItem("US", "1"),
                        new ListItem("India", "2"),
                        new ListItem("Bulgaria", "3"),
                        new ListItem("Canada", "4"),
                        new ListItem("Chile", "5")
                            ), Html.X().TextField().ID("Text1")
                                    .Plugins(new InputMask { Mask = "(999) 999-9999", ID = "Input1", Placeholder = 'X', ClearWhenInvalid = false, AlwaysShow = true })
                                    .Regex(@"^\(\d{3}\)\s\d{3}-\d{4}$")
                )
                .Buttons(Html.X().Button()
                    .ID("Button1")
                    .Text("Submit")
                    .Icon(Icon.Accept)
                    .DirectClickAction("SampleAction")
                )
            )
        )
    </body>
    </html>
    Last edited by MTSI; Oct 10, 2013 at 7:36 AM.
  4. #4
    Hi @MTSI,

    A regex should be wrapped in "/".

    Please try:
    App.Text1.regex = /^(\+91[\-\s]?)?[89]\d{9}$/;
  5. #5
    Quote Originally Posted by Daniil View Post
    Hi @MTSI,

    A regex should be wrapped in "/".

    Please try:
    App.Text1.regex = /^(\+91[\-\s]?)?[89]\d{9}$/;
    Thanks Daniil.
    I hold the regex in combobox store as string
    Actually I am setting as
    App.Text1.regex = record.PhoneMask;
    How can I wrap the string?

    I used like this. but the regular expression is improper
    App.ContactTelephoneNumber.regex = /record.PhoneMask/;
  6. #6
    I tried like this

    App.Text1.regex = new RegExp(record.PhoneRegex);
    Its working.
    Thanks
  7. #7
    So, is the problem resolved? Can we closed the thread?
  8. #8
    Hi Daniil,

    Still I am facing issues.
    In this example both fields are not required.
    By Default the phone filed is having the value "(XXX) XXX-XXXX". because we masked it.
    Also we implemented regex in the phone filed.
    When I submit the form, the form is invalid.
    My understanding is the Masked value "(XXX) XXX-XXXX" is taking as phone field's value and its validating with the Regex ""^\(\d{3}\)\s\d{3}-\d{4}$"".
    So that it got failed. The masked value shouldn't take it as textfield's value. Is there any inbuilt functionality? or How to handle this.
    Also when I am entering the cursor to the phone field and come out from there with out editing and its showing error.
    I mentioned the updated sample code below.

    @model Ext.Net.MVC.Sample.Models.ExtNetModel
    @using Ext.Net
    @using Ext.Net.MVC
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>
        <script type="text/javascript">
            var onCountryChange = function (combo, records, eOpts) {
                App.Text1.regex = /^(\+91[\-\s]?)?[89]\d{9}$/;
                App.Input1.setMask("+91 9999999999")
            }
    
            var saveData = function (obj) {
                debugger;
                var form = obj.up('form').getForm();
                if (form.isValid()) {
                    alert('success');
                }
                else {
                    alert('error');
                }
            }
        </script>
    </head>
    <body>
        @Html.X().ResourceManager()
        @(Html.X().Window()
            .Title(Model.WindowTitle)
            .Height(215)
            .Width(350)
            .DefaultButton("Button1")
            .Modal(true)
            .Layout("fit")
            .Items(Html.X().FormPanel()
                .DefaultAnchor("100%")
                .BodyPadding(5)
                .Frame(true)
                        .Items(Html.X().ComboBox()
                    .ID("ComboBoxCountry")
                    .Editable(false)
                    .QueryMode(DataLoadMode.Local)
                    .TriggerAction(TriggerAction.All)
                    .SelectOnFocus(true)
                    .EmptyText("Select a country")
                    .Listeners(listen => { listen.Select.Fn = "onCountryChange"; })
                    .Items(
                        new ListItem("US", "1"),
                        new ListItem("India", "2"),
                        new ListItem("Bulgaria", "3"),
                        new ListItem("Canada", "4"),
                        new ListItem("Chile", "5")
                            ), Html.X().TextField().ID("Text1")
                                    .Plugins(new InputMask { Mask = "(999) 999-9999", ID = "Input1", Placeholder = 'X', ClearWhenInvalid = false, AlwaysShow = true })
                                    .Regex(@"^\(\d{3}\)\s\d{3}-\d{4}$")
                )
                .Buttons(Html.X().Button()
                    .ID("Button1")
                    .Text("Submit")
                    .Icon(Icon.Accept)
                    .Handler("saveData(this);")
                    //.DirectClickAction("SampleAction")
                )
            )
        )
    </body>
    </html>
  9. #9
    I fixed it. But dont know this is correct or not. I mentioned the modified code below. Please verify it and let me know in case any issues

    I modified the TextField as

    Html.X().TextField().ID("Text1")
                                    .GetErrors(error => { error.Fn = "getCustomErrors"; })
                                    .Plugins(new InputMask { Mask = "(999) 999-9999", AlwaysShow = true, ID = "Input1", Placeholder = 'X', ClearWhenInvalid = false, AllowInvalid = true })
                                    .Regex(@"^\(\d{3}\)\s\d{3}-\d{4}$")
    and added script section

    var getCustomErrors = function (value) {
                var errors = [];
                var me = this,
                regex = me.regex,
                allowBlank = me.allowBlank,
                value = value || me.processRawValue(me.getRawValue());
    
                if (value.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {
                    if (!allowBlank) { errors.push(me.blankText); }
                    return errors;
                }
                if (allowBlank && me.inputMask.mask.replace(/9/g, me.inputMask.placeholder) == value) {
                    me.clearInvalid();
                    return errors;
                }
                else {
                    if (regex && !regex.test(value)) {
                        me.markInvalid(me.regexText || me.invalidText);
                        errors.push(me.regexText || me.invalidText);
                    }
                }
    
                return errors;
            }

    Full Source

    @model Ext.Net.MVC.Sample.Models.ExtNetModel
    @using Ext.Net
    @using Ext.Net.MVC
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>
        <script type="text/javascript">
            var onCountryChange = function (combo, records, eOpts) {
                App.Text1.regex = /^(\+91[\-\s]?)?[89]\d{9}$/;
                App.Input1.setMask("+91 9999999999")
            }
    
            var saveData = function (obj) {
                //debugger;
                var form = obj.up('form').getForm();
    
                if (form.isValid()) {
                    alert('success');
                }
                else {
                    alert('error');
                }
            }
    
            var getCustomErrors = function (value) {
                var errors = [];
                var me = this,
                regex = me.regex,
                allowBlank = me.allowBlank,
                value = value || me.processRawValue(me.getRawValue());
    
                if (value.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {
                    if (!allowBlank) { errors.push(me.blankText); }
                    return errors;
                }
                if (allowBlank && me.inputMask.mask.replace(/9/g, me.inputMask.placeholder) == value) {
                    me.clearInvalid();
                    return errors;
                }
                else {
                    if (regex && !regex.test(value)) {
                        me.markInvalid(me.regexText || me.invalidText);
                        errors.push(me.regexText || me.invalidText);
                    }
                }
    
                return errors;
            }
    
        </script>
    </head>
    <body>
        @Html.X().ResourceManager()
        @(Html.X().Window()
            .Title(Model.WindowTitle)
            .Height(215)
            .Width(350)
            .DefaultButton("Button1")
            .Modal(true)
            .Layout("fit")
            .Items(Html.X().FormPanel()
                .DefaultAnchor("100%")
                .BodyPadding(5)
                .Frame(true)
                        .Items(Html.X().ComboBox()
                    .ID("ComboBoxCountry")
                    .Editable(false)
                    .QueryMode(DataLoadMode.Local)
                    .TriggerAction(TriggerAction.All)
                    .SelectOnFocus(true)
                    .EmptyText("Select a country")
                    .Listeners(listen => { listen.Select.Fn = "onCountryChange"; })
                    .Items(
                        new ListItem("US", "1"),
                        new ListItem("India", "2"),
                        new ListItem("Bulgaria", "3"),
                        new ListItem("Canada", "4"),
                        new ListItem("Chile", "5")
                                    ), 
                                    Html.X().TextField().ID("Text1")
                                    .GetErrors(error => { error.Fn = "getCustomErrors"; })
                                    .Plugins(new InputMask { Mask = "(999) 999-9999", AlwaysShow = true, ID = "Input1", Placeholder = 'X', ClearWhenInvalid = false, AllowInvalid = true })
                                    .Regex(@"^\(\d{3}\)\s\d{3}-\d{4}$")
                )
                .Buttons(Html.X().Button()
                    .ID("Button1")
                    .Text("Submit")
                    .Icon(Icon.Accept)
                    .Handler("saveData(this);")
                )
            )
        )
    </body>
    </html>
    Last edited by MTSI; Oct 11, 2013 at 12:18 PM.
  10. #10
    Quote Originally Posted by MTSI View Post
    I fixed it. But dont know this is correct or not.
    I am not sure I understand the initial issue.

    Could you, please, provide exact steps to reproduce the issue (-s) that you described in the post #8?

Similar Threads

  1. Replies: 1
    Last Post: Oct 13, 2013, 8:52 AM
  2. [CLOSED] Applying InputMask dynamically on the client
    By vadym.f in forum 1.x Premium Help
    Replies: 13
    Last Post: May 17, 2013, 4:18 AM
  3. Replies: 15
    Last Post: Apr 26, 2013, 5:37 AM
  4. [CLOSED] How to set regex dynamically on the client?
    By vadym.f in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 18, 2013, 12:20 PM
  5. Replies: 4
    Last Post: Dec 27, 2012, 12:07 PM

Tags for this Thread

Posting Permissions