Сделать проверку форм независимыми

335
18 января 2017, 01:17

На сайте расположены две формы, скрипт обрабатывает две формы как одну. Как исправить? чтобы скрипт обрабатывал их по отдельности.

var field = new Array("name", "phone"); //поля обязательные       
$("form").submit(function() { // обрабатываем отправку формы    
    var error = 0; // индекс ошибки
    $("form").find(":input").each(function() { // проверяем каждое поле в форме
        for (var i = 0; i < field.length; i++) { // если поле присутствует в списке обязательных
            if ($(this).attr("name") == field[i]) { //проверяем поле формы на пустоту
                if (!$(this).val()) { // если в поле пустое
                    $(this).css('border', 'red 2px solid'); // устанавливаем рамку красного цвета
                    error = 1; // определяем индекс ошибки  
                } else {
                    $(this).css('border', 'green 2px solid'); // устанавливаем рамку обычного цвета
                }
            }
        }
    })
    //провека номера телефона
    var phone = $("#phone").val();
    if (!isValidPhone(phone)) {
        error = 2;
        $("#phone").css('border', 'red 2px solid'); // устанавливаем рамку красного цвета
    }
    if (error == 0) { // если ошибок нет то отправляем данные
        return true;
    } else {
        return false; //если в форме встретились ошибки , не  позволяем отослать данные на сервер.
    }
    function isValidPhone(phone) {
        var pattern = new RegExp(/^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/);
        return pattern.test(phone);
    }
})
Answer 1

Напишите

$(this).find(":input").each(function() { // проверяем каждое поле в форме

вместо

$("form").find(":input").each(function() { // проверяем каждое поле в форме

и

$(this).find(".phone")...

вместо

$("#phone")...

соответственно изменив id="phone" на class="phone".

Answer 2
  1. Функцию

    function isValidPhone(phone)
    нужно вынести за пределы биндинга
    $("form").submit(function()...
    Иначе получается, что каждый раз при попытке отправить форму у вас пересоздается функция.

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

  3. Vyacheslav Potseluyko правильно вам показал пример: выбираете все формы и циклом навешиваете на каждую свое событие отправки формы. Тогда и привязка будет более адресная.

  4. if (error == 0) { return true; } else { return false; }

Тут немного лишнего. Форма и так будет отправлена, если вы не вернете false принудительно. Так что достаточно просто

if (error !== 0) return false;

Но возврат false - это не самый корректный вариант в данном случае. Лучше "обрывать" выполнение события методом event.stopPropagation() или event.preventDefault() (посмотрите примеры как это делать).

Answer 3

На чистом JS это будет выглядеть так

var forms = document.querySelectorAll("form");
for (var i = 0; i < forms.length; i++) {
  forms[i].onsubmit = function() {
    // код
  }
}
READ ALSO
Вообще не работает background-image

Вообще не работает background-image

Перепробовала сто тысяч вариантов img/bg-contactspng /img/bg-contacts

411
Как в CSS сделать выделение текста цветом?

Как в CSS сделать выделение текста цветом?

Как в CSS сделать выделение текста цветом? Цвет выделения может быть в RGBA-формате, те

416
Как сделать пункт меню не кликабельным, если он содержит подпункты?

Как сделать пункт меню не кликабельным, если он содержит подпункты?

Сайт сделан на WordPressОдин из пунктов меню имеет подпункты:

402