Недавно пришлось столкнуться с задачей, когда была нужна валидация различных форм на сайте, без перезагрузки самой страницы. Перелопатив немалое количество разных скриптов я нашел довольно интересный, стабильный, легконастраиваемый скрипт, который имеет богатый функционал и при этом легко подключается.
Сразу даю ссылку на и на описание плагина
Итак, как вы видите преимущество (причем солидное) у этого плагина над другими в том, что все ошибки будут сделаны во всплывающих окнах, а значит нам не нужно будет рушить верстку уже готовых форм.
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 – Ну и легко можно изменять текст сообщений. по умолчанию есть английский и немецкий. Также можете скачать русский файл, который я делал. если нужно будет что-то поменять, то это легко делается простым редактированием файла.
Пользуйтесь на здоровье.
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Прикольная инфа но не понятно до конца для чего он служит
как это для чего? Для проверки полей форм, к примеру, чтобы в поле e-mail вводили именно емеил, а не что-то другое и т.д.
Всё теперь до конча врубился=)
В яве не оч силен, подскаже кто как проверить существует ли юзер уже, при вводе логина в форму… что и куда надо отправлять?
это задача не совсем явой нужно делать, это зависит от того куда записывается база данных юзеров. тут нет универсальных приемов, зависит от каждого случая отдельно
После подтверждения отправки данных и валидации, данные пересылаются по адресу, указанному в параметре action формы, а как получить их в javascript сценарий?
Решение нашел:
<form action="javascript: ;»>
Привет! Кириллицу валидатор за буквы не считает 🙂
В общем, нашёл.
Да и ты добавь в свой переведённый файл допущение кириллицы 🙂
За перевод спасибо.
А отключать ,включать можно валидацию динамический?
Столкнулся с таким «багом» в данном скрипте:
Если проверка поля осуществляется динамически т.е. через ajax[user.php] то просто кликнув на возникшое окошко ошибки его можно скрыть, а после нажать на submit и вуаля залрос пошел.
Можт кто знает как это лечить?
Еще вопрос как убрать анимацию после удачного исхода отправки формы(ну то что форма исчезает и появляется записанное в ajaxSubmitMessage)?
я не сильно силен в яваскриптах, вам лучше обратиться к разработчику —
Возможна ли публикация статтей, взятые за основу Ваши, с ссылкой на Ваш сайт?
можно
Подскажите, пожалуйста, регулярное выражение, которое будет валидировать текст на отсутствие html тэгов.. Нужна простая проверка на то, что будут отсутствовать в тексте сущности, вроде или что-то вроде того. Заранее благодарен за ответ…
Скажите пожалуйста, как проверить совпадают ли пароли?
там же в примере есть код как это делать
скажите пожалуйста как мне поменять название в форме
name=»…» и id=»…»
вышлите код на почту, а то комментарии его режут, почту найдете в контактах
Жаль что демка не рабочая… ;(
поправил
Спасибо, очень хороший и легкий скрипт
картинка в статье и в Демо не соответствуют друг другу… где бы увидеть примерчик с radio-кнопками?
Спасибо за перевод!
Но всё-таки необходимо в правило на проверку букв добавить русские и украинские буквы.
«onlyLetter»:{
«regex»:»/^[a-zA-Zа-яіїєґёА-ЯІЇЄҐЁ\ \’]+$/»,
«alertText»:»* Только буквы»},
Почему-то не хочет проверять совпадают ли пароли. Всегда выдает ошибку «Поля не совпадают».
В чем может быть проблема?
Скажите пожалуйста, можно ли сделать скрывающимися автоматически всплывающие окна с ошибками?
или как-то привязать к fancybox чтобы сворачивались они вместе со всплывающим окном?
думаю можно, но я jquery только учу понемногу, так что не подскажу как
Не могу найти, есть возможность проверять поля на валидность только по сабмиту формы? не встречали?
что значит по сабмиту? при клике на отправить или что?
Да, имелось ввиду именно это. чтоб можно было кликнуть по input и выйти из него, не совершая действий, и чтоб окошко не всплывало о некорректно заполненном поле.
что-то я не понял, а смысл тогда валидации, если она не будет срабатывать при сабмите формы?
А какая там лицензия? В коммерческих проектах использовать можно?
скорее всего, что нет. да сейчас, в принципе, есть уже огромная куча подобного с фришной лицензией
Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег «form», что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу