Masked Textbox validation

[Marco Andrade]

Hi, we have set up a masked textbox and when you have an invalid entry, it highlights the placeholder text with a red background and the user is not allowed to continue, but we'd like it to use the same validations the rest of the form fields use, the HTML 5 validation using data annotations. Is there a way to toggle this ability you have added and let the form do the validation? We were just looking to have the validation be a bit more consistent.

Current Behavior:

- User leaves the masked field blank, hits submit. Before the other form validation occurs, the SF control highlights in red. See screenshot #1.

Expected Behavior:

- User leaves the masked field blank, hits submit. Form recognizes it as a required value and displays the popup as needed. See screenshot #2.

Code:

<Syncfusion.Blazor.Inputs.SfMaskedTextBox  Enabled="xxxxxxx"

                                              CssClass="xxxxxxx"

                                              HtmlAttributes = "xxxxxxx" 

                                              Readonly="xxxxxxx"

                                              Mask="00000-9999

                                              PromptChar="#"

                                              Placeholder="#####-####"

                                              Value="xxxxxxx"

                                              ValueChanged="xxxxxxx"

                                              ValueExpression="xxxxxxx"

                                              @onfocusout="xxxxxxx">

    </Syncfusion.Blazor.Inputs.SfMaskedTextBox>

    <ValidationMessage class="text-danger field-validation-valid" For="xxxxxxx" />

Attachment: Screenshots_b5724063.zip

[Ponmani Murugaiyan]

Hi Marco, 

Greetings from Syncfusion support. 

Query: User leaves the masked field blank, hits submit. Form recognizes it as a required value and displays the popup as needed. 

 

We have prepared sample as per your requirement. Please find the code snippet and sample below for reference. 

<EditForm Model="@annotation" OnValidSubmit="@HandleValidSubmit"> 

    <DataAnnotationsValidator /> 

        <SfTextBox id='textbox' @bind-Value="@annotation.TextValue"></SfTextBox> 

        <ValidationMessage For="@(() => annotation.TextValue)" />   

  

        <SfMaskedTextBox @bind-Value="@annotation.MaskValue" Mask="000-000-0000"></SfMaskedTextBox> 

        <ValidationMessage For="@(() => annotation.MaskValue)" /> 

 

    <button type="submit" class="btn btn-primary">Register</button> 

</EditForm> 

@code {  

    private Annotation annotation = new Annotation() {}; 

    private void HandleValidSubmit() 

    { 

        Console.WriteLine("OnValidSubmit"); 

 

    } 

    public class Annotation 

    { 

        [Required] 

        public string TextValue { get; set; } 

       [Required] 

        public string MaskValue { get; set; } 

    }  

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Mask1759780099  

Kindly check with the above sample. Please get back us if you need further assistance. 

Regards, 

Ponmani M