Откат Javascript для атрибута «pattern» в HTML5 на <input>

Question

Я использую атрибут HTML5 "pattern" для проверки на стороне клиента (пожалуйста, не говорите мне о проверке на стороне сервера, у меня это есть).Я хочу использовать Javascript или jQuery для пользователей, использующих браузеры без поддержки шаблонов.Какой хороший способ сделать это?

Вот пример элемента ввода:

<input type=tel name=contact[phone] id=phone required pattern=^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$>

Answer 1

В событии submit вашей формы (или где-либо еще) проверьте его, используя существующее свойство pattern.

var input = document.getElementsByName('contact[phone]')[0],
    isValid = input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0;

jsFiddle .

Сначала вы захотите проверить совместимость браузера, чтобы убедиться, что он поддерживает атрибут pattern.Вы можете сделать это с Modernizr .

Answer 2

Вы можете использовать Modernizr , чтобы проверить, что поддерживается браузером пользователя.

Обнаружение HTML5 с Modernizr

Модернизатор позволяет вам делать такие вещи:

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

Answer 3

Моим лучшим предположением было бы сначала иметь функцию, которая использует jQuery для поиска браузера и версии, и сопоставить ее с тем, поддерживает ли она шаблон или нет, а затем сделать что-то вроде

$("#element").onChange(function()
{
    if(doesNotSupportPattern())
    {
        var pattern = $(this).prop('pattern');
    if(!$(this).val().match(pattern)))
        {
            //Code to make form invalid
        }
    }
});

или что-то в этом роде

---

Смена плана, это не тот путь

$("#form").submit(function()
{
    var valid = true;
    $(this).find('input').each(function()
    {
        if(!$(this).prop('pattern'))
            continue;

        if(!$(this).val().match($(this).prop('pattern')))
            valid = false;
    });

    if(!valid)
    {
        //invalidate form
    }
});

Будет лучше. Таким образом, он будет запускаться для каждого элемента, и он более компактен, и, если шаблон включен, он не будет вмешиваться в любом случае, так как он должен отправлять, только если все совпадают, а если нет, форма в любом случае становится недействительной