Проверка jQuery - два поля, обязательные для заполнения

Question

Я использую плагин проверки jQuery в моей форме. В моей форме есть поле «Телефон» и «Номер мобильного телефона». поле.

Как мне сделать так, чтобы пользователь заполнил одно из них, но это может быть любое поле?

Answer 1

Это похоже на то, что вам нужно использовать зависимость-обратный вызов

То, что это позволит вам сделать, это:

Делает требуемый элемент, в зависимости отна результат данного обратного вызова.

Затем можно поместить правило проверки required в два телефонных поля, которые будут необходимы только на основе возврата из обратного вызова функции;таким образом, вы можете поместить правило в телефонное поле, чтобы сказать, что требуется это правило, только если мобильное поле пустое, и наоборот для мобильного поля.

Это не проверено, но в теории

rules: {
    telephone: {
        required: function(element) {
            return $("#mobile").is(':empty');
        }
    },
    mobile: {
        required: function(element) {
            return $("#telephone").is(':empty');
        }
    }
}

Обязательно проверяйте комментарии / другие ответы на возможные обновленные ответы.

ОБНОВЛЕНИЕ

rules: {
     telephone: {
          required: '#mobile:blank'
     },
     mobile: {
          required: '#telephone:blank'
     }
}

Answer 2

Я думаю, что правильный способ сделать это - использовать метод require_from_group.

Вы можете поставить отметку на http://jqueryvalidation.org/require_from_group-method/

Пример именно того, что вы ищете:

<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});
</script>

Обязательно включать дополнительные-method.js

Answer 3

Пришел сюда в поисках тех же ответов. Наш пост очень полезен. Спасибо.

Я расширил это решение, чтобы проверить, действительно ли другое поле действительно, а не просто "не пусто". Это гарантирует, что пользователь вводит действительный номер телефона перед удалением «обязательного» класса из поля «Мобильный» и наоборот.

Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}

Answer 4

Требование: Валидация должна быть C или (A и B).Для меня это сработало:

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) {
        returnVal = true;
    }
    return returnVal; 
}, 'Either C or A and B is required');


$('#Afield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Cfield").valid();

});

$('#Bfield.form-control').change(function(){
    $(this).valid();
    $("#Afield").valid();
    $("#Cfield").valid();
});

$('#Cfield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Afield").valid();
});


within rules I have 
Afield: "multipeFieldValidator",
Bfield: "multipeFieldValidator",
Cfield: "multipeFieldValidator" 

Answer 5

Это будет делать

Mobile: {
    required: function(element) {
    return (jQuery.isEmptyObject($("#Phone").val()));
    }
},
Phone: {
    required: function(element) {
        return (jQuery.isEmptyObject($("#Mobile").val()));
    }
}

Answer 6

$(document).ready(function () {
    jQuery.validator.addMethod("mobile10d", function (value, element) {
        return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value);
    }, "Please enter a valid 10 digit phone number.");
    $("#form_id").validate({
        rules: {
            mobile: {
                required: "#telephone:blank",
                mobile10d: true
            },
            telephone: {
                required: "#mobile:blank",
                mobile10d: true
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form class="" action="" method="POST" id="form_id">
    <div class="col-md-4 form-group">
        <label class="form-control">Mobile<span class="required">*</span></label>
        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9">
    </div>
    <div class="col-md-4 form-group">
        <label class="form-control">Telephone<span class="required">*</span></label>
        <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9">
    </div>
    <div class="form-group">
        <input type="submit" name="" value="Submit" class="apply-now-btn">
    </div>
</form>

Answer 7

У меня были проблемы .is(':empty'), так что вот мой пример рабочих опций.

До:

rules: {
   name:       {required: true},
   email:      {required: true},
   phone:      {required: true}
}

Все поля были обязательны .Но я хотел, чтобы электронная почта и / или телефон создавали 'или':

rules: {
   name:       {required: true},
   email:      {required: 
                    function() {
                        //returns true if phone is empty   
                        return !$("#phone").val();
                    }
               },
   phone:      {required:
                    function() {
                        //returns true if email is empty
                        return !$("#email").val();
                     }
               }
},
messages: {
   email: "Email is required if no phone number is given.",
   phone: "A phone number is required if no phone email is given."
}

И вы увидите, что я добавил опцию messages, чтобы дать пользователю некоторую значимую информацию, поскольку сообщения по умолчаниюсказал бы, что каждое поле является обязательным, что не соответствует действительности в этой ситуации.