Javascript HTML 如何在表单验证后运行函数

Question

我正在开发一个网页，用户必须在其中填写必填字段。

我有这个示例表单:

<form action="mypage.php">
  First name:<br>
  <input type="text" name="firstname" required> 
  <br>
  Last name:<br>
  <input type="text" name="lastname" required>
  <br><br>
  <input type="submit" value="Submit">
</form> 

验证适用于必填字段。如果字段不为空，则可以成功提交表单。如果为空，字段会突出显示，用户无法提交表单。

现在，我使用 javascript 在按钮的点击事件上添加了一个微调器:

 <script type="text/javascript">
    $(function () {
        $("#Update").click(function () {

             $("#loading").fadeIn(); 

        });
    });
</script>

单击按钮后，微调器会显示并正常工作。但问题是无论表单是否提交，它都会显示。即使字段为空，并且由于未提交表单且没有可运行的函数，微调器仍会继续旋转，它也会显示。

如何仅在字段验证后显示微调器？

请帮忙。提前谢谢你。

Answer 1

尝试使用它代替 .click()

$(document).ready(function(){
    $('form').on("submit",function(){
        console.log("Loading...");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="mypage.php">
        First name:<br>
        <input type="text" name="firstname" required> 
        <br>
        Last name:<br>
        <input type="text" name="lastname" required>
        <br><br>
        <input type="submit" value="Submit">
</form>