javascript 如何确保bootstrap 5验证中两个输入字段中至少有一个不为空

jchrr9hc  于 2023-02-21  发布在  Java
关注(0)|答案(2)|浏览(265)

我正在使用 Bootstrap 验证此表单中的其他输入字段使用'必需'属性。但对于这两个字段,如果至少有一个不是空的,则应提交表单。

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

nxowjjhe1#

在提交表单之前,可以使用jQuery验证插件来验证两个字段中至少有一个不是空的。

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

您可以使用data-attribute data-bv-one-field-required-by-name通过Bootstrap验证来验证两个字段中至少有一个不是空的。

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

flvtvl502#

您可以在这两个字段上使用HTML必填属性,然后向表单添加自定义验证规则。此自定义验证规则将检查这两个字段中是否至少有一个不为空。

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

相关问题