Question

I have decided to create a wizard form in HTML 5 (actually using ASP.NET MVC here). I have the following HTML form:

@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>
}

Then I have this js script:

<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>

Basically, what I want is upon clicking the Next button, it will validate the input elements found inside the current visible DIV, not the entire FORM. Is it possible to do this using HTML5? If not, maybe jQuery?

If you have others in mind, please do share it here. Many many thanks!

Answer 1

after some playing with the jquery i happened to find the solution despite of lack of samples and tutorials in validation. inside the $(“.next-button”).click() block, i made these changes:

old:

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

if (hasError)
   return false;

new:

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

if (!isValid)
return false;

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

i could also add this right under the $(document).ready() line to use/add jquery validation rules:

$("#myForm").validate({
  rules: {
    lastname: "required"
  }
});