2

我决定在 HTML 5 中创建一个向导表单（实际上在这里使用 ASP.NET MVC）。我有以下 HTML 表单：

@using (Html.BeginForm())
{
    <div class="wizard-step">
        <input type="text" name="firstname" placeholder="first name" />
    </div>
    <div class="wizard-step">
        <input type="text" name="lastname" placeholder="last name" />
    </div>
    <div class="wizard-step">
        <input type="text" name="suffix" placeholder="suffix" />
    </div>

    <button class="back-button" type="button">
        Back</button>
    <button class="next-button" type="button">
        Next</button>
}

然后我有这个js脚本：

<script type="text/javascript">
    $(document).ready(function () {
        var $steps = $(".wizard-step");
        var index = 0;

        var count = $steps.length;
        $steps.each(function () {
            $(this).hide();
        });

        $(".back-button").attr("disabled", "disabled");

        var $currentStep = $steps.first();

        $currentStep.show();
        $currentStep.addClass("current-step");

        $(".back-button").click(function () {
            $currentStep.hide();
            $currentStep.removeClass("current-step");
            $currentStep = $currentStep.prev();
            $currentStep.addClass("current-step");
            $currentStep.show();
            index--;
            $(".next-button").removeAttr("disabled");
            if (index == 0) {
                $(this).attr("disabled", "disabled");
            }
            else {
                $(this).removeAttr("disabled");
            }
        });

        $(".next-button").click(function () {
            var $inputFields = $(".current-step :input");

            var hasError = false;
            $inputFields.each(function () {
                if (!validator.element(this)) {
                    hasError = true;
                }
            });

            if (hasError)
                return false;

            index++;
            $(".back-button").removeAttr("disabled");
            if (index == count - 1) {
                $(this).attr("disabled", "disabled");
            }
            else {
                $(this).removeAttr("disabled");
            }

            $currentStep.hide();
            $currentStep.removeClass("current-step");
            $currentStep = $currentStep.next();
            $currentStep.addClass("current-step");
            $currentStep.show();
        });
    });
</script>

基本上，我想要的是在单击“下一步”按钮时，它将验证在当前可见 DIV 中找到的输入元素，而不是整个 FORM。是否可以使用 HTML5 做到这一点？如果没有，也许是 jQuery？

如果您有其他想法，请在此处分享。非常感谢！

4

1 回答 1

1

尽管在验证中缺少示例和教程，但在玩了一些 jquery 之后，我碰巧找到了解决方案。在 $(".next-button").click() 块内，我进行了以下更改：

老的：

var hasError = false;
$inputFields.each(function () {
   if (!validator.element(this)) {
      hasError = true;
   }
});

if (hasError)
   return false;

新的：

var isValid = false;
$inputFields.each(function () {
  isValid = $(this).valid();
});

if (!isValid)
return false;

=======================

我还可以在 $(document).ready() 行下添加这个以使用/添加 jquery 验证规则：

$("#myForm").validate({
  rules: {
    lastname: "required"
  }
});
于 2013-01-14T12:47:52.877 回答