it-roy-ru.com

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

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

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

46
Probocop

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

Что это позволит вам сделать это:

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

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

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

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

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

59
Jeff Wilbert

Я думаю, что правильный способ сделать это - использовать метод 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>

В обязательном порядке должен быть добавлен Additional-method.js 

40
eveevans

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

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

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

Требование Валидация должна быть либо 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" 
2
Vik18

$(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>

0
Vijayan Jayaraman

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

0
Warren

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

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