jQuery validate name array, required name array

Question

I'm running into a bit of trouble with the jQuery validate plugin.

I have a form with some name array checkboxes and corresponding name array radio inputs.

What I'm after is to only validate the action[] inputs when the (not required) check[] input has been checked.

$(document).ready(function(){
    $("#testForm").validate({
        rules: {
            'action[]': {
                required: function () {
                    return $("'check[]':checked");
                }
            }
        }
    });
});

<form id="testForm" name="testForm" method="post" action="" >
    <table cellpadding="1" cellspacing="1" border="1">
        <tr>
            <th>&nbsp;</th>
            <th>Include</th>
            <th>Action</th>
        </tr>
        <tr>
            <th>Row[0]:</th>
            <td><input type="checkbox" name="check[0]" value="Y" /></td>
            <td>
                <input type="radio" name="action[0]" class="required" value="ON" />ON<br/>
                <input type="radio" name="action[0]" class="required" value="OFF" />OFF<br/>
                <label class="error" for="action[0]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <th>Row[1]:</th>
            <td><input type="checkbox" name="check[1]" value="Y" /></td>
            <td>
                <input type="radio" name="action[1]" class="required" value="ON" />ON<br/>
                <input type="radio" name="action[1]" class="required" value="OFF" />OFF<br/>
                <label class="error" for="action[1]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <td colspan="3"><input type="submit" value="Submit Form" /></td>
        </tr>
    </table>
</form>

I have set up a jsfiddle to hopefully explain the problem in more detail:

http://jsfiddle.net/h2dt4t30/2/

Any help or guidance would be appreciated.

Thanks in advance

Arun P Johny · Accepted Answer · 2015-03-11 09:37:46Z

You could try something like

jQuery.validator.addClassRules("action-required", {
  required: function(el){
    return $(el).closest('tr').find('input[name^="check"]').is(':checked')
  }
});

$("#testForm").validate({});

//since snippet doesn't allow form submit
$(':button').click(function(){
  console.log($("#testForm").valid())
})

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<form id="testForm" name="testForm" method="post" action="" >
    <table cellpadding="1" cellspacing="1" border="1">
        <tr>
            <th>&nbsp;</th>
            <th>Include</th>
            <th>Action</th>
        </tr>
        <tr>
            <th>Row[0]:</th>
            <td><input type="checkbox" name="check[0]" value="Y" /></td>
            <td>
                <input type="radio" name="action[0]" class="action-required" value="ON" />ON<br/>
                <input type="radio" name="action[0]" class="action-required" value="OFF" />OFF<br/>
                <label class="error" for="action[0]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <th>Row[1]:</th>
            <td><input type="checkbox" name="check[1]" value="Y" /></td>
            <td>
                <input type="radio" name="action[1]" class="action-required" value="ON" />ON<br/>
                <input type="radio" name="action[1]" class="action-required" value="OFF" />OFF<br/>
                <label class="error" for="action[1]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <td colspan="3"><input type="button" value="Submit Form" /></td>
        </tr>
    </table>
</form>

skip405 · Accepted Answer · 2015-03-11 09:35:16Z

0

jsfiddle seems to be down for me at the moment, so I will update the answer as soon as it's back online

The validation plugin provides the depends option.

Please try like this:

$("#testForm").validate({
    rules: {
        'action[]': {
            depends: function () {
                return $("check[]").is(":checked"); //here you need to target the needed checkbox, not all of them
            }
        }
    }
});

answered Mar 11, 2015 at 9:35

skip405

6,3293 gold badges27 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery validate name array, required name array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related