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