Jquery在提交前使用步骤验证Html.BeginForm

Question

我有一个系统，它首先使用实体框架6.1.1、jQuery UI (组合库) 1.11.1、jQuery验证1.13.0和ASP.Net MVC 5.1.2数据库。我对javascript并不熟悉，所以我不太确定我是否会这样做。

我有一个视图，它有各种不同的文本框，需要逐级填写。我希望在用户单击“下一步”按钮之前验证这些文本框。我已经在互联网上搜索了解决方案，但似乎找不到符合我要求的解决方案。我把所有东西都封装在一个Html.BeginForm标签中，所以我不能引用表单的id，文本框是EditorFor的，只有最后一个按钮是submit按钮。我已经设法获得javascript，检查页面加载时是否填充了所有文本框，然后禁用"next“按钮，但是我不知道如何让它再次选中文本框，以便在所有文本框都填好后启用"next”按钮。以下是代码：

这是我的视图代码：

@using (Html.BeginForm("Create", "Events"))

{ @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Event</h4>
    <hr />

    <div class="container">
        <div class="row form-group">
            <div class="col-xs-12">
                <ul class="nav nav-pills nav-justified thumbnail setup-panel">
                    <li class="active">
                        <a href="#step-1">
                            <h4 class="list-group-item-heading">Step 1</h4>
                            <p class="list-group-item-text">General Details</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-2">
                            <h4 class="list-group-item-heading">Step 2</h4>
                            <p class="list-group-item-text">Time and Date Details</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-3">
                            <h4 class="list-group-item-heading">Step 3</h4>
                            <p class="list-group-item-text">Questionnaire</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div class="row setup-content " id="step-1">
            <div class="col-xs-12">
                <div class="col-md-12">
                    <h1 class="text-center"> STEP 1</h1>

                    <div class="form-group" id="eventName" data-toggle="tooltip" data-placement="left" title="Enter an event name">
                        @Html.LabelFor(model => model.EventName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventName, new { htmlAttributes = new { @class = "form-control step1" } })
                            @Html.ValidationMessageFor(model => model.EventName, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group" id="eventDesc" data-toggle="tooltip" data-placement="left" title="Enter a description for the event">
                        @Html.LabelFor(model => model.EventDescription, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.TextAreaFor(model => model.EventDescription, new { htmlAttributes = new { @class = "form-control step1" } })
                            @Html.ValidationMessageFor(model => model.EventDescription, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group" id="eventLocation" data-toggle="tooltip" data-placement="left" title="Enter the event location">
                        @Html.LabelFor(model => model.EventLocation, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventLocation, new { htmlAttributes = new { @class = "form-control step1" } })
                            @Html.ValidationMessageFor(model => model.EventLocation, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group  eventRating" id="eventRating" data-toggle="tooltip" data-placement="left" title="Rate the event between 1 and 10">
                        @Html.LabelFor(model => model.EventRating, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventRating, new { htmlAttributes = new { @class = "form-control step1" } })
                            @Html.ValidationMessageFor(model => model.EventRating, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group" id="NoOfEmp" data-toggle="tooltip" data-placement="left" title="Enter the number of employees that can attend this event">
                        @Html.LabelFor(model => model.NumberOfEmployees, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.NumberOfEmployees, new { htmlAttributes = new { @class = "form-control step1" } })
                            @Html.ValidationMessageFor(model => model.NumberOfEmployees, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group" id="eventSupplier" data-toggle="tooltip" data-placement="left" title="Enter the name of the event company">
                        @Html.LabelFor(model => model.EventSupplier, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventSupplier, new { htmlAttributes = new { @class = "form-control step1" } })
                            @Html.ValidationMessageFor(model => model.EventSupplier, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group" id="eventPic" data-toggle="tooltip" data-placement="left" title="Click the Choose Files button to select an event picture">
                        @Html.LabelFor(model => model.EventPicture, new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            <div class="btn btn-default btn-file">
                                <input id="fileInput" type="file" multiple>
                            </div>
                            <input type="button" class="btn btn-primary" value="Upload file" onclick="$('#uploader').submit()" />
                        </div>
                    </div>

                    <div class="text-center">
                        <button id="activate-step-2" class="btn btn-primary btn-lg ">Next Step</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row setup-content" id="step-2">
            <div class="col-xs-12">
                <div class="col-md-12  text-center">
                    <h1 class="text-center"> STEP 2</h1>

                    <div class="form-group" id="eventDays" data-toggle="tooltip" data-placement="left" title="Enter the days which teams can go on this event">
                        @Html.LabelFor(model => model.EventDays, htmlAttributes: new { @class = "control-label col-md-2" })

                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventDays, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.EventDays, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.EventStart, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventStart, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.EventStart, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.EventEnd, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventEnd, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.EventEnd, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group" id="eventDuration" data-toggle="tooltip" data-placement="left" title="Enter the number of hours the event can be">
                        @Html.LabelFor(model => model.EventDuration, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventDuration, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.EventDuration, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <button id="activate-step-3" class="btn btn-primary btn-lg">Final Step</button>
                </div>
            </div>
        </div>
        <div class="row setup-content" id="step-3">
            <div class="col-xs-12">
                <div class="col-md-12  text-center">
                    <h1 class="text-center"> STEP 3</h1>

                    <div class="form-group">
                        @Html.LabelFor(model => model.EventTags, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.EventTags, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.EventTags, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.EventDuration, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10 the-basics">
                            @Html.EditorFor(model => model.EventDuration, new { htmlAttributes = new { @class = "typeahead form-control", @type = "text", @placeholder = "WHY DOES THIS AND THE ABOVE NOT WORK??" } })
                            @Html.ValidationMessageFor(model => model.EventDuration, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.EventDuration, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            <div id="the-basics">
                                <input class="typeahead form-control" type="text" placeholder="Tags">
                                <input class="typeahead form-control" type="text" placeholder="Tags" data-role="tagsinput">
                            </div>
                            @Html.ValidationMessageFor(model => model.EventDuration, "", new { @class = "text-danger" })
                        </div>
                    </div>



                    <button id="final" class="btn btn-primary btn-lg" type="submit" value="Create">Finish</button>
                </div>
            </div>
        </div>
    </div>
</div>

}

正如上面所看到的，" next“按钮只是一个按钮，它将用户带到下一个步骤，仍然在相同的视图中。还请注意，有一个“上传”按钮，所以我不知道如何验证该部分也。"Finish“按钮是将发布所有信息的提交按钮。

这是我在同一个视图上的javascript代码：

<script>
    var required_ele = document.getElementsByClassName('form-control step1');
    var allfilled = true;
    for (var i = 0; i < required_ele.length; ++i) {
        var item = required_ele[i];
        if (item.value.length == 0) {
            allfilled = false;
        }
    }

    if (allfilled) {
        document.getElementById("activate-step-2").disabled = false;
    }
    else {
        document.getElementById("activate-step-2").disabled = true;

    }

</script>

使用这个javascript代码，它在页面加载时检查step1中的所有文本框，然后禁用"Next“按钮，因为它们都是空的，但是它不会重新检查文本框以查看它们是否已被填充。

我如何做到这一点，即检查文本框是否已填写，并禁用“下一步”按钮，直到它们全部填写？请注意上面提到的“上传”按钮。这是指向视图的图像的链接：具有步骤的MVC视图

谢谢

Answer 1

请参阅我编写的基本示例：JSFiddle

<body>
    <input type="text" placeholder="First Name" id="fn" onkeyup="validateInputs();" />
    <input type="text" placeholder="Last Name" id="ln" onkeyup="validateInputs();" />
    <input type="submit" value="Submit" id="sb" />
</body>

<script>
$(document).ready(function () {
    validateInputs();
});

function validateInputs() {
    var firstName = $.trim($('#fn').val());
    var lastName = $.trim($('#ln').val());

    if (firstName && lastName) {
        $('#sb').attr("disabled", false);
    } else {
        $('#sb').attr("disabled", true);
    }
}
</script>