Submit button onClick function only if all requested inputs are filled

Question

I have a form with mandatory inputs and added a onClick event listener on the submit button to display a loading git when the program is charging. The problem is that the onClick function is triggered every time the button is clicked and I want it to be only if the form is complete and sent.

How can I put a condition in my jQuery function for that ?

Here is the HTML and JS:

<div id="loading"></div>
<div id="content">
<form enctype=multipart/form-data action={{url_for('upload_file')}} method="POST" enctype="multipart/form-data">
            <h3>MGR</h3>
            <label for="file-input" class="col-sm-4 col-form-label">The music (.wav or .mp3):</label>
            <input type="file" id="file-input" name="file" class="form-control w-100" required="true"/><br>
            <br>
            <div class="form-group">
                <h4>Select a model</h4>
                <input type="radio" id="logreg" name="model" value="logreg" required>
                <label for="logreg">Logistic regression</label><br>
                <input type="radio" id="knn" name="model" value="knn">
                <label for="knn">K-nearest neighbors</label><br>
                <input type="radio" id="randomforest" name="model" value="randomforest">
                <label for="randomforest">Random forest</label><br>
                <input type="radio" id="svm" name="model" value="svm">
                <label for="svm">Kernel SVM</label><br>
            </div>
            <input type="submit" value="Submit" onclick="loading();" class="btn btn-primary"></form>
</div>

<script type="text/javascript">
    function loading(){
        $("#loading").show();
        $("#content").hide();       
    }
</script>

Hint: you can do it manually, don't show it yet if the form's not completed. — Shiz, May 27 '21 at 06:13
Does this answer your question? [Using jQuery to prevent form submission when input fields are empty](https://stackoverflow.com/questions/17865148/using-jquery-to-prevent-form-submission-when-input-fields-are-empty) — kmoser, May 27 '21 at 06:23
@knmoser It is close but in my case some inputs can be empty, only the ones with a required tag can't be. — tukanium, May 27 '21 at 20:41

score 2 · Accepted Answer · answered May 27 '21 at 05:58

You can use checkValidity() this will return true/false depending on this you can show your loading div.

Demo Code :

function loading() {
  console.log($('form')[0].checkValidity())
  //use on form
  if ($('form')[0].checkValidity()) {
    $("#loading").show();
    $("#content").hide();
  }
}

#loading{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="loading">lOading...</div>
<div id="content">
  <form enctype=multipart/form-data action={{url_for( 'upload_file')}} method="POST" enctype="multipart/form-data">
    <h3>MGR</h3>
    <label for="file-input" class="col-sm-4 col-form-label">The music (.wav or .mp3):</label>
    <input type="file" id="file-input" name="file" class="form-control w-100" required="true" /><br>
    <br>
    <div class="form-group">
      <h4>Select a model</h4>
      <input type="radio" id="logreg" name="model" value="logreg" required>
      <label for="logreg">Logistic regression</label><br>
      <input type="radio" id="knn" name="model" value="knn">
      <label for="knn">K-nearest neighbors</label><br>
      <input type="radio" id="randomforest" name="model" value="randomforest">
      <label for="randomforest">Random forest</label><br>
      <input type="radio" id="svm" name="model" value="svm">
      <label for="svm">Kernel SVM</label><br>
    </div>
    <input type="submit" value="Submit" onclick="loading();" class="btn btn-primary"></form>
</div>

Alexander Higgins · Answer 2 · 2021-05-27T06:04:42.923

You can modify your loading to disable the button when it is first clicked so a user cannot click again until loading is complete:

<script type="text/javascript">
    function loading(){
        $('#content .btn-primary").prop('disabled', true);
        $("#loading").show();
        $("#content").hide();       
    }
</script>

Depending on you use case, will might additionally need to add some method to reenable the button and call it when loading is complete.

<script type="text/javascript">
    function loadingCompleteOrLoadingFailed(){
        $('#content .btn-primary").prop('disabled', false);
    }
</script>

Additionally, since your code is already calling 'content' when the button is clicked, it should not be possible for the button to be clicked again. That would indicated that either the button click isn't being bound to your loading function or some error is occurring preventing loading from firing.

I am not looking to disable the button but to show a loading page - only if the form is valid - before the user is redirected to another page. — tukanium, May 27 '21 at 06:22

Submit button onClick function only if all requested inputs are filled

2 Answers2