Изменение класса всех полей ввода, если введено одно поле ввода

Question

У меня есть страница с 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>

Итак, у меня есть сценарий проверки, в котором, если я просто изменю класс на 'required', он сделает это поле ввода обязательным. Проблема, с которой я столкнулся ... Я хочу требовать поле, только если заполнено другое поле в этой таблице, иначе поле не требуется. Пример: если заполнено t1-name, то я хочу изменить класс t1-id, t1-perDate и t1-email на 'required', и оставить все остальные классы для t2 и t3 без изменений. Мне было интересно, может ли кто-нибудь указать мне правильное направление с помощью какого-то кода JavaScript, который сделал бы это возможным. спасибо за помощь, и если вам нужна дополнительная информация, пожалуйста, спросите.

Answer 1

Таким образом, когда вы стираете из поля ввода «Имя», вам требуются соседние входы, если они предоставили имя.Но также не забудьте сделать их необязательными, если они вернутся и решат очистить это поле имени следующим образом:

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

Answer 2

<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 полезно для вставки в поле.

Answer 3

Если бы вы использовали 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');
    }
});