How to add bootstrap form validation error message to password field?

Question

I'm creating a application in SyncFusion blazor which has a login page, in this login page I use the following form (+code):

<EditForm Model="@ModelValue">
        <DataAnnotationsValidator />
        <SfTextBox @ref="user" Placeholder="E-mail" Created="@onCreateUser" CssClass="custom-login" Type="InputType.Email" @bind-Value="@ModelValue.Email"></SfTextBox>

        <SfTextBox @ref="password" Placeholder="Password" Created="@onCreatePassword" CssClass="custom-login" Type="InputType.Password" @bind-Value="@ModelValue.Password"></SfTextBox>

        <SfCheckBox Label="Stay Signed In" @bind-Checked="rememberUser" CssClass="stay-signed-in-checkbox"></SfCheckBox>
        <SfButton CssClass="forgot-password-button">Forgot Password?</SfButton>

        <SfButton CssClass="login-button" OnClick="validateForm">LOGIN</SfButton>
</EditForm>



@code{

     private User ModelValue = new User();

     private void validateForm() {
         StateHasChanged();
     }

  class User
  {
    public int Id { get; set; }

    public string Email { get; set; }

    public string Password { get; set; }

  }
}

Somehow this code generates warning messages to the user when theres no "@" and characters after the "@" in the email field:

Error translated: "Use a "@" in the e-mail adress field. In "gtgtg" is missing a "@".

These warning messages look way better than just raw text of my own using data annotations in C#. What I'm trying to achieve is that these checks also occur on my Password field (check if minimum of characters is 7) and check if the fields email and password are not empty when clicking the submit button.

How can I achieve this?

NOTE: Im using Bootstrap 4.

Thanks in advance!

Umair · Accepted Answer · 2020-08-20 09:56:57Z

1

They are html browser validation popups

For your messages to appear as a popup, you will need to add HTML attributes "required" and "minlength" to the input boxes:

<input type="password" id="password" name="password" required minlength="7">

As you are using Synfusion button, I am assuming the above should work like this:

<SfTextBox @ref="password" Placeholder="Password" Created="@onCreatePassword" CssClass="custom-login" Type="InputType.Password" @bind-Value="@ModelValue.Password" required minlength="7"></SfTextBox>

required:

minlength:

Recommendation:

I recommend you have a look at FluentValidation and how it integrates with blazor

You can always change the UI from a text error to a bootstrap popup.

answered Aug 20, 2020 at 9:56

Umair

5,5714 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Niels Over a year ago

Somehow the warning is not popped up even when i entered like 3 characters in password field, how can i achieve "live validation" on these input fields?

Niels Over a year ago

If i enter a valid email and a password with 3 characters, press login button, im getting no warnings..

Niels Over a year ago

Only when typing it says u need 7 characters, curenntly u have 3 characters. But if i press the submit button it does not say that

Umair Over a year ago

The button to submit the form should be of type="submit" maybe check that?

Niels Over a year ago

Hi, can u check this post? stackoverflow.com/questions/63503641/… Video illustrates my problem. The Html form validation when clicking button is only applying to email field and not password field.

|

Collectives™ on Stack Overflow

How to add bootstrap form validation error message to password field?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related