CODEWITHSUNDEEP
jqueryjquery-validate
Tim
Tim

Reputation: 57

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

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.

Upvotes: 0

Views: 900

Answers (2)

Sparky
Sparky

Reputation: 98738

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

Upvotes: 1

Dibash Sapkota
Dibash Sapkota

Reputation: 665

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>

Upvotes: 0

Related Questions