Question

我有一个包含4个字段的联系表单，并且只有电话号码字段是必填字段。我想更改它，并将电话或电子邮件字段设为必填项。其中之一必须填写。如果有人填写电子邮件字段，则电话字段不再是必填项，反之亦然。

下面是我必须更改的代码。

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    $(document).ready(function () {
      $.validator.addMethod(
        'regex',
        function (value, element, regexp) {
          var check = false
          return this.optional(element) || regexp.test(value)
        },
        'Sprawdź swoje dane.'
      )
      var validator = $('#sfform').validate({
        debug: false,
        ignore: '.ignore',
        rules: {
          email: {
            required: false,
            email: true
          },
          mobile: {
            required: true,
            regex: /^((00|\+)[1-9]([\s-\.]?\d){6,11}|0?[1-9]([\s-\.]?\d){8})$/
          },
          '00N1t00000ADSD0': {
            required: true
          },
          hiddenRecaptcha: {
            required: function () {
              if (grecaptcha.getResponse() == '') {
                return true
              } else {
                return false
              }
            }
          }
        },
        messages: {
          email: {
            email: 'Błędny adres email'
          },
          mobile: {
            required: 'Numer telefonu jest wymagany',
            regex: 'Błędny numer telefonu'
          },
          '00N1t00000ADSD0':
            {
              required: 'Zgoda jest wymagana do uzyskania kontaktu'
            },
          hiddenRecaptcha: {
            required: 'Zanaczenie pola jest wymagane'
          }
        },
        submitHandler: function () {
          document.getElementById('sfform').submit()
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback')
          element.closest('.form-group').append(error)
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid')
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid')
        }
      })
    })
  })
</script>

Answer 1

您可以通过检查另一个字段来返回布尔值：

rules: {
      email: {
        required: '#mobile:blank'
      },
      mobile: {
        required: '#email:blank',
        regex: /^((00|\+)[1-9]([\s-\.]?\d){6,11}|0?[1-9]([\s-\.]?\d){8})$/
      },
      ...

以上假设您的字段具有ID #mobile和#email。

详细了解“ 依赖性表达式” here和不同的检查:filled，:unchecked或:blank here。

Answer 2

我们已经找到解决方法

           rules: {
               email: {
                   required: function() {
                       if(document.getElementById('mobile').value == '') {
                           return true
                       } else {
                           return false
                       }
                   },
                   email: true,
               },
               mobile: {
                   required: function() {
                       if(document.getElementById('email').value == '') {
                           return true
                       } else {
                           return false
                       }

如何在联系表单中至少强制一个字段

2 个答案: