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

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

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

问题

  1. 我正在这个表单中使用 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.

  1. <form class="needs-validation" action="opportunity_handling.php" novalidate method="POST">
  3. <div class="form-group col-md-6" >
  4.      <label>Opportunity OTC Value:</label>
  5.   <div class="input-group">
  6.    <input type="number" class="form-control" name="valueOTC">
  7.   </div>
  8. </div>
  10. <div class="form-group col-md-6" >
  11.   <label>Opportunity MRC Value:</label>
  12.  <div class="input-group">
  13.   <input type="number" class="form-control" name="valueMRC">
  14.  </div>
  15. </div>
  17. </form>

答案1

得分: 2

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

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
  3. <script>
  4.     $(document).ready(function () {
  5.         $('form').validate({
  6.             rules: {
  7.                 valueOTC: {
  8.                     required: function (element) {
  9.                         return $('input[name="valueMRC"]').val() == '';
  10.                     }
  11.                 },
  12.                 valueMRC: {
  13.                     required: function (element) {
  14.                         return $('input[name="valueOTC"]').val() == '';
  15.                     }
  16.                 }
  17.             }
  18.         });
  19.     });
  20. </script>

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

  1. <form class="needs-validation" action="opportunity_handling.php" method="POST" novalidate>
  3. <div class="form-group col-md-6">
  4.     <label>Opportunity OTC Value:</label>
  5.     <div class="input-group">
  6.         <input type="number" class="form-control" name="valueOTC" data-bv-one-field-required-by-name="valueOTC,valueMRC">
  7.     </div>
  8. </div>
  10. <div class="form-group col-md-6">
  11.     <label>Opportunity MRC Value:</label>
  12.     <div class="input-group">
  13.         <input type="number" class="form-control" name="valueMRC" data-bv-one-field-required-by-name="valueOTC,valueMRC">
  14.     </div>
  15. </div>
  17. </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.

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;script&gt;
  4.     $(document).ready(function () {
  5.         $(&#39;form&#39;).validate({
  6.             rules: {
  7.                 valueOTC: {
  8.                     required: function (element) {
  9.                         return $(&#39;input[name=&quot;valueMRC&quot;]&#39;).val() == &#39;&#39;;
  10.                     }
  11.                 },
  12.                 valueMRC: {
  13.                     required: function (element) {
  14.                         return $(&#39;input[name=&quot;valueOTC&quot;]&#39;).val() == &#39;&#39;;
  15.                     }
  16.                 }
  17.             }
  18.         });
  19.     });
  20. &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.

  1. &lt;form class=&quot;needs-validation&quot; action=&quot;opportunity_handling.php&quot; method=&quot;POST&quot; novalidate&gt;
  3. &lt;div class=&quot;form-group col-md-6&quot; &gt;
  4.      &lt;label&gt;Opportunity OTC Value:&lt;/label&gt;
  5.   &lt;div class=&quot;input-group&quot;&gt;
  6.    &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;
  7.   &lt;/div&gt;
  8. &lt;/div&gt;
  10. &lt;div class=&quot;form-group col-md-6&quot; &gt;
  11.   &lt;label&gt;Opportunity MRC Value:&lt;/label&gt;
  12.  &lt;div class=&quot;input-group&quot;&gt;
  13.   &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;
  14.  &lt;/div&gt;
  15. &lt;/div&gt;
  17. &lt;/form&gt;

答案2

得分: 1

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

  1. <form class="needs-validation" action="opportunity_handling.php" method="POST" novalidate>
  3. <div class="form-group col-md-6">
  4.     <label>Opportunity OTC Value:</label>
  5.     <div class="input-group">
  6.         <input type="number" class="form-control" name="valueOTC" required>
  7.     </div>
  8. </div>
  10. <div class="form-group col-md-6">
  11.     <label>Opportunity MRC Value:</label>
  12.     <div class="input-group">
  13.         <input type="number" class="form-control" name="valueMRC" required>
  14.     </div>
  15. </div>
  17. </form>
  1. <script>
  2. $(document).ready(function () {
  3.     window.addEventListener('load', function () {
  4.         // 获取所有要应用自定义Bootstrap验证样式的表单
  5.         var forms = document.getElementsByClassName('needs-validation');
  6.         // 循环遍历它们并阻止提交
  7.         var validation = Array.prototype.filter.call(forms, function (form) {
  8.             form.addEventListener('submit', function (event) {
  9.                 if (form.checkValidity() === false) {
  10.                     event.preventDefault();
  11.                     event.stopPropagation();
  12.                 }
  13.                 // 添加自定义验证规则
  14.                 if ($('input[name="valueOTC"]').val() == '' && $('input[name="valueMRC"]').val() == '') {
  15.                     event.preventDefault();
  16.                     event.stopPropagation();
  17.                     $('#error').html('<div class="alert alert-danger">请填写机会OTC价值或机会MRC价值中的至少一个。</div>');
  18.                 }
  19.                 form.classList.add('was-validated');
  20.             }, false);
  21.         });
  22.     }, false);
  23. });
  24. </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.

  1. &lt;form class=&quot;needs-validation&quot; action=&quot;opportunity_handling.php&quot; method=&quot;POST&quot; novalidate&gt;
  3. &lt;div class=&quot;form-group col-md-6&quot; &gt;
  4.      &lt;label&gt;Opportunity OTC Value:&lt;/label&gt;
  5.   &lt;div class=&quot;input-group&quot;&gt;
  6.    &lt;input type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;valueOTC&quot; required&gt;
  7.   &lt;/div&gt;
  8. &lt;/div&gt;
  10. &lt;div class=&quot;form-group col-md-6&quot; &gt;
  11.   &lt;label&gt;Opportunity MRC Value:&lt;/label&gt;
  12.  &lt;div class=&quot;input-group&quot;&gt;
  13.   &lt;input type=&quot;number&quot; class=&quot;form-control&quot; name=&quot;valueMRC&quot; required&gt;
  14.  &lt;/div&gt;
  15. &lt;/div&gt;
  17. &lt;/form&gt;

-

  1. &lt;script&gt;
  2.     $(document).ready(function () {
  3.         window.addEventListener(&#39;load&#39;, function () {
  4.             // Fetch all the forms we want to apply custom Bootstrap validation styles to
  5.             var forms = document.getElementsByClassName(&#39;needs-validation&#39;);
  6.             // Loop over them and prevent submission
  7.             var validation = Array.prototype.filter.call(forms, function (form) {
  8.                 form.addEventListener(&#39;submit&#39;, function (event) {
  9.                     if (form.checkValidity() === false) {
  10.                         event.preventDefault();
  11.                         event.stopPropagation();
  12.                     }
  13.                     //add custom validation rule
  14.                     if ($(&#39;input[name=&quot;valueOTC&quot;]&#39;).val() == &#39;&#39; &amp;&amp; $(&#39;input[name=&quot;valueMRC&quot;]&#39;).val() == &#39;&#39;) {
  15.                         event.preventDefault();
  16.                         event.stopPropagation();
  17.                         $(&#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;);
  18.                     }
  19.                     form.classList.add(&#39;was-validated&#39;);
  20.                 }, false);
  21.             });
  22.         }, false);
  23.     });
  24. &lt;/script&gt;

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

发表评论

匿名网友

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

确定