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!

score 1 · Accepted Answer · answered Aug 20 '20 at 09:56

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 '20 at 09:56

Umair

4,864
3
28
47

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 Aug 20 '20 at 10:19
If i enter a valid email and a password with 3 characters, press login button, im getting no warnings.. – Niels Aug 20 '20 at 10:22
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 – Niels Aug 20 '20 at 10:23
The button to submit the form should be of `type="submit"` maybe check that? – Umair Aug 20 '20 at 11:13
Hi, can u check this post? https://stackoverflow.com/questions/63503641/how-to-use-html-form-validation-on-button-click Video illustrates my problem. The Html form validation when clicking button is only applying to email field and not password field. – Niels Aug 20 '20 at 11:17
Or how can i change the "" Into a bootstrap alert? – Niels Aug 20 '20 at 11:46

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

1 Answers1