Валидация формы JQuery

[laimas]

jQuery(function($) - это уже объявлено в коде, $(function(), повторений не надо.
Это

$.mask.definitions['~']='[+-]';
$('#phone').mask('(999) 999-9999');

убрать, а шаблон /^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$/ заменить на /^\(\d{3}\)\s{1}\d{3}-\d{3}$/

PS. Или вы используете плагин, который форматирует ввод номера?

[K_arina]

laimas,
Хотела чтобы у поля телефона была такая вот подсказка +38 (___) ___ __ __ , которая не исчезает после клика по заполняемому полю.
И да, прочитала информацию про плагин Masked Input и захотелось его применить)

[laimas]

Ну тогда применяйте плагин здесь:

$(function() {
    
    $.mask.definitions['~']='[+-]';
    $('#phone').mask('(999) 999-9999');

    
    $('#formcheck').submit(function() ....

а шаблон проверки телефона должен быть таким:

/^\+38\s{1}\(\d{3}\)\s{1}\d{3}-\d{3}$/

[K_arina]

laimas,Исправила, но не работает. Может много скриптов подключила? Или ошибка где-то, не могу найти.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<script src="script.js"></script>
<script scr="jquery-3.1.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    $(function () {
        $.mask.definitions['~'] = '[+-]';
        $('#phone').mask('(999) 999-9999');
        $('#formcheck').submit(function () {
            var err = []
                , p = [

                    [/[а-яёА-ЯЁ]{2,12}/, 'Ввод имени некорректный'],
                    [/^\+38\s{1}\(\d{3}\)\s{1}\d{3}-\d{3}$/, 'Ввод телефона некорректный'],

                    [/^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$/, 'Ввод электронного адреса некорректный']

                         ];
            $(this).find('input').each(function (i, e) {
                var v = $.trim(e.value);
                if (!v || !(p[i][0]).test(v)) err.push(p[i][1])
            })
            if (err.length) {
                alert(err.join('\n'));
                return false;
            }
        })
    });
</script>

[laimas]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<script src="script.js"></script>
<script scr="jquery-3.1.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Должно быть так - две версии JQ подключать не надо, выберите одну из них, если нужна поддержка IE8, то можно 1.8.2, а лучше тогда 1.8.3, если нет, то 1.9.0. А у вас их подключается целых три.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<script src="script.js"></script>

PS. Если плагин maskedinput.js требует конкретной версии (не ниже какой-то), то подключайте таковую.

[K_arina]

А как сделать так, чтобы вместо отдельного сообщения уведомление об ошибке выводилось возле каждого поля формы? Это вместо p нужно присвоить объект? Как это сделать?

[laimas]

Это вместо p нужно присвоить объект?

Нет, переменная p может быть и массивом с вложенными массивами, это не так и важно, что она не объект. Нужно только иметь ввиду следующее - у меня кнопка отправки формы, это BUTTON, и так как я получаю коллекцию проверяемых полей $(this).find('input') не породит проблем. Но если вместо BUTTON будет INPUT типа submit, то возникнет ошибка - форма будет отправляться. В этом случае можно либо получать срез массива коллекции:

$(this).find('input').slice(0, -1).each(function(i, e) {
    .....

либо получать поля ввода типа text, указав соответствующим полям этот тип:

$(this).find('input[type="text"]').each(function(i, e) {
    .....

Эта переменная описывает правила проверки (шаблоны) и тексты сообщений об ошибках. Но ведь если поставлено задание посредством JQ, и если без использования pattern, то значит и required, и placeholder не должны применяться по идее. А значит проверку поля нужно производить раздельно: 1) поле заполнено?; 2) поле заполнено корректно?, а переменная p должна еще содержать для каждого поля сообщения об обязательном заполнении поля, и также текст подсказки что разрешено вводить в него.

А вывод этих сообщений у поля делается посредством скрипта с использованием слоя с абсолютным позиционированием, которое (и не только) описывается css-правилами. При этом подсказка для поля может выводиться при получении полем фокуса и если оно не заполнено и по истечении времени закрываться сама. А сообщения об ошибках естественно при их наличии.

[warren buffet]

K_arina, зачем паттерны с подсказками в каком-то массиве? Запиши их прямо в атрибуты полей и проверяй поле за полем на высоком уровне абстракции.

[warren buffet]

Атрибуты pattern и required в Safari например как следует не поддерживаются

Это если захотеть браузерную валидацию, а она недоделана и вообще мутная. То есть берем var p=el.getAttribute('pattern'); и юзаем в своем скрипте и стопудово в Сафари оно сработает. Аналогично с required и в этот атрибут еще можно записать min-length если в паттерне нету.

[warren buffet]

Вот тут сделано так было Валидация формы JQuery и вот как надо было продолжить

<form id="feedback" method="post">

<input name="name" required="required"
    pattern="[а-яёА-ЯЁ]{2,12}"
    e="Соблюдайте формат имени: от 2 до 12 русских букаф" />

<input name="phone" required="required"
    pattern="^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$"
    e="Неправильно набран номер, неправильно набран номер, бип-бип-бип" />

<input name="email" type="email" required="required"
    pattern="^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$" 
    e="Соблюдайте формат имейл: some@example.com" />

</form>

Теперь написать скрипт в несколько строк дело нескольких минут, поскольку все самоочевидно.