CODEWITHSUNDEEP
blazorblazor-client-side
tbdrz
tbdrz

Reputation: 2190

Blazor preventDefault on submit form

Inside my EditForm, I want to prevent that the user submits the form by pressing the Enter key.

I have tried the following, but didn't work.

<button type="submit" @onkeypress:preventDefault>Save</button>

Many thanks!

Upvotes: 2

Views: 8612

Answers (4)

tbdrz
tbdrz

Reputation: 2190

I have got this working by just putting 2 submit button's in the EditForm, with the first one disabled.

<button type="submit" disabled style="display: none" aria-hidden="true"></button>
<button type="submit">Save</button>

Upvotes: 10

Henk Holterman
Henk Holterman

Reputation: 273179

Here is an answer for JavaScript, it's also a plea not to do it: The Enter Key should Submit Forms, Stop Suppressing it

If you still want to do this: make sure your form has more than one input and no submit button. 

 <button type="button" @onclick="MySubmit">Save</button>

and then handle your validation in MySubmit, using an EditContext or whatever.

Upvotes: 2

enet
enet

Reputation: 45596

Here's a working code sample, run it and see for yourself that the form is not submitted when you hit the Enter key:

Enter a value into the first field, then second field, then tab out, and hit Enter. Now look what is printed in the Output window... Do you see the "Submit..." string ? I think not. 

<h1>My articles</h1>

<p>Leave me a comment</p>
<p>Note that the Save button is located outside of the EditForm component.</p>
<EditForm  Model="Model" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">Name: </label>
        <InputText Id="name" Class="form-control" @bind-Value="@Model.Name"> 
                                                             </InputText>
        <ValidationMessage For="@(() => Model.Name)" />

    </div>
    <div class="form-group">
        <label for="body">Text: </label>
        <InputTextArea Id="body" Class="form-control" @bind- 
                                         Value="@Model.Text"></InputTextArea>
        <ValidationMessage For="@(() => Model.Text)" />
    </div>
    <p>
        <button type="submit" @onkeypress="@KeyHandler" 
                              @onkeypress:preventDefault>Submit</button>
    </p>
</EditForm>


@code
{

    private Comment Model = new Comment();

    private void HandleValidSubmit()
    {
        Console.WriteLine("Submit...");
    }

    void KeyHandler(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
           return;
        }
        Console.WriteLine("KeyHandler...");

    }

}

Upvotes: 1

enet
enet

Reputation: 45596

Try this:

  <button type="submit" @onkeypress="@KeyHandler" 
                                  @onkeypress:preventDefault>Submit</button>

And this:

    void KeyHandler(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            return;
        }


    }

Upvotes: 0

Related Questions