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

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() 这将返回true/false，具体取决于您可以显示您的loadingdiv。

演示代码 ：

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触发。