CODEWITHSUNDEEP
phpjqueryarraysvalidation
JustBaron
JustBaron

Reputation: 2347

jQuery validate name array, required name array

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

Upvotes: 2

Views: 923

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388446

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>

Upvotes: 1

skip405
skip405

Reputation: 6279

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

Upvotes: 0

Related Questions