2013-04-04 4 views
0

У меня есть небольшая форма с тремя полями, которые необходимы.Уникальная проблема с текстовым полем с jQuery

<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> 

Первоначально это было хорошо. Однако теперь мне нужно изменить его, чтобы пользователь мог ввести идентификатор и по крайней мере один из двух других. Например. Идентификатор и 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

Можете ли вы показать (представительный) HTML, с которым должен работать этот jQuery? –

+0

Добавлена ​​форму HTML на главный пост. –

ответ

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'); 
    } 
} 

Демо: http://jsfiddle.net/3X86W/

+0

Спасибо. Я буду следовать вашим советам и держать их простыми. –

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'); 

    } 
}); 
} 
Смежные вопросы