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

huangapple go评论81阅读模式
英文:

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

问题

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

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>

答案1

得分: 2

您可以使用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>

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

<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>
英文:

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

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
    $(document).ready(function () {
        $(&#39;form&#39;).validate({
            rules: {
                valueOTC: {
                    required: function (element) {
                        return $(&#39;input[name=&quot;valueMRC&quot;]&#39;).val() == &#39;&#39;;
                    }
                },
                valueMRC: {
                    required: function (element) {
                        return $(&#39;input[name=&quot;valueOTC&quot;]&#39;).val() == &#39;&#39;;
                    }
                }
            }
        });
    });
&lt;/script&gt;

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.

&lt;form class=&quot;needs-validation&quot; action=&quot;opportunity_handling.php&quot; method=&quot;POST&quot; novalidate&gt;

&lt;div class=&quot;form-group col-md-6&quot; &gt;
     &lt;label&gt;Opportunity OTC Value:&lt;/label&gt;
  &lt;div class=&quot;input-group&quot;&gt;
   &lt;input type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;valueOTC&quot; data-bv-one-field-required-by-name=&quot;valueOTC,valueMRC&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;form-group col-md-6&quot; &gt;
  &lt;label&gt;Opportunity MRC Value:&lt;/label&gt;
 &lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;valueMRC&quot; data-bv-one-field-required-by-name=&quot;valueOTC,valueMRC&quot;&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;/form&gt;

答案2

得分: 1

你可以在两个字段上都使用HTML的"required"属性,然后在表单中添加一个自定义的验证规则。这个自定义验证规则将检查这两个字段中至少有一个不为空。

<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 () {
        // 获取所有要应用自定义Bootstrap验证样式的表单
        var forms = document.getElementsByClassName('needs-validation');
        // 循环遍历它们并阻止提交
        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                // 添加自定义验证规则
                if ($('input[name="valueOTC"]').val() == '' && $('input[name="valueMRC"]').val() == '') {
                    event.preventDefault();
                    event.stopPropagation();
                    $('#error').html('<div class="alert alert-danger">请填写机会OTC价值或机会MRC价值中的至少一个。</div>');
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
});
</script>
英文:

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.

&lt;form class=&quot;needs-validation&quot; action=&quot;opportunity_handling.php&quot; method=&quot;POST&quot; novalidate&gt;

&lt;div class=&quot;form-group col-md-6&quot; &gt;
     &lt;label&gt;Opportunity OTC Value:&lt;/label&gt;
  &lt;div class=&quot;input-group&quot;&gt;
   &lt;input type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;valueOTC&quot; required&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;form-group col-md-6&quot; &gt;
  &lt;label&gt;Opportunity MRC Value:&lt;/label&gt;
 &lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;valueMRC&quot; required&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;/form&gt;

-

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

huangapple
  • 本文由 发表于 2023年2月19日 13:27:57
  • 转载请务必保留本文链接:https://go.coder-hub.com/75498185.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定