Question

当用户点击＆＃34;提交，＆＃34;我试图让弹出窗口出现。一切都是有效的。这就是我到目前为止所做的：

$(document).ready(function() {
    $("#aForm").validate({
        debug: false,
        errorPlacement: function(error, element) {
            error.insertBefore(element);
        },
        submitHandler: function(form) {
            $(".success-overlay").show();
            $(".success-message").show();
        },
        rules: {
            firstName: {
                required: true,
                minLength: 1,
                messages: {
                    required: "Please enter your first name",
                    minLength: "Please enter a valid first name"
                }
            },
            lastName: {
                required: true,
                minLength: 1,
                messages: {
                    required: "Please enter your last name",
                    minLength: "Please enter a valid last name"
                }
            },
            email: {
                required: true,
                email: true,
                messages: {
                    required: "Please enter your email address",
                    minLength: "Please enter a valid email address"
                }
            }
        }
    });
});

...但所有这一切都是重新加载页面并将我发回当前页面的顶部。有什么建议？这是随附的HTML：

<form class="aForm" id="aForm" method="" action="">
    <div class="personal-info">
        <div class="ie-left"><label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span></div>
        <div class="ie-middle"><label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span></div>
        <div class="ie-right"><label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span></div>
    </div>
    <p class="required-fields">* Required fields</p>
    <div class="submit-button"><input type="submit" value="Register for Updates"></div>
</form>

<div class="success-overlay"></div>
<div class="success-message">
    <span>X</span>
    <h1>Thank you!</h1>
</div>

Answer 1

messages不属于rules值，它是一个单独的选项。它也是minlength而不是minLength

    $(document).ready(function () {
        $("#aForm").validate({
            debug: false,
            errorPlacement: function (error, element) {
                error.insertBefore(element);
            },
            submitHandler: function (form) {
                $(".success-overlay").show();
                $(".success-message").show();
                return false;
            },
            rules: {
                firstName: {
                    required: true,
                    minlength: 4
                },
                lastName: {
                    required: true,
                    minlength: 1
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                firstName: {
                    required: "Please enter your first name",
                    minlength: "Please enter a valid first name"
                },
                lastName: {
                    required: "Please enter your last name",
                    minlength: "Please enter a valid last name"
                },
                email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                }
            }
        });
    });

.success-overlay, .success-message {
    display: none;
}

<form class="aform" id="aForm" method="" action="">
  <div class="personal-info">
    <div class="ie-left"><label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span></div>
    <div class="ie-middle"><label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span></div>
    <div class="ie-right"><label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span></div>
  </div>
  <p class="required-fields">* Required fields</p>
  <div class="submit-button"><input type="submit" value="Register for Updates"></div>
</form>

<div class="success-overlay"></div>
<div class="success-message">
  <span>X</span>
  <h1>Thank you.</h1>
</div>

jQuery表单验证 - 成功弹出窗口

1 个答案: