Формы, часть 3, ВСЁ, что нужно для валидации форм на jQuery

« Предыдущая запись
 
  Следующая запись »
 

"Проверка полей форм на правильность ввода", как много сказано этими словами и как много статей написано по этой теме. В предыдущей записи была рассмотрена проверка форм на PHP. Всем она хороша кроме того, что требуется перезагружать страницу. Среди вариантов, где проверка формы идёт без перезагрузки страницы, существует решение - дополнение к jQuery под названием jQuery Validate.

jqueryval Формы, часть 3, ВСЁ, что нужно для валидации форм на jQuery Существуют различные статьи по jQuery Validate, которые в целом дополняют друг друга. Среди них рекомендую к ознакомлению статью jQuery Validation - проверка данных в ajax форме и статью по решению некоторых вопросов валидации на jQuery. Первый блог я вообще бы советовал к ознакомлению, по jQuery там очень много полезного написано, на русском. Вторая ссылка идёт на какой-то форум на английском языке. Данная статья базируется именно на этих двух слонах (а третий слон – глав.ред. – прим.ред.).

В данной статье я постараюсь собрать воедино всё самое необходимое и используемое, сделаю акцент на некоторых вопросах, которые до сих пор часто возникают по этой теме, а если быть конкретнее, то использование remote (если конечно это вам что-то скажет – прим.ред.).

Внимание! После ознакомления с этой статьёй, не забудьте ознакомиться с её прямым продолжением - Часть 6. Проверка данных формы на jQuery Validate

По ссылкам можно скачать пример из статьи и при желании все исходные файлы.

 


Подготавливаем форму

Для начала вооружимся необходимыми библиотеками. В примере будут использованы jQuery validation plug-in 1.5.1 и jQuery 1.2.6, которые можно скачать на странице закачек.

Далее необходимо создать форму. Большую форму. С кучей полей, чтобы всё было (как в той Греции – прим.ред.), то есть были бы все варианты для рассмотрения возможностей проверки форм на jQuery. А код этой формы можно видеть в листинге.

<form action="" method="post" name="form_name" id="form_name">
    <label for="name">Никнейм: <span></span></label><br>
    <input name="name" id="name" type="text" size="30" value=''>
    <table border="0" width="655px">
        <tr>
            <td valign="bottom" width="33%">
                <label for="password">Текущий пароль: <span></span></label><br>
                <input name="password" type="password" id="password" size="30" value="">
            </td>
            <td valign="bottom" width="33%">
                <label for="password_new">Новый пароль: <span></span></label><br>
                <input name="password_new" id="password_new" type="password" size="30" value=''>
            </td>
            <td valign="bottom">
                <label for="password_new_check">Повторно введите пароль: <span></span></label><br>
                <input name="password_new_check" id="password_new_check" type="password" size="30" value=''>
            </td>
        </tr>
        <tr>
            <td>
                <label for="email">E-mail: <span></span></label><br>
                <input name="email" id="email" type="text" size="30">
            </td>
            <td>
                <label for="age">Возраст: <span></span></label><br>
                <input name="age" id="age" type="text" size="30">
            </td>
            <td>
                <label for="date">Дата рождения: <span></span></label><br>
                <input name="date" id="date" type="text" size="30">
            </td>
        </tr>
    </table>
    <label for="urlname">Адрес сайта: <span></span></label><br>
    <input name="urlname" id="urlname" type="text" size="30"><br>
    <label for="about">О себе: <span></span></label><br>
    <textarea name="about" id="about" cols="79" rows="10"></textarea>
<p><input type="submit" name="submit" value="Сохранить"></p>
</form>

В целом форма сделана по подобию той, которую мы делали в предыдущих статьях. Более подробно можно прочитать в первой из статей – форма обратной связи. По сути только таблица добавлена, которая выступает в роли разметки.

Однако обращу ваше внимание  на ещё одну вещь. В теге лейбла добавлен пустой тег span. Не просто так, в него будет помещен текст ошибки, если таковая будет возникать.

Последнее, что скажу. В примере использованы строка ввода через input и тектовое поле textarea. Если у вас будут выкидные списки или ещё что-то из области форм, то вы без проблем можете и их “валидировать”.

Подключаем библиотеки и стили CSS

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

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.validate-1.5.1.js"></script>
<style>
label span {
    color: #EA5200;
    font-weight:bold;
}
label.error {
    background:url("unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
}
label.checked {
    background:url("checked.gif") no-repeat 0px 0px;
}
</style>

Настраиваем валидацию

Весь представленный в нижележащем листинге код размещаем после формы. Можно и до, но лучше после=). Сейчас мы будем его разбирать. Правда не совсем по порядку как обычно.

<script type="text/javascript">
$(document).ready(function(){
  $.validator.addMethod('validName', function (value) {
     var result = true;
     var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?"+"абвгдеёжзийклмнопрстуфхцчшщъыьэюяАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ"+" ";
      for (var i = 0; i < value.length; i++) {
          if (iChars.indexOf(value.charAt(i)) != -1) {
              return false;
          }
      }
      return result;
  }, '');
  $.validator.addMethod('validDate', function (value) {
      var result = true;
      for (var i = 0; i < value.length; i++) {
        if(!/^([0-9]{4,4})+\.([0-9]{2,2})+\.[0-9]{2,2}$/.test(value)){
           return false;
        }
      }
      return result;
  }, '');
  $("#form_name").validate({
    focusInvalid: false,
    focusCleanup: true,
    rules: {
      name: {
           required: true,
           validName: true,
           minlength: 4,
           maxlength: 25,
           remote: {
              url: "check_name.php",
              type: "post"
           }
      },
      password: {
           required: true,
           rangelength: [4, 25],
           remote: {
                url: "check_pass.php",
                type: "post",
                data: {
                      name: function() {
                          return $("#name").val();
                      }
                }
           }
      },
      password_new: {
           minlength: 4,
           required: true
      },
      password_new_check: {
           required: true,
           equalTo: "#password_new"
      },
      email: {
           required: true,
           email: true
      },
      age: {
           required: true,
           range: [1,99]
      },
      date: {
           validDate:true    
      },
      urlname: {
           url: true
      },
      about: {
           minlength: 10,
           maxlength: 500
      }
    },
    messages: {
      name: {
        required: "Введите имя пользователя",
        validName: "Символы !@#$%^&*()+=-[]\\\';,./{}|\":<>? и пробелы запрещены. Также нельзя использовать русские буквы",
        minlength: "Минимум 4 символа ",
        maxlength: "Максимум 25 символов ",
        remote: "Такое имя уже существует "
      },
      password: {
        required: " Введите текущий пароль ",
        rangelength: "От 4 до 25 символов",
        remote: " Вы неправильно ввели пароль "
      },
      password_new: {
        minlength: "Минимум 4 символа ",
        required: "Введите пароль "
      },
      password_new_check: {
        required: "Повторно введите пароль ",
        equalTo: "Пароль неправильно введён повторно"
      },
      email: {
        required: "Введите адрес ящика",
        email: "Введите корректный адрес"
      },
      age: {
        required: "Укажите ваш возраст",
        range: "Укажите возраст в цифрах (до 99)"
      },
      date: {
        validDate: "Дата введена неверно (формат YYYY.MM.DD)"
      },
      urlname: {
        url: "Введите адрес, начиная с http://"
      },
      about: {
        minlength: "Напишите о себе немного",
        maxlength: "Не пишите так много!"
      }
    },
    errorPlacement: function(error, element) {
      var er = element.attr("name");
      error.appendTo( element.parent().find("label[@for='" + er + "']").find("span") );
    },
    success: function(label) {
      label.html("&nbsp;").addClass("checked");
    }
  });
});
</script>

Код можно подразделить на несколько частей.

  1. Строка 2. Как уже известно из предыдущих статей, это вызов функции jQuery.
  2. Строки 3-24. Добавление методов проверки формы. В данном случае тут их два – добавление метода validName и validDate. О них чуть позже.
  3. Строка 25. Вызов функции валидации применительно к форме, обозначенной соответствующим идентификатором.
  4. Строки 26-27. Некоторые опции, направленные на обработчики событий, в данном случае focus. Например, focusCleanup выполняет такую роль – если поле было заполнено неправильно и высветилась ошибка, то при выборе этого поля, для исправления ошибок, сообщение об ошибке может быть стёрто или оставлено. При true оно стирается. По умолчанию стоит false.
  5. Строки 28-78. Вот оно, самое главное. Здесь каждому полю формы прописываются те проверки, которые оно должно пройти. Например, в 29 строке обращение идёт к полю с именем name, а в 39 строке – к полю password и так далее.
  6. Строки 79-119. Заполняется всё практически аналогично предыдущему, за исключением того, что здесь указаны в текстовом виде ошибки, которые будут выводиться пользователю. Если этот блок не засовывать, то ошибки будут браться из “по умолчанию”. В данном случае они по умолчанию на английском языке. И есть ещё одно НО. Если вы создали свои методы проверки формы, то не указав здесь индивидуального сообщения к нему, оно будет игнорироваться.
  7. Строки 120-127. Первые пять строк привязывают куда выводить ошибку. То есть если вы не хотите, чтобы к каждому полю были ошибки, а где-нибудь в отдельном блоке, то вам сюда. Последние три строки при правильном заполнении поля привязывают класс “чекед”, который в нашем случае содержит синенький кружок с галочкой – типа у нас всё пучком, всё корректно.

Собственно всё, вот и весь секрет валидации формы без перезагрузки. Теперь рассмотрим возможные правила проверки формы.

Правила проверки формы

1. Поле должно быть обязательно заполнено

За это отвечает метод проверки required. Например, в нашем случае этот метод прописан полям name, password, password_new_check, email и age.

2. Минимальная и максимальная длина вводимого текста

Здесь три метода: minlength – минимальное число символов, maxlength – максимальное число символом, rangelength – число символов от и до. Последнее заменяет совместное использование первых двух. Например, в нашем примере полю name указано минимальное и максимальное число символов первыми двумя методами, а полю password – третьим методом. А разницы в действии никакой. Если не видно разницы, зачем платить больше.

3. Диапазон чисел

Аналогично предыдущему три метода: min, max, range. Смысл схож, но всё применительно к числам. В нашем случае, например, полю возраста задан промежуток годков от 7 до 99.

4. Проверка идентичности соседнему полю

Перейдём сразу к примеру. У нас есть поле пароля и поле подтверждения ввода пароля. Надо чтобы они были одинаковы? Конечно надо! Как проверить? Присвоением второму полю метода equalTo, где указывается идентификатор поля, которому надо соответствовать.

5. Корректный e-mail и URL

Очень удобно, что есть уже встроенный метод проверки правильного ввода адреса электронной почты. Метод email. За правильность ввода адреса сайта отвечает метод url.

6. Корректная дата

Прямой функции для этого не существует, её нужно создать самому. Смотрим в листинг на строки 15-24, где создаётся метод validDate. Самое главное находится в строке 18, где создано регулярное выражение для даты. В нашем случае дата должна иметь формат YYYY.MM.DD.

7. Запрет использование некоторых символов

Аналогично предыдущему создаётся метод validName, который запрещает, в нашем случае, использование в имени пользователя различных служебных символов и русских букв. Обратите внимание, что маленькие и большие буквы пишутся, то есть можно также влиять и на регистр. Для написание чего-то своего, если конечно оно понадобится, нужно ознакомиться с регулярными выражениями – ссылка на англоязычный сайт, где о них подробно всё написано.

8. “Проверка существования пользователя в БД”
или
“метод REMOTE”

Рассмотрим два примера использования.

  1. Нужно проверить есть ли пользователь в базе данных. В нашем случае метод remote задан полю name. Записывается такой пример либо как показано выше:
    remote: {
                  url: "check_name.php",
                  type: "post"
    }
    либо в более простой форме
    remote: "check_name.php"
    В первом случае мы дополнительно указали метод передачи данных.
    Здесь надо понять одно, что файл, на который мы ссылаемся, должен вернуть ответ либо true, если всё окей, либо false, если всё не окей. Особо не усложняя пример, я создал простую проверку, где идёт запрет только на ввод имени admin
    <?
    $request_name = trim($_REQUEST['name']);
    if ($request_name=='admin') echo 'false';
    else echo 'true';
    ?>

    По образу и подобию можно создать что-то своё, главное чтобы был возвращён ответ.
  2. Нужно сопоставить по базе данных соответствует ли введённый пароль введённом имени пользователя. Используется у поля password. Тут уже необходимо передать с ним вдобавок ещё и имя пользователя. Для этого усложняется пример выше и добавляется опция data.
    data: {
       name: function() {
          return $("#name").val();
       }
    }
    Вместо обоих name нужно указывать идентификатор своего поля, которое отправляется вместе с текущим.

Пожалуй это всё, что нужно знать о методе remote.

 

Самая частая ошибка!

Самая частая ошибка, которая возникает при построении правил валидации, и из-за которой ничего не работает – это неправильная постановка запятых. Тут надо твёрдо запомнить следующее – после последнего правила для того или иного поля формы и после последнего набора правил той или иной формы ЗАПЯТОЙ БЫТЬ НЕ ДОЛЖНО. Наверное 90% ошибок возникает именно здесь.

 

В завершении

Вот и всё основное, что нужно для валидации форм на jQuery. В принципе материала статьи достаточно, чтобы проверить любую форму.

Если вам понравилась статья, буду крайне признателен за отзывы. Также буду признателен за здравую критику и пожелания на будущие записи. А пока до новых встреч=).

 

Ссылки по теме

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 4, средний: 4.75 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 74 на запись

"Формы, часть 3, ВСЁ, что нужно для валидации форм на jQuery"

  1. А по какой причине Вы пользуете jQuery 1.2.6? Статья написана буквально несколько дней назад, а jQuery 1.3+ появилась еще в январе 2009-го…

  2. Александр Шуйский
    03/11/2009 at 10:40 Постоянная ссылка Цитировать

    Я бы сказал, что дело привычки и отсутствия острой необходимости. Но на самом деле давно уже пора обновить, всё руки повозиться не доходят. Хочется не просто заменить, а ещё посмотреть новые возможности и улучшения.
    Спасибо за комментарий, думаю он мне послужит её одним толчком к обновлению библиотеки.

  3. Хорошая статья , мне очень помогло!!! Спасибо

  4. Всегда пожалуйста, рад, что помогло=)

  5. Доброго времени суток!
    Очень хорошая статья, доступно все написано. Но я новичок в этом деле, так что у меня возникло несколько вопросов. у вас в примере форма не куда не передается, это так и должно быть ? или в action можно указать исполняемый файл , и когда он отработает? если пользователь не корректно заполнит поля action сработает или нет???? еще вопрос если я использую капчу как мне обновить фото без перезагрузки стр. если поле не корректно заполнено…..
    заранее спасибо, извините если отнимаю зря время.

  6. Александр Шуйский
    06/02/2010 at 10:49 Постоянная ссылка Цитировать

    приветствую!
    1) в примере у меня только показан пример валидации, сама форма никуда не передаётся.
    2) в экшане можно указать и исполнямый файл и отработает он когда будет отправлена форма, а отправлена она может быть только тогда, когда все проверки проведены. так чтонекорректное просто не может быть отправлено
    3) обновление фото – немного не по теме, но подсказать могу. Вот такой код используется в DLE. Оставляю на подумать =)

    function reload () {
    var rndval = new Date().getTime();
    document.getElementById(‘dle-captcha’).innerHTML = ‘< img src="/engine/modules/antibot.php?rndval=' + rndval + '" border="0" width="120" height="50" alt="" />< br />< a onclick="reload(); return false;" href="#" rel="nofollow">обновить код‘;
    };

  7. Спасибо Александр, немного разобрался.

  8. Пожалуйста =)

  9. Евгений
    09/02/2010 at 19:21 Постоянная ссылка Цитировать

    Здравствуйте, возможно настроить плагин, чтобы формировать правила НЕ в соответствии с тегом “name”, а использовать для этого “id”?!

  10. Добрый вечер!
    Насколько я помню, он id и использует, разве нет? Или я не так вопрос понял?

  11. Евгений
    10/02/2010 at 0:24 Постоянная ссылка Цитировать

    К сожалению, судя по моим экспериментам, то он работает именно с name, все бы хорошо, но если у меня название , то с таким именем плагин работать не хочет…как его завязать на id?

  12. Евгений
    10/02/2010 at 1:07 Постоянная ссылка Цитировать

    К сожалению, судя по моим экспериментам, то он работает именно с name, все бы хорошо, но если у меня название является массивом name=”Array[BeBe]“, то с таким именем плагин работать не хочет…как его завязать на id?

  13. по правде говоря я с таким не сталкивался. возможно, если вы в деталях опишете свою проблему, что для чего в форме надо и как, то быть может можно будет придумать какой-нибудь альтернативный вариант её решения.

  14. Евгений
    10/02/2010 at 12:34 Постоянная ссылка Цитировать

    Опишу на примере, есть такая форма:


    URL:

    Textarea: (*)

    Обрабатывать по id плагин не хочет:
    <code] rules: {
    Name: {
    required: true,
    minlength: 3,
    maxlength: 12,

    },
    Text: {
    required: true,
    maxlength: 24
    }
    },
    messages: {
    Name: {
    required: "Укажите свое имя, пожалуйста!",
    minlength: "Не менее 3 символов",
    maxlength: "Не более 12 символов",
    remote: "PPC"
    },
    Text: {
    required: "Напишите сообщение, пожалуйста!",
    maxlength: "Не более 24 символов"
    }
    }

    Если вставлять атрибут name, а это у нас массив вида Site[name]:
    rules: {
    Site[name]: {
    required: true,
    minlength: 3,
    maxlength: 12,

    },
    Site[comment]: {
    required: true,
    maxlength: 24
    }
    },
    messages: {
    Site[name]: {
    required: "Укажите свое имя, пожалуйста!",
    minlength: "Не менее 3 символов",
    maxlength: "Не более 12 символов",
    remote: "PPC"
    },
    Site[comment]: {
    required: "Напишите сообщение, пожалуйста!",
    maxlength: "Не более 24 символов"
    }
    }

    То такая штука тоже не работает! Остается только завязать обработку на id, т.к. атрибуты name в виде массива плагин получается на обрабатывает.

  15. что-то я не очень понял, вы очень сумбурно высказываете свои мысли. я хочу узнать для чего это нужно, в плане зачем держать неймы в виде массива, или как.

  16. Спасибо за материал. Начал изучать данную тему и постоянно наталкиваюсь и задерживаюсь на Вашем сайте. Удачного web-строительства :)

  17. Всегда пожалуйста и спасибо за пожелания =)

  18. Бился, весь вечер, скрипт не работал. Оказывается jquery у меня был самый свежий 1.4.2. Залил вместо него 1.2.6, заработало. Странно… Почему новая версия может не работать?

  19. Одна ошибка скрипта – и всё не работает. На новой версии не работает из-за конструкции, выводящей ошибку.
    Я уже написал статью, в которой заточил всё под последний jQuery, также написал о всяких дополнениях к плагину. Представляю к ознакомлению!
    http://shublog.ru/ajax/jquery/formy-chast-6-proverka-dannykh-formy-na-jquery-validate/

  20. Спасибо, работает! :)

  21. Да незачто =)

  22. Вот к примеру фрагмент кода:

    Текущий пароль:

    Подскажите, пож-та, как сделать последний фрагмент кода так, чтобы ошибка привязывалась не к label, а к td, в котором span?

    И может еще кто подскажет, как написать $.validator.addMethod(‘validDate’, function (value), только не для даты, а для проверки телефона, чтобы формат ввода был (XXX)_XXX-XX-XX, где _ – пробел.
    Извиняюсь, если вопросы глупые, учусь!

  23. ну, вообще-то от лейбла лучше не избавляться в любом случае, так как он имеет атрибут for, по которому и происходит поиск куда выводить ошибку. если от него отказываться, то тогда надо находить таблицу (в которой все поля) и тупо отсчитывать как-то по очереди все td. Проще сохранить label, который засунут будет в td.

    попробуй поисправлять предложенный выше validDate по аналогии. вообще там регулярные выражения использованы. если англицким владеешь, то почитай http://www.regular-expressions.info/, там основные страницы, чтобы в общих чертах понять.

  24. Александр, спасибо за ссылку!
    У меня есть label, просто все в одну строку идет, например, “Возраст: в этой же строке текстовое поле”, я хотел сделать, чтобы сообщения об ошибке выводились после текстового поля, в этой же строке. Вообщем, пока не получается, буду пробовать!)

  25. тогда попробуй конструкцию типа

    <label for=”email”>E-mail: <input name=”email” id=”email” type=”text”size=”30″>
    <span></span></label>

    может подойдёт =)

  26. Thanks) я так понимаю, в основном скрипте ничего менять не надо в функции errorPlacement: function(error, element)?

  27. в таком случае нет. но надо проверить как он работает ещё)

  28. Попробовал, не получилось, не выдает сообщение вообще:(

  29. тогда попробуй конструкцию

    E-mail: <input name=”email” id=”email” type=”text”size=”30″>
    <label for=”email”><span></span></label>

  30. Вот так работает! Большое спасибо за подсказку :)

  31. всегда пожалуйста=)

  32. Здравствуйте, Александр! Возникла такая проблема,. Имееться 3 поля . Хочу сделать так, чтоб ошибка выводлась не на каждое отдельное поле, а сразу на все 3 ( одна общая). Возможно и осуществить таую проверку при помощиэтого плагина:? заранее спасибо!

  33. конечно можно! в листинге настроек нужно внести изменения в 122-123 строки, где рописывается куда выводить ошибку. там необходиму оказать, к примеру идентификатор какого-нибудь тега, который находится в любом месте страницы и в который и будут выводиться сообщения об ошибках. Но так как ошибок может быть несколько, то и сами сообщенрия об ошибках надо будет слегка изменить (строки 81-86 и др) – в конце кажой ошибки, например, тег переноса строки бр поставить

  34. Спасибо боьшое это исправил, появилась новая проблема =( . Описание:
    У меня имеется как я говорил ранее 3 поля где пользователь будет выбирать свою дату рождения. По умолчанию value=’0′ , хочу сделать так чтоб допустим, если поьзователь выбрал 1 или 2 поля, со значением больше 0 , то валидации не проходила, т.к в базу поступают не поные значения даты. тоесть ваидация проходит если все значения >0
    или если все значения = 0 иначе выдаёт ошибку. На php это реализовывал, а в яве я не шарю совсем=(. За ранее извиняюсь , спасибо, за помощь!

  35. можно попробоать через remote – туда подключить пхп скрипт, который и будет проверять что там с полями. думаю это самый простой способ.

  36. Спасибо за статью, хороший материал ) Тоже возникла небольшая проблема :( может быть подскажете как её решить…

    есть несколько чекбоксов, нужно проверить, чтобы хотя бы один из них был выбран…

    Значение1
    Значение2

    как в таком случае написать правила для проверки?

    rules: {prodtype: “required”} – не работает :(

    и так тоже не работает: rules: {prodtype[]: “required”}

  37. упс… код вырезается совсем… такие 2 чекбокса были..

  38. хмм… написал в тегах – code – всё равно вырезалось всё ((((((((((((((((
    в общем обычные 2 чекбокса, у обоих name=”prodtype[]”

    P.S. сорри за флуд :( нефига не понял как код вставлять…

  39. Александр Шуйский,
    Кста хорошая идея!=) спс я ненодумался_) правда мне не нравиться, то что надо создавать отдельные php файлы для этой библиотеки ибо
    очень не приятно видеть, как echo ‘false’ или echo “true” выпоняються на главной стрaнице, может есть другой способ от этого избавиться, а так большое спасибо, идея простая и хорошая =)

    p.s Jerry, у тебя такая ж проблема как и у меня, читай коменты выше как её решить. пишешь php скрипт для провеки, чекбоксов, подключаешь через remote.

  40. 2Jerry. код вставляется только через спецсимволы. всё руки не доходят изменить, чтобы он сам перекодировывал.
    Что касается проблемы, то скорее всего правила надо отдельно для каждого чекбокса писать.
    а конструкция rules: {prodtype: “required”} – она совсем не работает? так или не так как нужно это не важно, просто интересно работает ли. если да, то можно попробовать потестировать всякие игры с remote.
    вообще никогда не сталкивался с валидацией форм, когда прописывались скобки. надо бы на этот счёт документацию к плагину поштудировать. но что-то мне подсказывает, что выхода нет.

  41. 2onzone
    //очень не приятно видеть, как echo ‘false’ или echo “true” выпоняються на главной стрaнице
    ммм, как это? вроде бы это же в отдельном файле проверка идёт и никому через эхо ничего не выводится? или я чего-то не понял? =)

  42. //очень не приятно видеть, как echo ‘false’ или echo “true” выпоняються на главной стрaнице

    Не я имелл ввиду, что, если тот файл, который в remote прописан открыть напрямую, то будет виден вывод true или false, я просто в remote прописывал свой index.php и соответствено в него цикл прописывал, а не в отдеьный файл, не хотел просто создавать отдельный php файл для remote

  43. ммм, а вроде бы если в файле не выводить ни трю, ни фолс, то тогда оно воспринимается как фолс. но не уверен, надо проверить
    думаю врядли кто просто так наткнётся на трю и фолс, думаю мелочи жизни

  44. проблема с чекбоксами так и не решилась – долго искал в инете, ничего не нашел, видимо как то совсем по-другому делают такие проверки… (((

    Ещё возник такой вопрос – можно ли как то проверить правильность заполнения сразу всех полей формы… т.е. мне нужно выключить кнопку submit – и она должна быть выключена до тех пор пока все поля не будут заполнены верно…

    выключил кнопку просто прописав в теге – disabled
    включаю так – $(‘input:submit’).attr(“disabled”, false);

    вот только вопрос когда включать, а вернее как проверить что всё поля уже заполнены правильно?

  45. Александр Шуйский, если не выводть то вообще не будет работать =) всё верно будет воспринимать как false, знал бы я ява скрипт, то сделал б немного по другому =) Но впринципе, с етим тож можно жить)
    Jerry
    А зачем отключать сабмит? или я недопонял вас? Валидация и работает вроде таким образом,скрипт не выполняеться до тех пор пока не будут заполнены все поля =) по крайней мере если вы хтите чтоб проверял все поля существует параметр required: , если true то ето обязательное поле
    для заполнения

  46. 2onzone. значит спутал с чем-то=)). а так да, жить можно8)

    2Jerry. onzone Вам ответил, я подписываюсь. или есть какой-то особый смысл отключения сабмита?

  47. 2Александр Шуйский!
    Будем ждать,ответа Jerry желательно конечно пример =)

  48. 2onzone, крайне желательно =))

  49. Скрипт проверяет каждое поле по мере заполнения, а не всё сразу по клику кнопки сабмит. Но иногда бывает, что страница грузится медленно, и пользователь может вполне кликнуть, на субмит, пока проверка не начала работать… Данные дальше повторно проверяются PHP (на всякий случай), но хотелось бы вообще избежать лишних неправильных отправок формы… Как по-другому быстро обойти эту проблему – не придумал. Вот такой скрипт проверки получился:

    $(document).ready(function(){
    $(“#frm”).validate({
    focusInvalid: false,
    focusCleanup: true,
    rules: {items: {required: “#itemsblock input:checked”, minlength: 1}},
    messages: {items: “Выберите хотябы один пункт”}
    });
    });

    Можно конечно вообще встроить доп. проверку, и не выводить таблицу до полной загрузки, но как то вариант с выключенной кнопкой проще показался…

  50. Александр, у меня возникла ещё 1 проблемка, пример:

    Сообщение об ошибке должно выводиться над textarea, но почему-то не хочет jquery, выводить, читал на офф сайте про вывод ошибок, но чтот тго понятно=(. Подскажите пожалуйсто, как вывести сообщеие об ошибке в моём случае, заранее благодарен!

  51. Извиняюсь за флуд =( html в комент не вывел пример:
    {table width=”490″}
    {tr}
    {td}{label for=”"}{span}{/span}{span}{/label}{/td}
    {/tr}
    {tr}
    {td}
    {textarea name=”textarea”}{/textarea}
    {/label}{/td}
    {/tr}
    {/table}
    замел на {}

  52. {table width=”490″}
    {tr}
    {td}{label for=”textarea”}{span}{/span}{/label}{/td}
    {/tr}
    {tr}
    {td}
    {textarea name=”textarea” id=”textarea”}{/textarea}
    {/label}{/td}
    {/tr}
    {/table}

  53. 2Jerry я бы не стал заморачиваться на этот счёт, так как вполне вероятно у кого-то будет отключён жабаскрипт вообще и по сути та же фигня будет. А для этого проверка на пхп сделана

  54. Не исправился всё равно не хочет, какя думаю плагин просто не видит
    к чему прнадлежит лейбл. т.к разъединяет его с текст арией теги td и tr.
    Как не пытался ошику выбодит в таком положении
    {label for=”textarea”}{span}{/span}{/label}
    {textarea name=”textarea” id=”textarea”}{/textarea}
    а если допустим так сделать
    {tr}
    {td}
    {label for=”textarea”}{span}{/span}{/label}
    {/td}
    {td}
    {textarea name=”textarea” id=”textarea”}{/textarea}
    {/td}
    {/tr}
    то не выводит =( Говорят есть другие методы вывода ошибки типа errorContainer или errorLabelContainer, подскажите если может встречались с такой проблемой=(

  55. странно, потому что поиск элемента всё равно по названию идёт и неважно где оно находится. просто помню, что сам разделал таблицами и всё окей было…
    попробуй использовать имя не textarea, а например textarea1 – может путаница идёт в названии

  56. ага, оке попробую завтра отпишусь=) спс за подсказку. Уже все мозги продолбал себе =) ещё блин UML диаграммы делать запрягли=(

  57. удачи тебе с этим! а то блин та ещё шняга =)

  58. Спасибо за статью!
    Только не понятно как сделать валидацию прямо в момент заполнения формы, при переходе из поля в поле, ну или при установке галочки “все поля заполнены правильно”?

  59. Пожалуйста!
    Если честно, то не могу дать ответ на вопрос. Но могу сказать, что когда один раз нажмёшь “отправить форму” и она отметит инвалидные поля, то после этого всё идёт по схеме,как описано вами. думаю надо лезть в документацию к плагину

  60. Здравствуйте!
    У меня такая же проблема как у http://shublog.ru/ajax/jquery/formy-chast-3-vsjo-chto-nuzhno-dlya-validacii-form-na-jquery/#comment-202

    То есть имена полей не простые, а массивом (не name=”name1″, a name=”name1[1]“)

    Такой код не работает
    $().ready(function(){
    $(“#myForm1″).validate({
    rules : {
    sity : {required : true},
    property_id[8] : {required : true}
    }
    });
    });

    Можно, как то проверять элементы не по их именах, а по их ИД?
    Зы. Переименовать поля в простые не получится, так как их там много и они додаются динамически
    Очень нужно!!!
    Спасибо!

  61. Нашёл решение:

    Нужно просто прописать необходимый класс для инпута
    Например

    $().ready(function(){
    $(“#myForm1″).validate();
    });

    Но может кто знает решение через ИД – напишите плиз.!!!
    Новая проблема: нужно проверять включен хотя бы один и ЧЕКБОКСОВ(не радиокнопок) из группы. Групп чекбоксов может быть несколько.

  62. Обрезало комент

    Нашёл решение:

    Нужно просто прописать необходимый класс для инпута
    Например
    ТЕГ input name=”email[1]” value=”" type=”text” class=”required email” КОНЕЦ ТЕГА
    $().ready(function(){
    $(”#myForm1″).validate();
    });

    Но может кто знает решение через ИД – напишите плиз.!!!
    Новая проблема: нужно проверять включен хотя бы один и ЧЕКБОКСОВ(не радиокнопок) из группы. Групп чекбоксов может быть несколько.

  63. хммм, на тему классов такой примочки не знал… надо будет попробовать.

    на тему чекбоксов, я бы пробовал через remote сделать и проверять что отмечено, а что нет.

  64. Александр, спасибо за статью!
    У меня такой вопрос возник: а можно ли сделать для некоторых полей (например ввода пароля и его подтверждения) запрет на Ctrl+C и Ctrl+V ?

  65. Пожалуйста!
    Да, точно можно. Можно тут глянуть пример – http://javascript.ru/forum/events/8391-perekhvat-sochetaniya-nazhatiya-klavish-ctrl-tab.html

  66. Olexander
    для решения проблем с именами “массивами” предлагаю решение
    их нужно оформлять таким образом
    допустим name=name[indentification]
    тогда
    rules:{
    “name[indentification]“=”reqiured”,
    //или
    “name[indentification]“={
    //свойства валидации
    }
    //причём двойные кавычки обязательны!
    }

  67. name: {
    required: true,
    validName: true,
    minlength: 4,
    maxlength: 25,
    remote: {
    url: “checkname.php”,
    type: “post”
    }
    },

    после проверки в checkname в случае нахождения имени выводится “Такое имя уже существует “, в противном случае выводится 1. Как сделать чтобы в 1 вообще не выводилось.

  68. не очень понимаю, что за прикол с единицей. чекнеймпхп возвращаетя 1-0 или трю фолс?

  69. Андрей
    28/10/2011 at 20:48 Постоянная ссылка Цитировать

    Добрый день.
    Помогите разобраться как проверить select на изменение? Правило {required : true} не помогает

  70. Дмитрий
    03/12/2012 at 9:37 Постоянная ссылка Цитировать

    Пасиб за статью. Очень полезна мне, как новичку. Подробно и главное понятно =)

  71. Александр Шуйский
    14/12/2012 at 12:16 Постоянная ссылка Цитировать

    2Андрей – что значит “проверить на изменение”? Чтобы вместо “ничего” проверить, что выбрали какой-то пункт? Там в html нужно правильно список создать.

    2Дмитрий – всегда пожалуйста =)

  72. Тоже нaсчет select.
    Есть капча: прямоугольник, закрашенный случайным цветом. Цвет передается через скрытое поле.

    Проверка :
    colors: {
    required: true,
    remote: {
    url: “check_color.php”,
    type: “post”
    },
    }

    check_color.php:

    Проблема в том, что в check_color.php ничего не приходит, кроме $_REQUEST['colors'].
    Вопрос!
    Как отправить в файл проверки дополнительные данные, в данном случае цвет капчи( который записан в срытом поле) для сравнения с выбранным в select?

  73. Помогите разобраться как проверить select на изменение? Правило {required : true} не помогает

    В моем случае нужно было сравнить значение select, выбранное пользователем со значением в скрытом поле

    print "<INPUT TYPE=HIDDEN NAME='hcolor' id='hcolor' VALUE="."$colors[$i]".">";

    <label for="colors">Выберите цвет: (*)<span></span></label><br>
    <select id="colors" name="colors" >
    <option value=""></option>
    <option>orange</option>
    <option>yellow</option>
    <option>blue</option>
    <option>red</option>
    <option>navy</option>
    <option>skyblue</option>
    <option>darkgreen</option>
    <option>green</option>
    </select>

    Для этого используем метод data

    colors: {
    required: true,
    remote: {
    url: "check_color.php",
    type: "post",
    data: {
    hcolor: function() {
    return $("#hcolor").val();
    }
    }
    }

    check_color.php:

    <?php
    if (($_REQUEST['hcolor'])==($_REQUEST['colors']))
    {
    echo "true";
    }
    else { echo "false";}
    ?>

  74. Здравствуйте! Помогите, пожалуйста, разрешить насущную проблему. Второй день бьюсь над правильным подбором параметров и всё мимо. Итак суть. Очень хотелось бы, чтобы проверка формы осуществлялась не после каждого нажатия пользователем клавиши, а после потери полем своего фокуса. С точки зрения юзабилити – это правильный подход. Не стоит напрягать пользователя сообщениями об ошибке, пока он не закончил вводить информацию. Для этой цели предусмотрен параметр onkeyup, который при установки значения в false проверяет поле именно после потери фокуса, не раньше. Но почему то при его установки перестаёт работать самое простое правило required. И пустое поле воспринимается, как валидное. При этом со всеми остальными правилами полный порядок. Может кто-то подскажет, как исправить данную ситуацию. Ведь не может это быть багом плагина.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии