Question: How to validate a @row_action or @action with form attribute?

[hasansezertasan]

As I said in #440, I'm using row_actions to create child-models. I have constructed the @row_action with the form parameter and some of the inputs are required and some of them have attributes like min=2023. When I click the Yes, Proceed button, the form is submitted without satisfying the form requirements, let's say leaving an input empty even if it is required, the modal just disappears without validating the form.

Environment (please complete the following information):

• Starlette-Admin version: [e.g. 0.12.2]
• ORM/ODMs: [SQLAlchemy]

[jowilf]

I think we need to check the validity of the form before submitting.

[hasansezertasan]

I'll check it if I can come up with a solution, keep in mind, that I'm not strong at JavaScript.

[hasansezertasan]

I added my modifications below:

starlette-admin/starlette_admin/statics/js/actions.js

Lines 42 to 68 in 769a85f

	initActionModal() {
	let self = this;
	$("#modal-action").on("show.bs.modal", function (event) {
	let button = $(event.relatedTarget); // Button that triggered the modal
	let confirmation = button.data("confirmation");
	let form = button.data("form");
	let name = button.data("name");
	let submit_btn_text = button.data("submit-btn-text");
	let submit_btn_class = button.data("submit-btn-class");
	let customResponse = button.data("custom-response") === true;
	let isRowAction = button.data("is-row-action") === true;
	let modal = $(this);
	modal.find("#actionConfirmation").text(confirmation);
	let modalForm = modal.find("#modal-form");
	modalForm.html(form);
	let actionSubmit = modal.find("#actionSubmit");
	actionSubmit.text(submit_btn_text);
	actionSubmit.removeClass().addClass(`btn ${submit_btn_class}`);
	actionSubmit.unbind();
	actionSubmit.on("click", function (event) {
	const formElements = modalForm.find("form");
	const form = formElements.length ? formElements.get(0) : null;
	self.submitAction(name, form, customResponse, isRowAction, button);
	});
	});
	}

as

  initActionModal() {
    let self = this;
    $("#modal-action").on("show.bs.modal", function (event) {
      let button = $(event.relatedTarget); // Button that triggered the modal
      let confirmation = button.data("confirmation");
      let form = button.data("form");
      let name = button.data("name");
      let submit_btn_text = button.data("submit-btn-text");
      let submit_btn_class = button.data("submit-btn-class");
      let customResponse = button.data("custom-response") === true;
      let isRowAction = button.data("is-row-action") === true;

      let modal = $(this);
      modal.find("#actionConfirmation").text(confirmation);
      let modalForm = modal.find("#modal-form");
      modalForm.html(form);
      let actionSubmit = modal.find("#actionSubmit");
      actionSubmit.text(submit_btn_text);
      actionSubmit.removeClass().addClass(`btn ${submit_btn_class}`);
      actionSubmit.unbind();
      actionSubmit.on("click", function (event) {
        const formElements = modalForm.find("form");
        const form = formElements.length ? formElements.get(0) : null;
        if (form && !form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
          console.log("Form is not valid but modal is closed anyway!")
          return;
        }
        else if (form) {
          console.log("Form is valid!")
          formElements.classList.add("was-validated");
        }
        else {
          console.log("There is no form!")
        }
        self.submitAction(name, form, customResponse, isRowAction, button);
      });
    });
  }

I searched on Google but couldn't find anything helpful to prevent the modal from closing. .preventDefault() and .stopPropagation(); doesn't seem to do anything here.

And I believe the submit button should be in the form instead of the div.modal-footer.

Note: I'm using an implementation of #375 here but It doesn't matter even if I pass a plain HTML string to the form attribute, same result.