5

我不明白发生了什么事。我尝试使用 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>
4

2 回答 2

9

您需要从以下位置添加 jQuery 验证插件：http: //jqueryvalidation.org/

于 2014-05-22T08:00:15.070 回答
1

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

于 2014-04-23T05:50:34.323 回答