jQuery獨特的文本框需要問題

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。例如。 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'); 

    } 
}); 
}