Как реализовать проверку текстового поля?

Question

[Valeriy1997]

Есть текстовое поле :

<input  id="phone" type="text" autocomplete="off" class="telephone"   value="Введите Ваш номер" name="input" >

и есть кнопка:

<button id="enter" class="entr btn" disabled  type="submit">Enter</button>

нужно сделать проверку на количество цифр: не больше 12 , и на соответствие с моб. операторами , и пока условия проверки не будут удовлетворены кнопка submit будет находиться в состоянии disabled . При успешном вводе состояние disabled снимается , и сохраняются данные о времени и введенном номере в переменную в формате json

Я думаю реализовать так :

function checkParams() {
    var phone = $('#phone').val();
    
    if(phone.length !== 12 ) {
		alert("ne12")
        $('#enter').removeAttr('disabled');
    } else {
		alert("12")
        $('#enter').attr('disabled', 'disabled');
    }
}

а проверку на операторы не знаю как(
может получаю строку с инпута в переменную , первые цифры закидываю их в массив , и сравниваю с другим массивом где есть эти номера ? Если проверка удалась копирую номер полностью в другой массив. А как его вместе с датой скопировать ?
И самое главное по какому событию нужно делать эти проверки ? (первоначально я планировал по событию : .on('input', function () {

Answer 1

[Дмитрий Ковальский]

В теории вам надо слазить на сервер, сравнить с базой мобильных номеров и вернуть нужного оператора. Это в теории. На практике - С одной стороны все решается кодом оператора в 3 цифры и базой МинСвязи описывающей какие номера, какому оператору были выданы, а с другой - у нас есть возможность сменить оператора без смены номера телефона(и если у вас нет доступа к актуальным данным - проверка кода оператора вызовет ошибку), а еще у нас есть такой оператор как "Алло инкогнито" , абоненты которого могут выглядеть как московский стационарный телефон или МТС/Мегафон/Билайн, но не быть ими. На мой взгляд - вам надо собрать небольшую базу 4значных цифр (код оператора + 1 первая цифра номера) По этим данным выяснить принадлежность к некому оператору по данным МинСвязи, предложить пользователю сего оператора, а если вы ошиблись - оставить право последнего выбора за клиентом.
P.S. не забывайте что Javascript может быть отключен.

Comments

[Valeriy1997]

Достоверность здесь не очень важна(скорее это для галочки ) поэтому первые несколько цыфр будут проверяться только на клиенте сравниваться с основными операторами которые забиты в массив.

[Дмитрий Ковальский]

Valeriy1997: Тогда может стоить повесить на текстовое поле обработчик события onfocus, а при срабатывании - обрабатывайте keyup - поможет убить буквы и всякую хрень. А по части бизнес-логики - уточните сколько в России Мегафонов. Пару лет назад их было около 8.

Answer 2

[astrojunk]

Прошу проверить код на корректность. тут без подсветки не удобно писать. как-то так примерно должно быть.

(function($){

var checkMobileOperator = function(){

//var operators  = window.operators;
var operators = [{'code'909:, 'name''Beeline'},{code: '921', name: 'MTS'}];

this.check = function(value){

value = value.replace(/(?:^(7|\+7|8))*(?:\(|\))/g,'');

if (value.length == 9) {

var code = value.substr(0,3);

    for (var i = 0, len =  operators.length; i < len; i++) {
        if ( operators[i].code === code)
            return operators[i].name; 
    }

    return null; 
}

}

}

var CheckMobileOperator = new checkMobileOperator();

var form = $('form'),
input = $('#phone', form),
submit =form.find('button['type=submit'])
submit.addAttr('disabled','disabled');

input.on('keydown, function(e){
if (!((which >= 48 && which <= 57) || which == 13)){
 e.preventDefault();
 return false;
}

!!checkMobileOperator.check(input.val()) && submit.removeAttr('disabled');

});
}(jQuery)

Comments

[Valeriy1997]

В этой строке была ошибка : var operators = [{'code':'909', 'name':'Beeline'},{'code': '921', 'name': 'MTS'}];
Исправил

[astrojunk]

Valeriy1997: после ] добавить '

[Valeriy1997]

Спасибо

Answer 3

[Андрей Федоров]

у input есть параметр pattern, где регулярными выражениями, прямо в html можно проверить введенный текст на соответствие.

например,
<input type="tel" pattern="\d{12}">
не позволит отправить отправить ничего, кроме строки из 12 цифр.

обратите внимание на тип input. это новый тип, появившийся в HTML5, полагаю сейчас разницы с type="text" нет, но в будущем может появиться дополнительный функционал. в браузерах не поддерживающих данный тип будет автоматически использоваться type="text"

Comments

[astrojunk]

Не очень кроссбраузерно caniuse.com/#feat=input-email-tel-url, и не решает задачу в общем итоге. Ну и ограничивает пользователя в форматах данных (7, +7, 8)

[astrojunk]

Но несомненно это будущее:)

[Андрей Федоров]

Ну type тут не главное. Главное чтобы поддерживались pattern'ы. Я придерживаюсь тезы "перестаньте поддерживать устаревшие браузеры". Мои проекты показывают за последний год, что IE6,7,8,9 суммарно около 1% посетителей. И тут нужно для себя решить, что важнее 1% или трудозатраты в попытке их поддержать.

Answer 4

[Сергей Зеленский]

нет события input есть событие onchange

Comments

[Сергей Зеленский]

да нашел в спецификации, извиняюсь