Question

我不明白最新情况。我试图用Jquery步骤实现表单验证，当我点击下一个按钮时，我的表单应该被验证。但它不是，它在验证函数上返回错误。

这是我的剧本

$(function () {
  $("#form-3").steps({
    bodyTag: "fieldset",
    onStepChanging: function (event, currentIndex, newIndex) {
        // Always allow going backward even if the current step contains invalid fields!
        if (currentIndex > newIndex) {
            return true;
        }

        // Forbid suppressing "Warning" step if the user is to young
        if (newIndex === 3 && Number($("#age").val()) < 18) {
            return false;
        }

        var form = $(this);

        // Clean up if user went backward before
        if (currentIndex < newIndex) {
            // To remove error styles
            $(".body:eq(" + newIndex + ") label.error", form).remove();
            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
        }

        // Disable validation on fields that are disabled or hidden.
        form.validate().settings.ignore = ":disabled,:hidden";

        // Start validation; Prevent going forward if false
        return form.valid();
    }
  });
});

我是否需要表单验证js文件才能使其正常工作？我尝试了一些表单验证js文件，但它仍然无法正常工作。感谢。

这是我的HTML代码

<form id="form-3" action="#">
<h1>Account</h1>
<fieldset>
    <legend>Account Information</legend>

    <label for="userName">User name *</label>
    <input id="userName" name="userName" type="text" class="required">
    <label for="password">Password *</label>
    <input id="password" name="password" type="text" class="required">
    <label for="confirm">Confirm Password *</label>
    <input id="confirm" name="confirm" type="text" class="required">
    <p>(*) Mandatory</p>
</fieldset>

<h1>Profile</h1>
<fieldset>
    <legend>Profile Information</legend>

    <label for="name">First name *</label>
    <input id="name" name="name" type="text" class="required">
    <label for="surname">Last name *</label>
    <input id="surname" name="surname" type="text" class="required">
    <label for="email">Email *</label>
    <input id="email" name="email" type="text" class="required email">
    <label for="address">Address</label>
    <input id="address" name="address" type="text">
    <label for="age">Age (The warning step will show up if age is less than 18) *</label>
    <input id="age" name="age" type="text" class="required number">
    <p>(*) Mandatory</p>
</fieldset>

<h1>Warning</h1>
<fieldset>
    <legend>You are to young</legend>

    <p>Please go away ;-)</p>
</fieldset>

<h1>Finish</h1>
<fieldset>
    <legend>Terms and Conditions</legend>

    <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
</fieldset>
</form>

Answer 1

您需要添加jQuery Validation Plugin： http://jqueryvalidation.org/

Answer 2

jquery-steps documentation没有任何名为validate和valid的方法。请检查您是否已包含表单验证插件

Jquery-steps上的表单验证：undefined不是.validate（）函数的函数

2 个答案: