Looking for a way to strip the mask before posting

34 posts, 0 answers
  1. Akesh Gupta
    Akesh Gupta avatar
    5 posts
    Member since:
    Mar 2004

    Posted 18 Apr 2014 Link to this post

    We want to use the MaskedTextBox, but we don't want the Masks saved in the database, is there an option to post the unmasked value?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 22 Apr 2014 Link to this post

    Hello,

    To modify the posted value, you will need to wire the form submit event. When event is triggered, you can replace any unwanted character. Check this Kendo Scrathpad demo.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Akesh Gupta
    Akesh Gupta avatar
    5 posts
    Member since:
    Mar 2004

    Posted 22 Apr 2014 in reply to Georgi Krustev Link to this post

    I'm leaning towards modifying the control to have a hidden textbox with the unmasked value in it the way most other kendo controls work. It's a much cleaner solution that won't require custom coding for every instance and mask. I'm actually surprised that the control doesn't store the unmasked value.
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 23 Apr 2014 Link to this post

    Hello,

    The MaskedTextBox widget is designed to hold the whole value in one input element and that is why the placeholders are sent to the server too. A possible enhancement of current widget behavior is to strip the placeholder characters on blur. Do you mind open a UserVoice item on this subject? Thus we will gather community feedback for this functionality.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 16 May 2014 in reply to Georgi Krustev Link to this post

    Georgi Krustev said:Hello,

    To modify the posted value, you will need to wire the form submit event. When event is triggered, you can replace any unwanted character. Check this Kendo Scrathpad demo.



    Your example only strips the placeholder chars rather than the whole mask.  Why isn't there simply a property such as StripMaskBeforePost that auto-strips the mask when set to true built in?  I attempted to visit the UserVoice area you linked; however, the url results in a 404 error.
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 19 May 2014 Link to this post

    Hi Bobby,

    Please excuse me for the incorrect UserVoice link. Here is the correct one:
    http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback
    Any feature request should be posted there as this is the best community source, which affects and forms our future road-maps.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 30 Jan 2015 Link to this post

    I came up with a workaround for unmasking values that are databound to an observable when using MVVM. A single maskedtextbox change event handler can strip the formatting for any value binding:
    <ul data-role="listview">
       <li>
           <label>
               Home Phone:
               <input type="text" data-role="maskedtextbox" data-bind="value: homePhone, events: { change: maskStrip }" data-mask="(000) 000-0000" />
           </label>
       </li>
       <li>
           <label>
               Cell Phone:
               <input type="text" data-role="maskedtextbox" data-bind="value: cellPhone, events: { change: maskStrip }" data-mask="(000) 000-0000"/>
           </label>
       </li>
    </ul>
    var vm = kendo.observable({
        homePhone: null,
        cellPhone: null,
        maskStrip: function (e) {
            var that = e.sender,
                stripped = that._unmask(that.value()),
                obs = e.data,
                val = that.element.data("bind");
            if (val) {
                val = val.substring(val.indexOf('value: ') + 7); //remove properties before
                if (val.indexOf(',') > -1) val = val.substring(0, val.indexOf(',')); //remove properties after
                obs.set(val, stripped);
            }
        }
    });

    Check out this fiddle:
    http://jsfiddle.net/TaeKwonJoe/vvo95t6h/

    Also I enhanced kendo.maskedtextbox.js for v2014.2.903 so that any masked textbox with a data-strip="true" attribute will do this automatically without implementing your own custom change event handler.
    <input data-role="maskedtextbox" data-bind="value: transactions.clients.details.instance.CellPhone" data-mask="(000) 000-0000" data-strip="true" required />
  9. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 03 Mar 2015 Link to this post

    I'm just starting to use Kendo for our new website and unfortunately didn't notice this HUGE flaw in their masked text box until after purchased the package.   Is Telerik serious?   There's no way for the control to offer up a the unmasked data without its users coding their own functions?   This is a bad sign and I hope I didn't make a mistake buying into this library of js.   Even free half baked jQueryUI controls offer this feature.   Terrible news
  10. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Mar 2015 Link to this post

    Hello Mike,

    As I pointed in the support thread opened on the same subject, we will add a special method that will allow to retrieve the unmasked value. The enhancement will be available in the next official release of Kendo UI due the mid of this month.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 04 Mar 2015 in reply to Georgi Krustev Link to this post

    Yes Georgi, I opened a support ticket after I had searched the web and Telerik for a solution.   I just read your similar response on my ticket and I am VERY happy to see this is coming soon.  

    Since we are going to use Telerik's MVC Razor wrapper for accessing the Kendo controls (one of the things that sold us on your package), it seemed we had no client side js script workarounds since the wrapper wires up to the view model directly and seamlessly.   The only solution for MVC developers would seem to be an intentional misrepresentation of the data in the View Model (field length 14 rather than 10), and then a server side routine to strip the erroneous data before injecting it back into the database.   An ugly solution indeed and I'm glad Telerik is making this a priority enhancement!

    Thanks for the good news.
  12. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 05 Mar 2015 Link to this post

    Hello Michael,

    The method is already implemented and will be available in Q1 2015 release of Kendo UI.

    I would like to clarify that MaskedTextBox will not modify its value on post. This means that the value of the widget will contain the mask characters on post, until the developer decides to modify the input element manually. This behavior is not related to UI for ASP.NET MVC, but rather is a general HTML approach related to successful controls and their post behavior.

    To sum up, the widget will have a method that retrieves the unmasked value, but the widget will still post the masked value. This is related to the fact that the widget actually uses an input element that posts its value and we do not modify it during the form post. This is applicable to ASP.NET MVC too, because the Html helpers (event built-in ones) don't interfere the values that comes from the client either with regular form post or with an Ajax request.

    Let me know if something is not clear.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 05 Mar 2015 in reply to Georgi Krustev Link to this post

    I think its clear.  So for us using the MVC wrapper, there will still be no way to unmask the data from the client side.  And Telerik thinks this is good practice?    It undermines the entire benefit of using a framework like ASP.Net MVC which forces the developer to adhere to a tightly coupled relationship with Model, View, and Controller.   As a result, those who use your control will need to misrepresent the data model in MVC and show a telephone number as 14 characters when it is really 10 in the physical database.   We do not use Microsoft's Entity Framework which generates even more of the plumbing for you on the backend.   Luckily we hand code our database layer so we will certainly be able to write a C# function on the backend to strip it before saving.   But not sure how easy that will be for EF users.

    In short Georgi, I thing your company is off track and simply wrong.   You're trying to follow some self imagined "best practice" for your own convenience I suspect and I don't buy your answer.   If I'm wrong, feel free to explain, in detail, how so.  Also, explain how an ASP.Net MVC developer is going to get the raw data entered by the user on the CLIENT side before sending it to the server because that also would be best practice..   If there's a way I'll shut up.  If not, you need to rethink your position and get coding on an option switch.
  14. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 05 Mar 2015 Link to this post

    This thread has gotten popular again and from the newer replies it sounds like Telerik still isn't interested in stripping masks before post for those of us using their ASP.NET MVC wrappers.  Therefore, I wanted to share the following javascript we use to achieve this.  Currently, we only use the MaskedTextBox for phone numbers; however, you should be able to update the regex to strip out whatever mask you are using.

    01.var $forms = $("form").has("input[data-role='maskedtextbox']");
    02. 
    03.$forms.submit(function () {
    04.    var $maskedtextboxes = $(this).find("input[data-role='maskedtextbox']");
    05.    $maskedtextboxes.each(function (index, element) {
    06.        // Strip mask characters
    07.        element.value = element.value.replace(/[()\s-_]/g, "");
    08.    });
    09.});
  15. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 05 Mar 2015 in reply to Bobby Link to this post

    Thanks Bobby.   Forgive my ignorance, but I'm new to web dev.  Been doing WinForms dev for years but fumbling around right now getting my sea legs with this very different environment.

    I will try this later today.  So you are saying this little piece of js will execute before the post back executes and passes this to the controller?   if so, great!  

    Also, if this is true, why didn't Telerik just suggest this?   Also, makes you wonder how friggin hard this would be to just add to their control with an option switch to control it.  The argument that this is somehow bad practice is a joke.  Do they really want us to believe that.   Best practice is what gets the job done with the least amount of effort and money for development and ongoing maintenance.   That's best practice!   I don't want a lecture from my suppliers, I just want them to save me money.
  16. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 05 Mar 2015 in reply to SpicyMikey Link to this post

    PostBacks are more of a WebForm term than an MVC term, but yes if you place the javascript in the jQuery document.ready() method it will modify the form submit process to strip the mask from the textbox element before posting the form back to the server.  It's worth noting that the code is written in a fairly generic way so that it auto-detects forms that contain MaskTextBoxes and only modifies their submit process.  You will likely need to update the regex to strip different chars out if you use the MaskTextBoxes for more than just phone numbers.
  17. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 05 Mar 2015 in reply to Bobby Link to this post

    I understand.  Yes, I am no expert in this area yet, but this is a big help!  I'm sure I can take this and run with it.  Thanks again. 
  18. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 05 Mar 2015 in reply to SpicyMikey Link to this post

    So using your code Bobby, I decided to try and tag the maskedtextbox controls with a unique type and then search for that in the function.   This will help me isolate and control what gets processed.   I'm sure there are other ways.   The only draw back is that this affects the UI so there is a "blink" when the user submits the page and they see the masking get stripped away.   Still think Telerik should just make this intrinsic in the control and allow us to control what it passes back to the model element that is mapped to it.   The upcoming .Raw might make the script cleaner but it will still be necessary.

    Thanks again Bobby.

    <div class="input-sm  col-xs-8  col-sm-6">
      @(Html.Kendo().MaskedTextBoxFor(model => model.HomeTelNum1)
                                .Name("HomeTelNum1")
                                .Mask("(999) 000-0000 &&&&&&&&&&&&&&&&&&&&")
                                .ClearPromptChar(true)
                                .HtmlAttributes(new { @type = "telnum" })
       )

    $(document).ready(function() {
      var $forms = $("form").has("input[data-role='maskedtextbox']");  $forms.submit(function ()
      {
        var $maskedtextboxes = $("form").has("input[data-role='maskedtextbox']").find("input[type=telnum]");
        $maskedtextboxes.each(function (index, element)
        {
          // Strip mask characters
          element.value = element.value.replace(/[()\s-_]/g, "");
        });
      });});
  19. Bobby
    Bobby avatar
    24 posts
    Member since:
    Nov 2013

    Posted 05 Mar 2015 in reply to SpicyMikey Link to this post

    Yes, I agree that Telerik should just build the functionality into their control.  I'm not sure why you would ever want to save the mask to the database; although, a boolean flag to turn the feature on/off would allow the dev to decide either way.

    As an aside, the code you posted is slightly incorrect (particularly the var $maskedtextboxes line) and should be more like:
    $(document).ready(function() {
        // Gets all forms that contain at least one maskedtextbox
        var $forms = $("form").has("input[data-role='maskedtextbox']");
     
        // Update the submit function for all of the found forms
        $forms.submit(function () {
            // Find all of the maskedtextboxes (that are also of type 'telnum') contained within the form that's about to be submitted
            var $maskedtextboxes = $(this).find("input[data-role='maskedtextbox']").find("input[type='telnum']");
            $maskedtextboxes.each(function (index, element) {
                // Strip mask characters from each of the obtained maskedtextboxes
                element.value = element.value.replace(/[()\s-_]/g, "");
            });
        });
    });

    I've added some more comments to help better explain what each piece of the code is doing.  The way you wrote your version of the code, it would strip the mask off of all maskedtextboxes rather than just the ones within the current submitted form.  I'm not sure if this is what causing the blinking you mentioned, or if it's just a general downside of the stripping.

    In addition, var $maskedtextboxes = $(this).find("input[data-role='maskedtextbox']"); already finds all of the maskedtextboxes contained within the form that's about to be submitted, so you don't have to manually mark them (i.e. type="telnum") unless you are using 2+ different masks.  Even then, you don't have to manually mark them unless you can't write the regex expression generically enough to handle all the masks at the same time.
  20. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 05 Mar 2015 in reply to Bobby Link to this post

    Thanks Bobby. I told you I don't know what I'm doing :)   Especially with jquery.  The syntax has me standing on my head to read it.  It's just not conventional to any other programming language I've used over 20 years of doing this.   I suppose if you learned programming in this world it all seems second nature. 

    Yes I'm adding the extra identifier so I can control what funnels into this function and what doesn't.  This will work for tel#'s, zipcodes, etc., but in case there are other things down the road, I wanted to isolate it.

    As far as "blinking"; that was the wrong word.  All I was saying is that the function executes faster than the page refreshing after the post (even using ajax.beginform to isolate the affected div).  So the user sees the mask disappear the moment they press submit.   It's not professional looking but it will have to do.  

    Thanks for the updated code, and the inline comments.  I'm sure this is going to help many others that stumble across this thread.  
  21. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 05 Mar 2015 in reply to Bobby Link to this post

    FYI: That double '.find' syntax just doesn't work for me.   I had to go back to using .has first and then .find.   Other than that, your version worked perfectly. I also changed the type designator to be more generic.  This is what I'd use for tel#'s and zips, and ssn's, etc.  if something came along where that didn't work, I'd add another handler for that.   Thanks!

    var $maskedtextboxes = $(this).has("input[data-role='maskedtextbox']").find("input[type='unmaskstandard']");
  22. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 09 Mar 2015 Link to this post

    Hello,

    I would like to inform you that we've decided to add the "unmasking on post" functionality for the upcoming release. Thus developers that want to strip the value on post will not need to do this manually. Instead, they will just set an option that will control this behavior.

    Please note that this functionality will work only for regular form posting. Scenarios where Kendo UI MVVM or AngularJS are used, the model field will be set to the masked value, because the available bindings/directives use widget's value method.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  23. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 09 Mar 2015 in reply to Georgi Krustev Link to this post

    That's great to hear Georgi.   I'm sure many are happy to hear this.  I know I am!  

    We certainly have a js solution for now, but it is flawed and does not present a clean visual UX since the user can see the affects of the script running and the mask vanishing from the textboxes before the controller returns it's response and the screen refreshes.  

    An intrinsic control solution that leaves the display box intact but quietly returns an unmasked version to the server is indeed the ultimate solution.  When is the ETA of this "upcoming release"?  

  24. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 11 Mar 2015 Link to this post

    Hello,

    The next official release is due the mid of next week (mid of March 2015). 

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  25. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 26 May 2015 in reply to Georgi Krustev Link to this post

    Georgi,

     

    It's been a couple months since I last posted and the project was put aside since then for other priorities.  But its back on the front burner and I'm looking to implement this change.  In March you said this new feature would be added shortly.  I assume its available now and our normal updates already have it available to the project.  But how do we find out how this feature was implemented?  Where is documentation?   I've searched online and don't seem to see anything.   Thanks

  26. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 27 May 2015 Link to this post

    The option is named "unmaskOnPost" and the corresponding documentation can be found here:
    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  27. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 27 May 2015 in reply to Georgi Krustev Link to this post

    Thanks Georgi.  I saw that.   I tried that yesterday.  It had no effect of stripping masking characters before the value was returned to the controller.   I thought that might have been something that only affected the UI.

     

    Am I doing something wrong?    I simply added it as follows but the mask was still passed back to the bound model in the controller.

    @(Html.Kendo().MaskedTextBoxFor(x => Model.WorkTelNum)
                                 .Mask("(999) 000-0000")
                                 .ClearPromptChar(true)
                                 .UnmaskOnPost(true)
    )

  28. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 29 May 2015 Link to this post

    The widget works as expected on our end. Here is a screencast that depicts our test.
    The repro demo is attached to this ticket.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  29. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 01 Jun 2015 in reply to Georgi Krustev Link to this post

    Hmmm, you're right.  Your demo worked.  yet if I do the same thing in my "real world" app it doesn't.  I tried adding some more complexity to your demo, like doing it inside an ajax call and more complex html page, but it still worked.  I also upgraded your demo to the latest build (which it was not using).   It still works.   So there is something in my project that is breaking this and I don't know what it is.   I'll look further.  If I find the cause I'll post it here.  if not, I'll take this offline and open a "ticket".

     Thanks for the demo. 

  30. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 02 Jun 2015 in reply to SpicyMikey Link to this post

    Georgi, I found my issue.  the project was still pointing to the older build of Kendo so the UnmaskOnPost was behaving as before.   Once updated it worked like a charm!   Thank you very much.  This is a very nice enhancement to the tools and simplifies the js  
  31. Alfredo
    Alfredo avatar
    4 posts
    Member since:
    Oct 2010

    Posted 24 Aug 2015 Link to this post

    Hi everyone

     I tested the solution provided by Georgi and i think is something good to start ..in my case i am looking for a different solution though

    In my code I need to send my form by hand ( i dont have a sunimit button on the form) ...i mean i use the serializeArray function from jquery and we still receive the complete text (mask included on it)...is there any way to include a general property that a developer can access to it in all cases?. I use many different masks and i would like not to have to program a method for get the text of every MaskedText

     thanks a lot for your help 

     

Back to Top
Kendo UI is VS 2017 Ready