C1MaskedInput: Validation.

Posted by: jaynarayan on 10 September 2017, 11:28 am EST

  • Posted 10 September 2017, 11:28 am EST

    I have a C1MaskedInput control for Phone number (Non-Mandatory). I have a regular expression validator to validate the phone number. When I skip the phone number the regular expression validator is not supposed to fire an error (like it used to behave for other textbox controls). Here is my code:




    </asp:RegularExpressionValidator>



    I see that the help shows how to do a "Alert box" on error.
    http://helpcentral.componentone.com/nethelp/c1inputpalomino/

    But I need to display it automatically like it does for other asp:RegularExpressionValidator controls.

    Is there a way to do it? (I know that Ajax tool kit has maskedInputextender and maskedInputValidator - Is there anything similar with C1?)
  • Replied 10 September 2017, 11:28 am EST

    I dont see the code above.. so posting it again: [It appears that the code is in my edit box, but does not show up on the forum - Sucks. You gotta fix the forum first.]




    </asp:RegularExpressionValidator>

    The error appears when I dont enter anything on the Fax. Also I dont want to show an alert box - I need to show the error like it used to in Regularexpressionvalidator.
  • Replied 10 September 2017, 11:28 am EST

    Validation is internally supported now, after build 145. If you get build x.0.20093.145 or later, you don't need write your own code in above thread.

  • Replied 10 September 2017, 11:28 am EST

    Hi, would you send me the code by email?


    TIA.


     

  • Replied 10 September 2017, 11:28 am EST

    I just sent you the code in the email.


    thanks

  • Replied 10 September 2017, 11:28 am EST

    I have an issue with this control when it is formatted as Phone Number, and user hits the browser (ie 8) maximize/restore button on top right, the values entered in the box is displayed some other place & not inside the box. When the user mouse over the control, it brings back the values inside the control. Is this a known issue? any fix available?


    <tr valign="top">


                       <td width="15%" align="right">


                           <asp:Label ID="Label7" runat="server" CssClass="textboxLabel">Cell Phone:</asp:Label>


                       </td>


                       <td  width="85%" align="left">


                        <cc1:C1MaskedInput ID="C1MaskedInputCellPhone"  ToolTip="Cell Phone Number" CssClass="textboxmasked"  Width="100" runat="server" InvalidInputColor="Red"


                                   Mask="(999) 000-0000"  UpDownAlign="None" />


                            <asp:CustomValidator ID="C1MaskedInputCellPhoneRegexValidator"  runat="server"  CssClass="contentalert" Display="Dynamic" ControlToValidate="C1MaskedInputCellPhone" ClientValidationFunction="ValidatePhoneRegex" ErrorMessage="* Please enter a valid Cell Phone Number."></asp:CustomValidator>


                       </td>


                   </tr>


     


    Normal View:



     


    Misaligned after hitting maximize/restore on browser:


     


  • Replied 10 September 2017, 11:28 am EST

    ASP.NET validator controls can't work on C1Input controls, because each C1Input control is composed by multiple layers of DIV along with the INPUT element in deepest. ASP.NET validator can only work with individual INPUT element.


    If user wants to do client side validating, we can write some simple code to achieve it. Here is a sample, in which client side validating is performed to validate whether the input number is a full phone/fax number.

    <script type="text/javascript">
       function ValidateMe(sender, args) {
            var value = sender._getInputElement().value.trim();
            if (value && value.length == 0) return;
            var exp = "((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}";
            var rx = new RegExp(exp);
            var matches = rx.exec(value);
            var isvalid = (matches != null && value == matches[0]);
            var msgSpan = document.getElementById(sender.get_id() + "_Msg");
            if (msgSpan) {
                msgSpan.style.display = isvalid ? "none" : "";
            }        if (!isvalid)
                sender._getInputElement().focus();
       }
    </script> <cc1:C1MaskedInput ID="C1MaskedInputFax" Width="100" runat="server" InvalidInputColor="Red"
    Mask="(999) 000-0000" UpDownAlign="None" OnClientBlur="ValidateMe" />
    <span id="C1MaskedInputFax_Msg" style="color:Red;display:none;">* Please enter a valid Fax Number.</span>

     


     

  • Replied 10 September 2017, 11:28 am EST

     New bits should be available within the next couple of weeks.

    Regards,

    -j

  • Replied 10 September 2017, 11:28 am EST

    How do I get the build 145? We purchased this two months ago.

  • Replied 10 September 2017, 11:28 am EST

    I can't reproduce this issue.


    Please let me know the definition of css class "textboxmasked".

  • Replied 10 September 2017, 11:28 am EST

    Finally the C1 team acknowledged the issue and fixed it.  --> It has been fixed in the latest build .194

  • Replied 10 September 2017, 11:28 am EST

    Okay, if anyone using this control and wondering about this issue, they washed off stating its IE issue. May be it will never get fixed.


    Please refer to the developers comments below.


    Can't do anything, Looks like a browser's issue. Because after moving the mouse over the inputs, all mask restored back to the correct position.


    -------------------------------


    The C1 controls are getting useless. Very disappointed.

  • Replied 10 September 2017, 11:28 am EST

    attached Sample code & CSS. FYI, it does not work on IE.


    2010/10/238936_TestApp.zip
  • Replied 10 September 2017, 11:28 am EST

    the assembly versions:


    C1.Web.UI.3.dll : 3.5.20101.72


    C1.Web.UI.Controls.3.dll : 3.5.20102.185

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels