Stop Modal Form From Submitting If There Are Errors (Rails, Stimulus)

172 views Asked by At

I am not sure this is the best solution, but currently I have a sign up/login form using Devise. The validation is covered by devise and that is why I have copied the form over to a modal which I want to use for the registration. Currently, the error validation works but the modal is closed upon submitted. I need it to stay open when there are errors.

My thoughts were I could make a stimulus controller and from there I could provide some logic to prevent the form from submitting if there are errors. I'm pretty lost here so will need some help.

<!-- Modal -->
<div class="modal fade"  data-controller="modal" data-target="modal.modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Welcome! Please Log in</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= simple_form_for(resource, remote: true, as: resource_name, url: registration_path(resource_name), data: { action: "click->modal#submitForm" }) do |f| %>
            <%= f.error_notification, "data-search-target" => "error" %>

            <div class="form-inputs">
                <%= f.input :email,
                            required: true,
                            autofocus: true,
                            input_html: { autocomplete: "email" }%>
                <%= f.input :password,
                            required: true,
                            hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
                            input_html: { autocomplete: "new-password" } %>
                <%= f.input :password_confirmation,
                            required: true,
                            input_html: { autocomplete: "new-password" } %>
            </div>

            <div class="form-actions">
                <%= f.button :submit, "Sign up Now", class: 'btn btn-primary submit-button' %>
            </div>
         <% end %>

          <%= render "devise/shared/links" %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Log In</button>
        <%= button_to(
        "Log Out",
        destroy_user_session_path,
        method: :delete
      ) %>
      </div>
    </div>
  </div>
</div>

// Modal Controller.

import { Controller } from "@hotwired/stimulus"
export default class extends Controller {

    static targets = [ "query", "errorMessage", "results" ]
    
    submitForm() {
        ### logic to go in here to prevent the POST request from being called if there are form errors.
    }
}
0

There are 0 answers