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>

基本的に、[次へ]ボタンをクリックすると、FORM全体ではなく、現在表示されているDIV内にある入力要素が検証されます。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 に答える