JQuery Validation - два поля, необходимые только для заполнения

Ответ 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'
     }
}

Ответ 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>

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

Ответ 3

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

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

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

Ответ 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" 

Ответ 5

У меня были проблемы .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 чтобы дать пользователю некоторую значимую информацию, потому что в сообщениях по умолчанию будет указано, что каждое поле является обязательным, что не соответствует действительности в этой ситуации.

Ответ 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>

Ответ 7

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

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