Jquery Validate require at least 1 checkbox if text field has a value

Question

Struggling with a validation scenario with jQuery Validate. I need at least 1 checkbox to be checked if a text field has a value. I have found how to require at least one checkbox in a group on their own, but not based on a value from a different field.

<input type="checkbox" name="a" value="x">
<input type="checkbox" name="b" value="y">
<input type="checkbox" name="c" value="z">
<input type="text" name="textfield">

At least one of the three checkboxes must be checked if there is any value at all in 'textfield'. If there is no value in 'textfield' the checkboxes can be checked or not - not required.

For this scenario, you need all three to have the exact same name attribute. In that case, at least one of the three would be required. — Sparky
– Sparky, Commented Jun 29, 2021 at 16:54
For the second part, you would use a depends attribute to toggle the required rule on the checkboxes. — Sparky
– Sparky, Commented Jun 29, 2021 at 16:57
Not possible to have all be the same name. I was hoping that something with a class would work, possibly with require_from_group. — Tim
– Tim, Commented Jun 29, 2021 at 16:58

Sparky · Accepted Answer · 2021-06-30 01:19:16Z

<form id="myform">
    <input type="checkbox" class="foo" name="a" value="x">
    <input type="checkbox" class="foo" name="b" value="y">
    <input type="checkbox" class="foo" name="c" value="z">
    <input type="text" name="textfield">
    <input type="submit">
</form>

$(document).ready(function() {
    $('#myform').validate({
        rules: {
            a: {
                require_from_group: function() {
                    if ($('[name="textfield"]').is(':filled')) {
                        return [1, ".foo"];
                    }
                }
            },
            b: {
                require_from_group: function() {
                    if ($('[name="textfield"]').is(':filled')) {
                        return [1, ".foo"];
                    }
                }
            },
            c: {
                require_from_group: function() {
                    if ($('[name="textfield"]').is(':filled')) {
                        return [1, ".foo"];
                    }
                }
            },
            textfield: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            error.insertBefore(element);
        }
    });
});

https://jsfiddle.net/s62h8or1/

Dibash Sapkota · Accepted Answer · 2021-06-29 17:18:09Z

0

You can check this ,hope it helps you

let checkBox_i = $("input[name='a']");
let checkBox_ii = $("input[name='b']");
let checkBox_iii = $("input[name='c']");

let text = $("input[name='textfield']");

$(':input').on('input', validateInput)

function validateInput() {
  let a = text.val().trim();
  let b = checkBox_i.is(':checked');
  let c = checkBox_ii.is(':checked');
  let d = checkBox_iii.is(':checked');

  //checks if text extsts and checks any one of checkbox is checked
  if (a.length > 0 && (b || c || d)) {
    //your code 
    $('.validStatus').text('valid input');
  } else {
    //uncheck checkbox if input is removed
    checkBox_i.prop('checked', false);
    checkBox_ii.prop('checked', false);
    checkBox_iii.prop('checked', false);

    //alert user for invalid input
    $('.validStatus').text('');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<input type="checkbox" name="a" value="x">
<input type="checkbox" name="b" value="y">
<input type="checkbox" name="c" value="z">
<input type="text" name="textfield">

<div class='validStatus'></div>

edited Jun 29, 2021 at 17:18

answered Jun 29, 2021 at 17:08

Dibash Sapkota

6657 silver badges9 bronze badges

1 Comment

Sparky Over a year ago

He specifically asked about how to accomplish this using the jQuery Validate plugin.

Collectives™ on Stack Overflow

Jquery Validate require at least 1 checkbox if text field has a value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related