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

Posted 2023-05-07

【中文标题】无法使用 jQuery validate 验证我的表单

【英文标题】：Cannot validate my form using jQuery validate

【发布时间】：2021-09-03 16:46:24

【问题描述】：

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

head 标签中的 html sn-p

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

【问题讨论】：

您的提交按钮在哪里？另外，您的付款按钮有type="button"，所以它不会触发表单提交事件。

抱歉给您带来了困惑。这是支付按钮。我将在我的帖子中编辑我的问题以明确这一点。

它的工作只是 fine 。我刚刚将type="button" 更改为type="submit"

非常感谢！你是绝对正确的。非常感谢，我不知道如果按钮类型是“按钮”，它将不起作用。该按钮链接到 javascript onclick，因此我没有打扰 type="submit"，因为单击后我将在进行一些验证后提交到后端。谢谢！

【参考方案1】：

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

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

非常感谢！