如果输入了一个输入字段,则更改所有输入字段的类
Changing class of all input fields if one input field is entered
我有一个包含 3 个表格的页面:
<table id="t1">
<tr>
<td></td><td><input type="text" name="name" /></td>
<td></td><td><input type="text" name="id" /></td>
<td></td><td><input type="text" name="perDate" /></td>
<td></td><td><input type="text" name="email" /></td>
</tr>
</table>
<table id="t2">
<tr>
<td></td><td><input type="text" name="lostFound" /></td>
<td></td><td><input type="text" name="lostDate" /></td>
<td></td><td><input type="text" name="item" /></td>
</tr>
</table>
<table id="t3">
<tr>
<td></td><td><input type="text" name="check" /></td>
<td></td><td><input type="text" name="reason" /></td>
<td></td><td><input type="text" name="chkDate" /></td>
</tr>
</table>
因此,我有一个验证脚本,如果我只是将类更改为"必需",那么它将使该输入字段成为必需的。 我遇到的问题是....如果填写了该表中的另一个字段,我只想要求一个字段,否则该字段不是必需的。 例如:如果填写了 t1 - 名称,那么我想将 t1 - id、t1 - perDate 和 t1 - 电子邮件的类更改为"必需",并将 t2 和 t3 的所有其他类保留不变。 我想知道是否有人可以用某种 JavaScript 代码为我指出正确的方向,这将使这成为可能。 感谢您的所有帮助,如果需要更多信息,请询问。
因此,当您模糊出"名称"输入时,如果相邻输入提供了名称,则需要相邻输入。 但是,如果他们返回并决定像这样清除该名称字段,也不要忘记使它们不需要:
$('.t1 input[name=name]').blur(function(){
var $depends = $('.t1 input[name=id], .t1 input[name=perDate], .t1 input[name=email]');
if($(this).val() != "")
$depends.addClass('required');
else
$depends.removeClass('required');
});
此外,如果尝试在任何控件具有数据时更改必需属性,则应执行以下操作:
//blur even on each input in t1
$('.t1 input').blur(function(){
//store as variable
var $t1in = $('.t1 input');
var hasData = false;
//check all inputs and if one has data, set variable and exit
$t1in.each(function(){
if($(this).val().length > 0){
hasData = true;
//exit loop
return false;
}
});
//if any of the controls has data
if(hasData)
$t1in.addClass('required');
else
$t1in.removeClass('required');
});
如果你使用 jQuery 或任何其他 JS 库,你可以很容易地做这样的事情:
$('#t1 input[name=name]').change(function()
{
var dependents = $('#t1 input[name=id],
#t1 input[name=perDate],
#t1 input[name=email]');
if (this.value.length > 0)
{
dependents.addClass('required');
}
else
{
dependents.removeClass('required');
}
});
<style>
.required { border:2px solid red }
</style>
<script>
function checkFilled(field) {
var fields = field.parentNode.parentNode.getElementsByTagName('input');
for (i = 0; i < fields.length; i++) {
fields[i].className = field.value != '' ? 'required' : '';
}
}
</script>
<table id="t1">
<tr>
<td></td><td><input type="text" name="name" onkeydown="checkFilled(this)" onkeyup="checkFilled(this)" onchange="checkFilled(this)" /></td>
<td></td><td><input type="text" name="id" /></td>
<td></td><td><input type="text" name="perDate" /></td>
<td></td><td><input type="text" name="email" /></td>
</tr>
</table>
<table id="t2">
<tr>
<td></td><td><input type="text" name="lostFound" onkeydown="checkFilled(this)" onkeyup="checkFilled(this)" onchange="checkFilled(this)" /></td>
<td></td><td><input type="text" name="lostDate" /></td>
<td></td><td><input type="text" name="item" /></td>
</tr>
</table>
<table id="t3">
<tr>
<td></td><td><input type="text" name="check" onkeydown="checkFilled(this)" onkeyup="checkFilled(this)" onchange="checkFilled(this)" /></td>
<td></td><td><input type="text" name="reason" /></td>
<td></td><td><input type="text" name="chkDate" /></td>
</tr>
</table>
添加所有onkeydown
、onkeyup
和onchange
很有用。 onchange
对于在字段中粘贴很有用。
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何在HTML输入字段中添加不可删除的后缀
- 互斥单选按钮和相应的输入字段
- 在IE9中的输入字段中输入焦点最近按钮
- 选中单选框时将属性添加到输入字段
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 我如何在数字插入中使用逗号,这样它就不会'不要破坏我的输入字段
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- 输入字段将't获取更新的值
- 如何选择多个输入字段并删除所需的属性
- 输入字段,只接受0到12之间的数字
- 单击鼠标,用MySQL数据填充html表单输入字段
- 使用jquery将输入字段转换为文本
- Model中的Typeahead返回空值以形成输入字段
- 如何从查询字符串中的输入字段发回文本
- 如何验证日期、月份和日期的3个独立输入字段;年使用jquery或javascript
- 将值传递给jquery创建的输入字段