Question

@model Contoso.MvcApplication.ViewModels.QuizCompletedViewModel

<h2>Quiz 1</h2>

<form method="post">
@for (int i = 0; i < Model.Questions.Count; i++) {
    @Html.EditorFor(model => model.Questions[i], "Questions/_MultipleChoiceAnswerView")
}

<div>
    <p style="float: left;">Question @ViewData["CurrentNumber"] of @ViewData["TotalQuestions"]</p>
    <input type="submit" value="Continue" style="float: right;" />
</div>
</form>

如您所见，我通过循环显示所有问题。但我真的想在页面中逐个问题地展示。这是实现它的相关帖子。

Hide current element and show the next one

如果我不包含该JQuery功能，它看起来像这样

enter image description here

问题是，使用最后一个JQUERY功能，我一次只会显示一个问题，所以我只需要验证那个问题，这就是我真的不知道的部分。

我的意思是，假设我已经有了JQUERY函数，所以当用户按下CONTINUE时，它必须验证当前问题是否有效，但仅限于此，而不是全部。

我该怎么办？

更新：我创建单选按钮的代码：

@using Contoso.MvcApplication.Extensions
@model Contoso.MvcApplication.ViewModels.MultipleChoiceQuestionViewModel

<div class="question-container">
    <h5>@Model.Question.QuestionText</h5>
</div>

<div class="answer-container">
@Html.RadioButtonForSelectList(m => Model.Question.SelectedAnswer, Model.AnswerRadioList)
@Html.ValidationMessageFor(m => m.Question.SelectedAnswer)
</div>

我正在使用HtmlExtensions：

public static class HtmlExtensions
{
    public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
        this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression,
        IEnumerable<SelectListItem> listOfValues,
        IDictionary<string, object> htmlAttributes)
    {
        var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        var sb = new StringBuilder();

        if (htmlAttributes == null)
        {
            htmlAttributes = new RouteValueDictionary();
        }
        if (!htmlAttributes.ContainsKey("id"))
        {
            htmlAttributes["id"] = null;
        }
        foreach (SelectListItem item in listOfValues)
        {
            var id = string.Format(
                "{0}_{1}",
                htmlHelper.ClientIdFor(expression),
                item.Value
            );
            htmlAttributes["id"] = id;
            var radio = htmlHelper.RadioButtonFor(expression, item.Value, htmlAttributes).ToHtmlString();
            var labelId = htmlHelper.ClientIdFor(expression);
            sb.AppendFormat(
                "<div class='rad'>{0}<label for=\"{1}\">{2}</label></div>",
                radio,
                id,
                HttpUtility.HtmlEncode(item.Text)
            );
        }

        return MvcHtmlString.Create(sb.ToString());
    }
}

Answer 1

请使用以下内容。它使用visible div作为当前步骤，并查找包含在其中的无效元素。

这是一组粗略的代码，并未经过测试，但希望它可以让您了解如何处理

// attach continue button handler       
        $("#continue).click(function ()
        {

            var $step = $(":visible"); // get current step

            var validator = $("form").validate(); // obtain validator
            var anyError = false;

            //find any elements within the current step that are invalid.
            $step.find("input").each(function ()
            {
                if (!validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }

            });

            if (anyError)
                return false; // exit if any error found

                //in this case use class confirm (or use hidden field value for step number)
            if ($step.next().hasClass("confirm")) { // is it confirmation?
                // show confirmation asynchronously
                $.post("/wizard/confirm", $("form").serialize(), function (r)
                {
                    // inject response in confirmation step
                    $(".confirm").html(r);
                });
            }
               //workout if this is the last step.
               //if not go to next question
               // if it is submit the form
            if ($step.next().hasClass("complete")) { // is there any next step?
                $step.hide().next().show();  // show it and hide current step
                $("#back-step").show();   // recall to show backStep button
            }

            else { // this is last step, submit form
                $("form").submit();
            }


        });

如何在此方案中验证表单

1 个答案: