BootstrapInputNumber bind to nullable short value

[Ddd-Jw]

When using BootstrapInputNumber component and have it bind to a nullable short as below.

This input number component is then placed inside validate form.

However, when you enter numbers with a single decimal - e.g 2.6. The component clears the field and displays a green plus red outline with a green tick like shown below.

When you try to submit the form, the Validator.Validate() will return false, resulting an invalid submit.

Note: I've also tried using BootstrapInput like below

This approach will prevent it from returning invalid submit when user tries to input decimals, but similar behavior when you try to enter any characters into the field. It does clear the characters entered, but it does not validate the field.

The expected behavior is that it clears the field if an invalid number or character is input by user, also validate the field again after the component automatically clears the invalid input, when it is in a validate form component.

I've noticed that when the field is cleared, its class is class="form-control modified invalid is-valid". Which is why the style is wrong.

Where it should be either "valid is-valid" or "invalid is-invalid" right?

Any answer is greatly appreciated.
Many Thanks.

[ArgoZhang]

@Ddd-Jw could you provide a simple repro project?

[Ddd-Jw]

Please find the repro below.

ReproProject.zip

[ArgoZhang]

@Ddd-Jw

It is recommended to use project templates for project creation follow the below link
https://www.blazor.zone/template

in your project

please remove the below style in app.css

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

[Ddd-Jw]

Hi @ArgoZhang ,

Thanks for coming back to me.

I think the real problem here is the UI does not reflect the field will fail validation when you try to submit.

Steps to help understand:

1. Tries to type character "a" into a BootstrapInput component.
2. The character "a" disappears (Gets cleared automatically) in the BootstrapInput component field.
3. The BootstrapInput component UI doesn't show red outline.
   
4. Tries to submit (Might happens when user just decide not to enter anything anymore).
5. Invalid Submit.
   
6. Users have no idea which field is causing the invalid submit, because there is no error message or any warning signs to the field.

Similar things happen to BootstrapInputNumber component, the only difference is that in BootstrapInputNumber you enter a number with one decimal place only (e.g. "2.6") instead of characters.

Really appreciate the help.
David

[ArgoZhang]

@Ddd-Jw missing Required attribute

public class TestModel
{
    public int TestId { get; set; }

    [Required]
    public short? TestNo { get; set; }
}

BTW: can't input the a in BootstrapInputNumber this is browser behavior.

if you wanna validate a in BootstrapInput you should add Regex attribute. Use regular expressions to determine whether user input is legal.