title: Blazor Modal Form Validation: You've to click the cancel button twice to close the modal when you delete a form field
body: <p>In Blazor I'm using modal dialogs for CRUD. When I open a modal to edit a record and I delete (for example) the user name and then directly click the Cancel button, form validation still kicks in. The modal does not close.</p>
  
  <p><a href="https://i.stack.imgur.com/uLHJs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uLHJs.png" alt="Blazor Cancel Validation"></a>
  I need to click the Cancel button again to close the modal.</p>
  
  <p>I know I can put the cancel button outside the <code>EditForm</code>, but then you'll see a validation message flashing before the dialog closes. And I want my cancel button next to my submit button in the modal footer.</p>
  
  <p>Is there any way to override the form validation when I press the Cancel button? And I'd rather not want to use JavaScript Interop, just plain Blazor.</p>
  
  <p><em>Working Code Example:</em></p>
  
  <pre><code>@page "/cancel"
  @using System.ComponentModel.DataAnnotations;
  
  &lt;h3&gt;Cancel Validation&lt;/h3&gt;
  
  &lt;button type="submit" class="btn btn-primary" @onclick="Login"&gt;Login&lt;/button&gt;
  &lt;hr /&gt;
  &lt;p&gt;Status: @status&lt;/p&gt;
  
  @if (showModal)
  {
      &lt;div class="modal" tabindex="-1" role="dialog" style="display:block" id="taskModal"&gt;
          &lt;div class="modal-dialog shadow-lg bg-white rounded" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title"&gt;Login&lt;/h5&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;EditForm Model="user" OnValidSubmit="HandleValidSubmit"&gt;
                          &lt;DataAnnotationsValidator /&gt;
                          &lt;ValidationSummary /&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-3 col-form-label"&gt;Email: &lt;/label&gt;
                              &lt;InputText class="col-8 form-control" @bind-Value="user.Email" /&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-3 col-form-label"&gt;Password: &lt;/label&gt;
                              &lt;InputText type="password" class="col-8 form-control" @bind-Value="user.Password" /&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                              &lt;button type="button" class="btn btn-secondary" @onclick="CancelSubmit"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/EditForm&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  @code {
  
      public class UserLogin
      {
          [Required(ErrorMessage = "Email is required")]
          public string Email { get; set; }
  
          [Required(ErrorMessage = "Password is required")]
          public string Password { get; set; }
      }
  
      UserLogin user = new UserLogin();
  
      bool showModal;
      string status;
  
      protected override void OnInitialized()
      {
          showModal = false;
          status = "Init";
          // for demo purposes, if you delete user.Email in the login dialog, you'll need to press 'Cancel' 2 times.
          user.Email = "user@example.com";
          user.Password = "12345";
      }
  
      private void Login()
      {
          status = "Show Login Modal";
          showModal = true;
      }
  
      private void HandleValidSubmit()
      {
          status = "Valid Submit";
          showModal = false;
      }
  
      private void CancelSubmit()
      {
          status = "Cancelled"; 
          showModal = false;
      }
  }
  </code></pre>