jQuery表单验证规则失效求助：仅HTML原生验证生效

问题根源 #

1. 缺少jQuery核心库：jQuery Validate是依赖jQuery的插件，你当前仅引入了Validate插件，未加载jQuery核心文件，导致插件无法运行。
2. 原生验证拦截：表单元素的required属性会触发浏览器原生验证，优先级高于jQuery Validate，直接跳过了自定义规则。
3. 未配置姓名长度规则：你需要姓名至少2个字符，但当前验证规则仅设置了必填，未添加minlength限制。

修复后的完整代码 #

HTML部分

<form id="contactForm" novalidate="novalidate">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="First Name...">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Last Name...">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Yourname@email.com...">

    <label for="subject">Query</label>
    <textarea name="subject" id="subject" cols="30" rows="10"></textarea>

    <input type="submit" value="Submit">
</form>

• 给表单标签添加novalidate="novalidate"，禁用浏览器原生验证。
• 移除所有表单元素的required属性，统一交由jQuery Validate处理验证逻辑。

JS部分

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js"></script>
<script src="js/script.js"></script>
<script>
    AOS.init();
</script>
<script>
    jQuery(document).ready(function () {
        jQuery("#contactForm").validate({
            rules: {
                firstname: {
                    required: true,
                    minlength: 2
                },
                lastname: {
                    required: true,
                    minlength: 2
                },
                email: { 
                    required: true, 
                    email: true 
                },
                subject: { 
                    required: true,
                    minlength: 10 
                }
            },
            messages: {
                firstname: {
                    required: "Please enter your firstname",
                    minlength: "First name must be at least 2 characters long"
                },
                lastname: {
                    required: "Please enter your lastname",
                    minlength: "Last name must be at least 2 characters long"
                },
                email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                subject: {
                    required: "Please enter your query",
                    minlength: "Your query must be at least 10 characters long"
                }
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    });
</script>

• 新增jQuery核心库引入，且必须放在jQuery Validate之前。
• 给firstname和lastname添加minlength:2规则，并补充对应提示信息。

验证逻辑说明 #

页面加载完成后，jQuery Validate会绑定表单提交事件，拦截原生提交行为：

1. 提交时按配置规则逐一验证字段，不符合规则则显示自定义提示。
2. 所有字段验证通过后，才会执行submitHandler中的表单提交逻辑。

内容的提问来源于stack exchange，提问作者user28500926