无法使用 jQuery validate

如何解决无法使用 jQuery validate

我正在尝试使用 jQuery 验证表单，但它根本不起作用并且我没有收到错误消息。我怀疑 jQuery 验证的版本是否与我使用的 jQuery 版本兼容。我没有收到任何与验证相关的错误消息。作为一个测试示例，我想验证 customerName 并使其成为必需的。如果我将该字段留空并按下付款按钮，该按钮会触发并且我不会收到任何说明该字段是必填字段的消息。在我的 javascript 中，我最初隐藏了表单，直到某些条件生效。

head 标签中的 HTML 片段

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>

我的表格

<form action="/localDeliveryPayment" method="get" id="localDeliveryCheckoutForm">
        <p><label for="customerName">Name:</label> <input type="text" name="customerName" maxlength="20" required id="customerName"></p>
<p><label for="customerEmail">Email:</label> <input type="email" name="customerEmail" maxlength="50" required id="customerEmail"></p>
<p><label for="customerMobile">Mobile:</label> <input type="text" name="customerMobile" maxlength="10" required id="customerMobile"></p>
<p><label for="comments">Comments:</label> <textarea name="comments" cols="40" rows="10" maxlength="300" id="comments">
</textarea></p>
<p><label for="deliveryTime">Deliverytime:</label> <select name="deliveryTime" id="deliveryTime">
  <option value="15:00">15:00</option>

  <option value="15:15">15:15</option>

</select></p>
        <button type="button" class="btn btn-success" id="paymentButton">Payment</button>
    </form>

我的 JavaScript

$( document ).ready(function(){ 
    //hide all elements
    document.getElementById("localDeliveryForm").style.display = "none";
    document.getElementById("takeawayPickUp").style.display = "none"; 
    $("#localDeliveryCheckoutForm").validate({
        //specifying rules for the validation
        rules: {
            customerName: {required : true},},messages: {
            customerName: {required : "Please enter your name"},submitHandler: function(form) {
            form.submit();
        }
    })
})

解决方法

根据 Swati 的建议，更改按钮类型以提交修复了问题

<button type="submit" class="btn btn-success" id="paymentButton">Payment</button>

非常感谢！