Как установить одно поле для использования проверки электронной почты или телефона?

Question

Я использую плагин jquery-validate для выполнения проверки на стороне клиента. Я пытаюсь сделать так, чтобы один ввод правил для электронной почты или номера телефона основывался на другом вводе.

Если второй вход имеет значение для «электронной почты», тогда правило для электронной почты устанавливается в значение true, а для правила phoneNumber устанавливается значение false и visceversa.

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

Я не использую встроенные правила для электронной почты или телефона, я сделал некоторые свои, вот они:

jQuery.validator.addMethod( "phoneNumber", function( phone_number, element ) {
            return this.optional( element ) || phone_number.length > 9 &&
                phone_number.match( /^[0-9]{7}|[0-9]{10}|\([0-9]{3}\)[0-9]{7}|\([0-9]{3}\)[\s\-]{1}[0-9]{3}[\s\-]{1}[0-9]{4}|[0-9]{3}[\s\-]{1}[0-9]{3}[\s\-]{1}[0-9]{4}$/ );
        }, 'Enter a valid phone number');

jQuery.validator.addMethod( "emailAddress", function( email, element ) {
            return this.optional( element ) ||
                email.match( /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ );
        }, 'Enter a valid e-mail address');

Я назначаю правила следующим образом:

$(`#input1`).rules('add', {
     required: function(element) {
          if($(`#input2`).val() != '') return true;

          return false;
     },
     emailAddress: function(element) {
          if($(`#input2`).val() == 'email') return true;

          return false;
     },
     phoneNumber: function(element) {
          if($(`#input2`).val() == 'phone') return true;

          return false;
     }
});

Таким образом, поле является обязательным только в том случае, если input2 имеет какое-то значение (работает хорошо), но независимо от того, какую опцию я выбираю на input2, проверка всегда завершается ошибкой с «Ввести действующий адрес электронной почты».

Я ожидаю, что когда input2 имеет значение «электронная почта», проверка завершается неудачно с помощью «Введите действительный адрес электронной почты», а когда значение для input2 равно «телефон», то происходит сбой с помощью «Введите действительный номер телефона» ».

Что я делаю не так?

Answer 1

Поскольку вы полностью меняете правила, я бы написал обработчик, который динамически добавляет и удаляет правила по мере необходимости.

$('#input2').on('keyup', function() {
    if ($(this).val() == 'phone') {
        $('#input1').rules('remove', 'emailAddress');
        $('#input1').rules('add', {
            phoneNumber: true
        });
    }
    if ($(this).val() == 'email') {
        $('#input1').rules('remove', 'phoneNumber')
        $('#input1').rules('add', {
            emailAddress: true
        });
    }
});

DEMO: jsfiddle.net / gk0e372j /

Однако, когда ничего не введено в поле #input2, поле телефона / электронной почты (#field1) по-прежнему required и будет принимать все, поэтому вам все равно нужно решить, как вы хотите обработать эту часть, как то, что ваша позиция по умолчанию. В противном случае вы не показали HTML и не объяснили, почему вы используете .rules() для их объявления.

---

Здесь та же логика, за исключением того, что она объявляет все в методе .validate() и использует опцию depends.

$('#myform').validate({ 
    rules: {
        input1: {
            required: true,
            phoneNumber: {
                depends: function(element) {
                    return ($('#input2').val() === 'phone') ? true : false;
                }
            },
            emailAddress: {
                depends: function(element) {
                    return ($('#input2').val() === 'email') ? true : false;
                }
            }
        }
    }
});

DEMO 2: jsfiddle.net / wnpxh9cm /