JQuery 循环遍历表单元素的问题
JQuery Issue with looping through Form elements
我正在尝试遍历表单中的所有元素以确保是否有任何元素为空,然后我的提交按钮仍处于禁用状态(初始加载时我正在禁用它),否则如果所有输入输入值,然后启用提交按钮。
这是我的表单 onKeyup 函数,但这段代码不起作用,也没有循环遍历元素。$(this) 总是 returns 'formId' 而不是循环遍历它的元素
function formkeyup() {
var empty = false;
$('#formId').each(function () {
if ($(this).val() === '') {
empty = true;
}
});
if (empty) {
$('#SubmitId').attr('disabled', 'disabled');
} else {
$('#SubmitId').removeAttr('disabled');
$("#SubmitId").css('font-weight', 'bold');
}
}
我的HTML代码:
<form action="~/Home/About" method="post" data-ajax="false" id="formId" onkeyup="formkeyup();">
<fieldset>
<legend>Registration Form</legend>
<div class="section">
<h3>Step 1: Password</h3>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
<input type="password" name="pwd" id="pwd" autocomplete="off" value="@Model.Password" onkeyup=" return Validate() "/>
</li>
<li>
@Html.LabelFor(m => m.ConfirmPassword)
<input type="password" name="confirmpwd" id="confirmpwd" autocomplete="off" value="@Model.ConfirmPwd" onkeyup=" return Validate() "/>
</li>
</ol>
</div>
<div id="divSection2" class="section">
<h3>Step 2: Age</h3>
<div class="editor-label">
@Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Age)
@Html.ValidationMessageFor(model => model.Age)
</div>
</div>
<p>
<input type="button" id="SubmitId" name="SubmitId" value="Submit" />
</p>
</fieldset>
</form>
非常感谢任何帮助!
谢谢,
WH
您对 $.each 函数的使用无效。您需要将要实际循环的元素传递给 $.each() 函数。
$.each('input', function() {
**validation code here**
});
或者您可以给每个 input/textarea 一个类名并循环遍历所有这些。
$('#formID').each('.input', function() {
**validation code here**
});
JSFiddle 示例。
我正在尝试遍历表单中的所有元素以确保是否有任何元素为空,然后我的提交按钮仍处于禁用状态(初始加载时我正在禁用它),否则如果所有输入输入值,然后启用提交按钮。
这是我的表单 onKeyup 函数,但这段代码不起作用,也没有循环遍历元素。$(this) 总是 returns 'formId' 而不是循环遍历它的元素
function formkeyup() {
var empty = false;
$('#formId').each(function () {
if ($(this).val() === '') {
empty = true;
}
});
if (empty) {
$('#SubmitId').attr('disabled', 'disabled');
} else {
$('#SubmitId').removeAttr('disabled');
$("#SubmitId").css('font-weight', 'bold');
}
}
我的HTML代码:
<form action="~/Home/About" method="post" data-ajax="false" id="formId" onkeyup="formkeyup();">
<fieldset>
<legend>Registration Form</legend>
<div class="section">
<h3>Step 1: Password</h3>
<ol>
<li>
@Html.LabelFor(m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
</li>
<li>
@Html.LabelFor(m => m.Password)
<input type="password" name="pwd" id="pwd" autocomplete="off" value="@Model.Password" onkeyup=" return Validate() "/>
</li>
<li>
@Html.LabelFor(m => m.ConfirmPassword)
<input type="password" name="confirmpwd" id="confirmpwd" autocomplete="off" value="@Model.ConfirmPwd" onkeyup=" return Validate() "/>
</li>
</ol>
</div>
<div id="divSection2" class="section">
<h3>Step 2: Age</h3>
<div class="editor-label">
@Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Age)
@Html.ValidationMessageFor(model => model.Age)
</div>
</div>
<p>
<input type="button" id="SubmitId" name="SubmitId" value="Submit" />
</p>
</fieldset>
</form>
非常感谢任何帮助!
谢谢,
WH
您对 $.each 函数的使用无效。您需要将要实际循环的元素传递给 $.each() 函数。
$.each('input', function() {
**validation code here**
});
或者您可以给每个 input/textarea 一个类名并循环遍历所有这些。
$('#formID').each('.input', function() {
**validation code here**
});
JSFiddle 示例。