Отборная информация, которая вставляет!

Jquery валидация форм

image

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

Сразу даю ссылку на демо и на описание плагина

image

Итак, как вы видите преимущество (причем солидное) у этого плагина над другими в том, что все ошибки будут сделаны во всплывающих окнах, а значит нам не нужно будет рушить верстку уже готовых форм.

2 – легко подключается. Все что нужно – это добавить подключение скрипта.

Вот так

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> 

<script src="js/jquery.js" type="text/javascript"></script> 

<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script> 

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>


Далее вверху странички добавляем скрипт

<script type="text/javascript">
    $(document).ready(function() {
            // SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() }, 
            $("#your-profile").validationEngine()
            //$.validationEngine.loadValidation("#date")
            //alert($("#formID").validationEngine({returnIsValid:true}))
            //$.validationEngine.buildPrompt("#date","This is an example","error")              // Exterior prompt build example                                 // input prompt close example
            //$.validationEngine.closePrompt(".formError",true)                             // CLOSE ALL OPEN PROMPTS
        });

</script>

В котором указываем id формы которую нужно проверить

А к нужным полям нужно добавить класс, к примеру, к полю email нужно добавить class="validate[required,custom[email]". Список всех возможных валидаторов прилагается. (см описание плагина и примеры в архиве плагина) Тут есть и проверка меила, телефона, проверка на заполненность поля, на кол-во символов, на соответствие, на дату, на форматы текста. В общем много всего.   Не забывайте, что у полей также должен быть id (можно абсолютно любой)

При желании можно создавать свои функции

3 – легко настраивается внешний вид. Все тени, фоны, стрелочки сделаны при помощи css и вынесены в отдельный файл – можно делать любой цвет, фон и т.д. Это очень удобно.

4 – Ну и легко можно изменять текст сообщений. по умолчанию есть английский и немецкий. Также можете скачать русский файл, который я делал. если нужно будет что-то поменять, то это легко делается простым редактированием файла.

Пользуйтесь на здоровье.


 

Похожие статьи:



35 комментариев к “Jquery валидация форм”

  1. Msim:

    Прикольная инфа но не понятно до конца для чего он служит

  2. DEATH:

    В яве не оч силен, подскаже кто как проверить существует ли юзер уже, при вводе логина в форму… что и куда надо отправлять?

    • ETNO:

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

  3. Влад:

    После подтверждения отправки данных и валидации, данные пересылаются по адресу, указанному в параметре action формы, а как получить их в javascript сценарий?

  4. Привет! Кириллицу валидатор за буквы не считает 🙂

  5. Едиль:

    А отключать ,включать можно валидацию динамический?

  6. Игорь:

    Столкнулся с таким «багом» в данном скрипте:
    Если проверка поля осуществляется динамически т.е. через ajax[user.php] то просто кликнув на возникшое окошко ошибки его можно скрыть, а после нажать на submit и вуаля залрос пошел.
    Можт кто знает как это лечить?

    Еще вопрос как убрать анимацию после удачного исхода отправки формы(ну то что форма исчезает и появляется записанное в ajaxSubmitMessage)?

  7. Здраствуйте, ETNO!

    Возможна ли публикация статтей, взятые за основу Ваши, с ссылкой на Ваш сайт?

  8. Александр:

    Подскажите, пожалуйста, регулярное выражение, которое будет валидировать текст на отсутствие html тэгов.. Нужна простая проверка на то, что будут отсутствовать в тексте сущности, вроде или что-то вроде того. Заранее благодарен за ответ…

  9. Ростислав:

    Скажите пожалуйста, как проверить совпадают ли пароли?

  10. скажите пожалуйста как мне поменять название в форме
    name=»…» и id=»…»

  11. Жаль что демка не рабочая… ;(

  12. Ref:

    Спасибо, очень хороший и легкий скрипт

  13. vova:

    картинка в статье и в Демо не соответствуют друг другу… где бы увидеть примерчик с radio-кнопками?

  14. Спасибо за перевод!

    Но всё-таки необходимо в правило на проверку букв добавить русские и украинские буквы.

    «onlyLetter»:{
    «regex»:»/^[a-zA-Zа-яіїєґёА-ЯІЇЄҐЁ\ \’]+$/»,
    «alertText»:»* Только буквы»},

  15. Паша:

    Почему-то не хочет проверять совпадают ли пароли. Всегда выдает ошибку «Поля не совпадают».

    В чем может быть проблема?

  16. Джази:

    Скажите пожалуйста, можно ли сделать скрывающимися автоматически всплывающие окна с ошибками?
    или как-то привязать к fancybox чтобы сворачивались они вместе со всплывающим окном?

  17. Джази:

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

  18. Castro:

    А какая там лицензия? В коммерческих проектах использовать можно?

  19. Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег «form», что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу http://fleek.org/fleekaj/WBVNEgxMS1ECWUlfEwdcRlhHAUFPR0BKQlYID11QQRVZGFhPRgwIXQwVFEsOC0NHVlkKSwpdGANbRQlLUBxeCV4VXAhYBhZXEBUKWEwISERcRx0cCUFYCQ==/

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›