Question 45167 in Html Question posted in
Some basic documentation can be found here.

How to ensure at least one of the two input field is not empty in bootstrap 5 validation – Html

I am using bootstrap validation for other input fields in this form using ‘required’ attribute. but for this two fields if at least one is not empty than form should be submitted.

<form class="needs-validation" action="opportunity_handling.php" novalidate method="POST">

<div class="form-group col-md-6" >
     <label>Opportunity OTC Value:</label>
  <div class="input-group">
   <input type="number" class="form-control" name="valueOTC">
  </div>
</div>

<div class="form-group col-md-6" >
  <label>Opportunity MRC Value:</label>
 <div class="input-group">
  <input type="number" class="form-control" name="valueMRC">
 </div>
</div>

</form>
Tags:

2

Answers


  1. 0

    You can use the jQuery validation plugin to validate that at least one of the two fields is not empty before submitting the form.

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

<script>
    $(document).ready(function () {
        $('form').validate({
            rules: {
                valueOTC: {
                    required: function (element) {
                        return $('input[name="valueMRC"]').val() == '';
                    }
                },
                valueMRC: {
                    required: function (element) {
                        return $('input[name="valueOTC"]').val() == '';
                    }
                }
            }
        });
    });
</script>

    You can use the data-attribute data-bv-one-field-required-by-name to validate that at least one of the two fields is not empty using Bootstrap validation.

    <form class="needs-validation" action="opportunity_handling.php" method="POST" novalidate>

<div class="form-group col-md-6" >
     <label>Opportunity OTC Value:</label>
  <div class="input-group">
   <input type="number" class="form-control" name="valueOTC" data-bv-one-field-required-by-name="valueOTC,valueMRC">
  </div>
</div>

<div class="form-group col-md-6" >
  <label>Opportunity MRC Value:</label>
 <div class="input-group">
  <input type="number" class="form-control" name="valueMRC" data-bv-one-field-required-by-name="valueOTC,valueMRC">
 </div>
</div>

</form>
    Login or Signup to reply.
  2. 0

    You can use the HTML required attribute on both fields and then add a custom validation rule to the form. This custom validation rule will check if at least one of the two fields is not empty.

    <form class="needs-validation" action="opportunity_handling.php" method="POST" novalidate>

<div class="form-group col-md-6" >
     <label>Opportunity OTC Value:</label>
  <div class="input-group">
   <input type="number" class="form-control" name="valueOTC" required>
  </div>
</div>

<div class="form-group col-md-6" >
  <label>Opportunity MRC Value:</label>
 <div class="input-group">
  <input type="number" class="form-control" name="valueMRC" required>
 </div>
</div>

</form>

    <script>
    $(document).ready(function () {
        window.addEventListener('load', function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    //add custom validation rule
                    if ($('input[name="valueOTC"]').val() == '' && $('input[name="valueMRC"]').val() == '') {
                        event.preventDefault();
                        event.stopPropagation();
                        $('#error').html('<div class="alert alert-danger">Please enter either Opportunity OTC Value or Opportunity MRC Value.</div>');
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search