Question

我有一个包含三个字段的小表单。

<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对象，我有点犹豫要不要写另一个能做我想做的事情。

所以我的问题是，我如何修改它同时执行这两项功能。

我希望我已经详细解释了我正在寻找的东西。提前谢谢。

Answer 1

如果你真的只有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');   
    }
}

演示：http://jsfiddle.net/3X86W/

Answer 2

如何传递一个额外的参数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');

    }
});
}

独特的文本框需要jQuery的问题

2 个答案: