Changing class of all input fields if one input field is entered

Question

I have a page with 3 tables:

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

So, I have a validation script where if I just change the class to 'required' then it will make that input field required. The problem I am having is....I only want to require a field if another field in that table is filled out, otherwise the field is not required. Ex: If t1 - name is filled in then I want to change the class of t1 - id, t1 - perDate, and t1 - email to 'required', and leave all of the other classes for t2 and t3 untouched. I was wondering if someone could point me in the right direction with some sort of javascript code that would make this possible. thanks for all the help, and if more info is needed, please ask.

Answer 1

So when you blur out of the "Name" input, you require the adjacent inputs to be required if they provided a name. But also don't forget to make them not required if they go back and decide to clear that name field like so:

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

Also, if you're trying to change the required attribute if any of the controls have data, you would do something like this:

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

If you were to use jQuery, or any other JS library, you could very easily do something like this:

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

Answer 3

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

It's useful to add all onkeydown , onkeyup and onchange . onchange is useful for pasting in the field.