Проверка JQuery: требуется либо действительный телефон или действующий адрес электронной почты

Question

Первый день с проверкой jQuery, но не первый день с jQuery.Очень простой вопрос: у меня есть три текстовых ввода: имя, телефон и адрес электронной почты.Я хочу запросить имя (без пота) и ЛЮБОЙ телефон ИЛИ электронную почту, и убедиться, что ввод действителен ЛЮБОЙ телефон ИЛИ электронная почта.Я пробовал это с:

$(document).ready(function() {
$("#contactForm").validate({
    debug:true,
    rules: {
        name: {
            required: true
        },
        email: {
            email:true,
            required: function(element){
                !$("#phone").valid();   
            }
        },
        phone: {
            phoneUS: true,
            required: function(element){
                !$("#email").valid();   
            }
        }
    },
    messages: {
        name: "Please specify your name",
        email: {
            required: "Please enter a valid email"
        },
        phone: "Please enter a 10 digit phone number"
    }
});

});

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

Тамдолжен быть какой-то простой способ сделать это, но я потратил на это около двух часов, и это ускользает от меня: (

Answer 1

Вы можете создать свой собственный метод с помощью

$.validator.addMethod(
    "email_or_phone_number", 
    (value, element) => {
        this.optional(element) || /*is optional*/
        /^\d{10,11}$/.test(value) || /*is phone number*/
        /\S+@\S+\.\S+/.test(value) /*is email*/
    },
    "Please enter either phone number or e-mail"
);

Теперь вы можете использовать метод "email_or_phone_number" Для случая с несколькими данными:

<input type="text" class="{email_or_phone_number:true}" value="" />

Вы можете изменить регулярное выражение внутри метода в соответствии с вашими потребностями

Answer 2

Это старый вопрос, теперь доступно лучшее решение - jQuery Groups. Пример jQuery Groups .Проверка будет выглядеть следующим образом:

$( "#myform" ).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"]
    }
  }
});

Каждое из трех полей будет содержать class = "phone-group".

Не забудьте включить Additional-method.min.js., который требуется для проверки групп.

Answer 3

Хорошо, очень простое решение, забыл опубликовать его раньше - перехватить отправку формы, сначала вручную проверить, а затем запустить проверку плагина.Вот пример, который требует, чтобы был выбран один из n флажков (адаптированных из реального проекта, поэтому он может иметь некоторые опечатки, но вы получите jist):

(document).ready(function() {
       // on form submission
       $('form#signup').submit(function() {
                // make sure a checkbox is selected
                var checked = false;
                $('input.checkboxGroupMember').each(function(index) {
                    if ($(this).attr('checked')) {
                        checked = true;
                    }
                });
                if (checked == false) {
                    // do whatever to handle the failure here
                    $('div#feedback').html('Please select a checkbox');
                    return false;
                } else {
                    $('form#signup').validate();
                }

            });

            // once a checkbox is selected, clear feedback
            $('form input.checkboxGroupMember').change(function(index) {
                if ($(this).attr('checked')) {
                    $('div#feedback').empty();
                }
            });

            $('form#signup').validate();
        });

Может быть легко адаптирован для работы с любымтребуется проверка, которую вы не хотите делать с помощью плагина проверки jQuery.