javascript - 验证 FORM 内 DIV(可见向导步骤)内的 HTML 输入元素？

Question

我决定用 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？

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

Answer 1

在使用 jquery 之后，尽管缺乏验证示例和教程，我还是偶然找到了解决方案。在 $(".next-button").click() block 内，我进行了以下更改:

旧:

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"
  }
});