无法使用 jQuery validate 验证我的表单

Question

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

HTML head 标签中的片段

<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();
        }
    })
})

Answer 1

按照 Swati 的建议更改按钮类型以提交已解决问题

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

非常感谢！

无法使用 jQuery validate 验证我的表单

Cannot validate my form using jQuery validate

jquery

jquery-validate