我有一个使用Entity Framework 6.1.1，jQuery UI（Combined Library）1.11.1，jQuery Validation 1.13.0和ASP.Net MVC 5.1.2 Database First的系统。我是javascript的新手，所以我不确定我是否会以正确的方式解决这个问题。
我有一个视图，它有各种各样的文本框需要逐步填写。我希望在用户点击＆＃34; next＆＃34;之前验证这些文本框。按钮。我在互联网上搜索了解决方案，但我似乎无法找到符合我要求的解决方案。我将所有内容都包含在Html.BeginForm标记中，因此我无法引用表单的id，文本框是EditorFor＆＃39; s，只有最后一个按钮是提交按钮。我设法获得javascript，检查页面加载时是否填写了所有文本框，然后禁用＆＃34; next＆＃34;按钮，但后来我不知道如何让它再次检查文本框以启用＆＃34; next＆＃34;完成所有文本框后，按钮。下面是代码：
这是我的观看代码：
@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>
}
如上所示，＆＃34; next＆＃34;按钮只是一个按钮，用户可以进入下一步，仍然在同一个视图中。另请注意，有一个＆＃34;上传＆＃34;按钮，所以我不知道如何验证该部分。 ＆＃34;完成＆＃34;按钮是提交按钮，将发布所有信息。
这是我在同一视图上的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代码，它会在页面加载时检查步骤1中的所有文本框，然后禁用＆＃34;下一步＆＃34;按钮因为它们全部为空，但它不会重新检查文本框以查看它们是否已填写。
如何执行此操作，即检查文本框以查看是否已填写并禁用＆＃34;下一步＆＃34;按钮，直到所有这些都被填写？请注意＆＃34;上传＆＃34;按钮如上所述。这是视图图像的链接：MVC View with steps
由于
答案 0 :(得分：2)
请参阅我写的基本示例：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>