我有一个包含三个字段的小表单。
<div class="span5 offset3 well">
<legend>To begin, please enter the info below</legend>
<div class="alert alert-error hide" id="error">
<span>Incorrect Username or Password!</span>
</div>
<form accept-charset="UTF-8" action="" method="POST" name="check_form" id="check_form">
<p>
<label>Student ID</label>
<input type="text" id="txtEmplid" placeholder="Student ID" name="txtEmplid" class="span5">
</p>
<p>
<label>Email address</label>
<input type="text" placeholder="Email address" id="txtEmail" name="txtEmail" class="span5">
</p>
<p>
<label>OR</label>
</p>
<p>
<label>DOB</label>
<input type="text" placeholder="Date of Birth" id="dob" name="dob" class="span5">
</p>
<button type="submit" id="doCheck" name="doCheck" class="btn btn-warning">Submit</button>
<input type="hidden" value="form-submit" name="form-submit">
</form>
</div>
原来,这很好。但是,现在我需要对其进行修改,以便用户需要输入ID以及其他两个中的至少一个。例如。 ID和DOB已填写,但电子邮件为空。
最初,我写了一个小jQuery函数,我用它来改变任何空白到红色的文本框的背景颜色。这是代码:
function doFieldEmpty(input) {
var ic = 0;
var $i = input;
$i.each(function( index, value ) {
// if empty, add red background class
if ($(this).val() == '') {
$(this).addClass('inputerror')
.attr('placeholder', 'Required')
.val(index);
} else {
$(this).removeClass('inputerror');
}
});
}
我用它来称呼它。
doFieldEmpty($("#studentid, #email, #dob"));
由于这段代码已经遍历了jQuery对象,我有点犹豫要不要写另一个能做我想做的事情。
所以我的问题是,我如何修改它同时执行这两项功能。
我希望我已经详细解释了我正在寻找的东西。提前谢谢。
答案 0 :(得分:0)
如果你真的只有3个字段并且只是检查你提到的条件,那么最好用基本的2条件检查来替换你现有的代码:
function validateFields() {
$('input').removeClass('inputerror');
// Check if ID is blank
if( $('#studentid').val() === '') {
$('#studentid').addClass('inputerror');
}
// Check if both email and dob are blank
if( $('#email').val() === '' && $('#dob').val() === '' ) {
$('#email, #dob').addClass('inputerror');
}
}
答案 1 :(得分:0)
如何传递一个额外的参数minimumRequired,并为每个循环增加计数。
function doFieldEmpty(input, minimumRequired) {
var ic = 0;
var $i = input;
var emptyCount = 0;
$i.each(function( index, value ) {
// if empty, add red background class
if ($(this).val() == '') {
emptyCount++;
if(emptyCount >= minimumRequired){
$(this).addClass('inputerror')
.attr('placeholder', 'Required')
.val(index);
}
} else {
$(this).removeClass('inputerror');
}
});
}