0

I'm working on an advanced search page of a Django (3.2) project. I'm using pure javascript and Django's formset_factory to create a dynamic form where the user can create a hierarchy of forms containing advanced search criteria (for and/or groups). It works great. However...

Early on during development, before I wrote the javascript to pass the additional hierarchy information to views.py's form_valid method, Django (without me adding any specific code to do so) was performing nice form validation before submit and would present a nice tooltip that pointed to missing form fields, and the form (desirably) would not submit:

Advanced hierarchical search form(s) from an earlier version of my project.  Ignore the debug "Query was empty" output

When I implemented the javascript to save the hierarchy information, attached to a listener on the submit button, I noticed that the tooltip would appear for a fraction of a second and the invalid form would inappropriately submit. Here's the code that was introduced that inadvertently bypassed Django's automatic form validation:

    <script>
        document.addEventListener("DOMContentLoaded", function(){
            appendInnerSearchQuery(document.querySelector('.hierarchical_search'), 0, rootGroup);

            var myform = document.getElementById("hierarchical_search_form");
            document.getElementById("advanced_search_submit").addEventListener("click", function () {
                saveSearchQueryHierarchy(document.querySelector('.hierarchical_search'));
                myform.submit();
            });
        });
        
        console.log("Ready with rootGroup: ", rootGroup);
    </script>

In fact, subsequent efforts appear to submit even before the tooltip has a chance to show up, presumably due to the time it takes to validate, and the form is submitted before Django's automatic form validation has completed.

I understand why this breaks/overrides Django's automatic form validation. What I have been trying to figure out is:

  1. How do I (in javascript) wait for Django's automatic form validation to complete?
  2. How do I check the result of the form validation in javascript, so I can decide whether or not to call myform.submit()?

I have been googling this for a couple days now and cannot find anything that tells me how to, in javascript, retrieve Django's automatic form validation result. Everything I have found addresses validating in javascript from scratch. I would rather use Django's automatic validation mechanisms, so I can specify them in the class I created in forms.py.

5
  • 1
    You should listen for the form's submit event instead of the button click. If validation fails then the submit event will be prevented Commented Jun 29, 2021 at 15:08
  • @IainShelvington Will that allow me to manipulate the values in the form? I.e. will the changes I make to the values of hidden form fields be reflected in the submitted data? Commented Jun 29, 2021 at 15:31
  • Does this help? stackoverflow.com/a/6912264/548562 Commented Jun 29, 2021 at 15:35
  • @IainShelvington Yes, it looks like that should do what I want. I'll try this out later today & follow up here. So to summarize: I listen for the form's submit event to trigger Django's automatic form validation. If it validates, a submit event occurs, & I can use onsubmit to call saveSearchQueryHierarchy. I might have some issues. I was just looking at the latest code, & I noted that it changes the element IDs (to replace __prefix__ with a form index) to match what Django expects. But maybe I can split up the work & do that on click and edit values on submit. Not sure that's necessary. Commented Jun 29, 2021 at 15:48
  • I know it's been awhile, but I just tried your suggestion @IainShelvington. The form still inappropriately submits. Must be something else going on... Commented Jan 7, 2022 at 16:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.