仅当所有请求的输入都已填满时，才提交按钮 onClick 功能

Question

我有一个带有强制输入的表单，并在提交按钮上添加了一个 onClick 事件侦听器，以在程序充电时显示加载 git。问题是每次单击按钮时都会触发 onClick 功能，我希望它仅在表单完成并发送时触发。

如何在我的 jQuery 函数中为此添加条件？

这里是 HTML 和 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>

Answer 1

您可以使用checkValidity() 这将返回真/假，这取决于您可以显示您的loading div。

演示代码：

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>

Answer 2

您可以修改您的loading 以在第一次单击按钮时禁用该按钮，这样用户在loading 完成之前无法再次单击：

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

根据您的使用情况，可能还需要添加一些方法来重新启用按钮并在加载完成时调用它。

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

此外，由于您的代码在单击按钮时已经调用了“内容”，因此应该不可能再次单击该按钮。这表明按钮单击未绑定到您的 loading 函数，或者发生了一些错误，导致 loading 无法触发。