是否仅在填充输入字段时显示预加载程序gif

Question

我有一个通过flask构建的网站，它接受用户提供的信息并执行一些操作。我还有一个加载程序，当这个操作在后台完成时，它会显示出来，问题是，如果用户点击按钮"；过程"；在没有填充细节的情况下，仍然显示加载器。

如何使加载程序仅在用户输入所有输入字段后才出现；过程"；按钮

<form action="/result" method="post">
<tbody>
<tr>
<td><input type='text' name="ip" id='ipadd' required="required" placeholder="8.8.8.8" pattern="((^|.)((25[0-5])|(2[0-4]d)|(1dd)|([1-9]?d))){4}$" value style="margin-bottom: 5px;" autocomplete="off"></td>
</tr>
</tbody>
</table>
<button  class="btn btn-outline btn-success"  style="padding-right: 15pt;"onclick="loading();">Process</button>
</form>

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

Answer 1

由于您的字段是required，如果表单是:invalid，则可以通过CSS隐藏或禁用按钮，例如

form:invalid button {
pointer-events: none;
opacity: .4;
}

<form>
<input type='text' name="ip" id='ipadd' required="required"
placeholder="8.8.8.8" 
pattern="((^|.)((25[0-5])|(2[0-4]d)|(1dd)|([1-9]?d))){4}$" />

<button>Send</button>
</form>

Answer 2

检查输入字段是否为空，然后返回else执行您的api调用/加载器，或者禁用您的进程按钮，直到值为空