[Bug]: Validation on InputMask is not kicking off and binds the input mask

[sturlath]

Blazorise Version

1.3.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction, or a simple code snippet

I might be doing this wrong but I have this code

<Fields>
    <Validation MessageLocalizer="@Localize">
        <Field ColumnSize="ColumnSize.Is3.OnDesktop.Is3.OnWidescreen">
            <FieldBody>
                <FieldLabel>@L["Kennitala"]</FieldLabel>
                <InputMask Mask="999999-9999" @bind-Value="@BankInformation.Kennitala" >
                     <Feedback>
                        <ValidationError />
                    </Feedback>
             </InputMask>       
            </FieldBody>
        </Field>
    </Validation>
</Fields>

with

  [Required(ErrorMessage = "Required")]
  [StringLength(11, ErrorMessage = "Mustbebetween10and11characters", MinimumLength = 10)]
  public string Kennitala { get; set; }

but only the Required part is validated but not the MinimumLength one

and what happens is that this value gets safed 3_____-____

Steps to reproduce

see above

What is expected?

The validation should kick off and not allow the mask value to be bound.

What is actually happening?

Only one value is enough to get past the validation and bind to the inputmask...

What browsers are you seeing the problem on?

Microsoft Edge

Any additional comments?

No response

[stsrki]

I suspect that the Value of the InputMask always has _ as part of the mask value. So the final Value will always have 11 characters which can be considered a valid value.

Can you try setting the AutoUnmask="true" so that the _ are stripped away?

[sturlath]

That didn´t solve it

[tesar-tech]

Hi @sturlath.
I am trying to reproduce the issue, but it really seems the AutoUnmask is the solution:

b3fad880-3d24-47cd-9434-a6204e6bac5c.mp4

It either has been fixed along the way between versions, or you have some specifics in your code, that I cannot reproduce.

Here is my full working code. .net9, server interactivity, Blazorise 1.7.2.

@page  "/im"
@using Blazorise
@using System.ComponentModel.DataAnnotations
<Validations Mode="ValidationMode.Auto" Model="@bankInfo">
    <Fields>
        <Validation >
            <Field ColumnSize="ColumnSize.Is3.OnDesktop.Is3.OnWidescreen">
                <FieldBody>
                    <FieldLabel>Label</FieldLabel>
                    <InputMask AutoUnmask Mask="999999-9999" @bind-Value="@bankInfo.Kennitala" >
                        <Feedback>
                            <ValidationError />
                        </Feedback>
                    </InputMask>
                </FieldBody>
            </Field>
        </Validation>
    </Fields>
</Validations>
@code {
    
    BankInformation bankInfo = new();

    public class BankInformation
    {
        [Required( ErrorMessage = "Required" )]
        [StringLength(11, ErrorMessage = "Mustbebetween10and11characters", MinimumLength = 10 )]
        public string Kennitala { get; set; } 
        
    }

}

Please re-test and let me know.