Валидация формы JQuery
У меня есть файл .html и .css. Работаю в Brackets. При нажатии на кнопку на сайте, открывается типичная форма: имя, номер телефона, e-mail, и поле для текста. Все работает. Но нужно сделать проверку на корректность введенных данных с помощью библиотеки JQuery. Желательно отдельным js файлом (но сойдет и в html js функции).
P.S. С JS работаю только один день |
|
Какой плагин?
|
Все варианты кода, которые я находила в инете, у меня не работают
|
Цитата:
Можно этот взять, можно иной. Иначе чего вы хотите услышать в ответ? |
Задача в том, чтобы сделать все без плагина.
Есть некая кнопка, при нажатии которой появляется модальное окно с формой.
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Закрыть" class="close">X Close </a>
<form method="post" action="#">
<input type="name" id="name" placeholder="Ваше имя!" required /><span id="validName"></span>
<h1> <input name="submit" class="btn" type="submit" value= "Ok!" /></h1> </form>
</div>
</div>
Теперь мне нужно написать функцию для проверки валидности поля "Name" : поле должно состоять только из русских букв. |
<input type="name" id="name" placeholder="Ваше имя (только русские)" pattern="[а-яёА-ЯЁ]{2,}" required />
H1 для Ок, это круто. :) |
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#name').blur(function () {
if ($(this).val() != '') {
var pattern = [а-я]/i;
if (pattern.test($(this).val())) {
$(this).css({
'border': '1px solid #569b44'
});
$('#valid').text('Верно');
}
else {
$(this).css({
'border': '1px solid #ff0000'
});
$('#valid').text('Не верно');
}
}
else {
$(this).css({
'border': '1px solid #ff0000'
});
$('#valid').text('Поле не должно быть пустым');
}
});
});
</script>
Пыталась так, но ничего не получается |
Цитата:
|
laimas,
Ой, а мы ж получается не используем JQuery? |
Цитата:
Вот только изначально ваш вопрос звучит как нечто "хочу то, не знаю что". А H1 должен быть на странице в количестве одна штука и не больше и никак не Ок в форме. ;) |
Rise,
Правила валидации: Поле Name {только русские буквы} Поле Number {только цифры, регулярное выражение типа (___) ___ __ __} E-mail {регулярное выражение типа smth@smth.smth} Обязательно использовать JQuery |
Цитата:
1) - пост выше о HTML5 2) - нужна поддержка старых браузеров? Тогда и нужен будет JS. Обязательно JQuery? Не проблема, и если не хотите плагинов, то можно использовать для проверки правила прописанные в pattern при отправке формы используя JQ. |
Цитата:
|
Цитата:
Если так можно, я бы с радостью воспользовалась всема плагинамы, чтобы оптимизировать код, но так была поставлена задача преподавателем. |
laimas,
Почему не только цифры? Это номер телефона, просто поле должно быть с маскировкой и проверкой. |
Цитата:
А маска, это уже не цифры. Хотите строго ввода, ну так надо организовывать проверку по маске ввода, хотя желание иметь телефон как вам хочется, это спорно. Можно ведь проверить количество цифр, а отформатировать номер при выводе для себя или кого-то, в этом нет проблем, а пользователь пусть вводит так, как ему удобнее.
<input name="name" required="" pattern="[а-яёА-ЯЁ]{2,12}" />
<input name="phone" required="" pattern="^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$" />
<input name="email" type="email" required="" pattern="^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$" />
|
Rise,
Мне и нужно не через pattern, а через функции и js. Так ведь можно проверить???? |
Цитата:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('#formcheck').submit(function() {
var err = [], p = [
[/[а-яёА-ЯЁ]{2,12}/, 'Ввод имени некорректный'],
[/^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$/, 'Ввод телефона некорректный'],
[/^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$/, 'Ввод электронного адреса некорректный']
];
$(this).find('input').each(function(i, e) {
var v = $.trim(e.value);
if(!v || !(p[i][0]).test(v)) err.push(p[i][1])
})
if(err.length) {
alert(err.join('\n'));
return false;
}
})
});
</script>
</head>
<body>
<form id="formcheck">
<input name="name" />
<input name="phone" />
<input name="email" />
<button>GO</button>
</form>
</body>
</html>
Переменная p может быть объектом, имена свойств которого есть имена полей. Если пустое поле должно иметь собственное сообщение, значит таковое надо описать, ну и т.д., и т.п. PS. Хотя, если обязательно JQ, то var v = $.trim(e.value); нужно заменить на var v = $(this).val();, а до $(function() { прописать следующее:
$.valHooks.input = {
get: function(e) {
return $.trim(e.value)
}
};
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<script src="script.js"></script>
<script scr="jquery-3.1.1.js"></script>
<script type="text/javascript">
<script>
$.valHooks.input = {
get: function(e) {
return $.trim(e.value)
}
};
$(function() {
$('#formcheck').submit(function() {
var err = [], p = [
[/[а-яёА-ЯЁ]{2,12}/, 'Ввод имени некорректный'],
[/^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$/, 'Ввод телефона некорректный'],
[/^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$/, 'Ввод электронного адреса некорректный']
];
$(this).find('input').each(function(i, e) {
v = $(this).val();
if(!v || !(p[i][0]).test(v)) err.push(p[i][1])
})
if(err.length) {
alert(err.join('\n'));
return false;
}
})
});
</script>
<script type="text/javascript">
jQuery(function($) {
$.mask.definitions['~']='[+-]';
$('#phone').mask('(999) 999-9999');
});</script>
Добавила маску для телефона и код перестал работать:( Как исправить? PS Сама маска работает |
jQuery(function($) - это уже объявлено в коде, $(function(), повторений не надо.
Это $.mask.definitions['~']='[+-]'; $('#phone').mask('(999) 999-9999'); убрать, а шаблон /^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$/ заменить на /^\(\d{3}\)\s{1}\d{3}-\d{3}$/ PS. Или вы используете плагин, который форматирует ввод номера? |
laimas,
Хотела чтобы у поля телефона была такая вот подсказка +38 (___) ___ __ __ , которая не исчезает после клика по заполняемому полю. И да, прочитала информацию про плагин Masked Input и захотелось его применить) |
Ну тогда применяйте плагин здесь:
$(function() {
$.mask.definitions['~']='[+-]';
$('#phone').mask('(999) 999-9999');
$('#formcheck').submit(function() ....
а шаблон проверки телефона должен быть таким:
/^\+38\s{1}\(\d{3}\)\s{1}\d{3}-\d{3}$/
|
laimas,Исправила, но не работает. Может много скриптов подключила? Или ошибка где-то, не могу найти.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.maskedinput.js"></script>
<script src="script.js"></script>
<script scr="jquery-3.1.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function () {
$.mask.definitions['~'] = '[+-]';
$('#phone').mask('(999) 999-9999');
$('#formcheck').submit(function () {
var err = []
, p = [
[/[а-яёА-ЯЁ]{2,12}/, 'Ввод имени некорректный'],
[/^\+38\s{1}\(\d{3}\)\s{1}\d{3}-\d{3}$/, 'Ввод телефона некорректный'],
[/^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$/, 'Ввод электронного адреса некорректный']
];
$(this).find('input').each(function (i, e) {
var v = $.trim(e.value);
if (!v || !(p[i][0]).test(v)) err.push(p[i][1])
})
if (err.length) {
alert(err.join('\n'));
return false;
}
})
});
</script>
|
Цитата:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.maskedinput.js"></script> <script src="script.js"></script> PS. Если плагин maskedinput.js требует конкретной версии (не ниже какой-то), то подключайте таковую. |
А как сделать так, чтобы вместо отдельного сообщения уведомление об ошибке выводилось возле каждого поля формы? Это вместо p нужно присвоить объект? Как это сделать?
|
Цитата:
$(this).find('input').slice(0, -1).each(function(i, e) {
.....
либо получать поля ввода типа text, указав соответствующим полям этот тип:
$(this).find('input[type="text"]').each(function(i, e) {
.....
Эта переменная описывает правила проверки (шаблоны) и тексты сообщений об ошибках. Но ведь если поставлено задание посредством JQ, и если без использования pattern, то значит и required, и placeholder не должны применяться по идее. А значит проверку поля нужно производить раздельно: 1) поле заполнено?; 2) поле заполнено корректно?, а переменная p должна еще содержать для каждого поля сообщения об обязательном заполнении поля, и также текст подсказки что разрешено вводить в него. А вывод этих сообщений у поля делается посредством скрипта с использованием слоя с абсолютным позиционированием, которое (и не только) описывается css-правилами. При этом подсказка для поля может выводиться при получении полем фокуса и если оно не заполнено и по истечении времени закрываться сама. А сообщения об ошибках естественно при их наличии. |
K_arina, зачем паттерны с подсказками в каком-то массиве? Запиши их прямо в атрибуты полей и проверяй поле за полем на высоком уровне абстракции.
|
Цитата:
Это если захотеть браузерную валидацию, а она недоделана и вообще мутная. То есть берем var p=el.getAttribute('pattern'); и юзаем в своем скрипте и стопудово в Сафари оно сработает. Аналогично с required и в этот атрибут еще можно записать min-length если в паттерне нету. |
Вот тут сделано так было http://javascript.ru/forum/dom-windo...tml#post431819 и вот как надо было продолжить
<form id="feedback" method="post">
<input name="name" required="required"
pattern="[а-яёА-ЯЁ]{2,12}"
e="Соблюдайте формат имени: от 2 до 12 русских букаф" />
<input name="phone" required="required"
pattern="^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$"
e="Неправильно набран номер, неправильно набран номер, бип-бип-бип" />
<input name="email" type="email" required="required"
pattern="^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$"
e="Соблюдайте формат имейл: some@example.com" />
</form>
Теперь написать скрипт в несколько строк дело нескольких минут, поскольку все самоочевидно. |
Цитата:
Ежику понятно, что гораздо лучше когда сам браузер справится без всяких скриптов, а то что Safari не поддерживает, так это проблемы яблочников и самого Яблока, что есть вопрос сугубо философский и для темы не более мусора. |
Цитата:
|
Напомню разницу между html и xml
xml без модели документа - голимая абстракция. модель для html пишется по риквестам на w3c.org, называется спецификация и реализуется браузером Так вот, силой воображения можно представить, что html тоже голимая абстракция и тогда становится понятным, что ты можешь применять любую модель, отличную от спецификации. Например пресловутые атрибуты data- Кто вас заставляет использовать их как свойства - element.dataset.foo - ? Никто не заставляет, можешь получать значение через element.getAttribute('data-foo'); Тогда зачем такие длинные названия? Именно, вообще не нужны. Однако, возможен конфликт твоей модели и спецификации, например используя атрибут onclick появляется риск получить неожиданное поведение элемента. Используй короткие названия, 27 букв латинского алфавита - скорее всего более чем достаточно, а применительно к бесконечному числу моделей (контекста) хватит нескольких. Тогда зачем писать pattern и required? Можно p и r. Просто на будущее. Скажем браузерная валидация начнет работать нормально и не придется переделывать шаблоны и html - там уже pattern и required. Просто убьем лишнее в скриптах и ура. В общем, понятно, что и теги и их атрибуты могут быть какими угодно, если спецификация не конфликтует с твоей моделью. У меня год на одном сайте использовался тег val, который на самом деле var. Все работало как из пушки - и стили применялись и скрипты само собой его находили. |
Аналогично с объектами. В объект - который элемент - можно вштырить какие угодно свойства и методы. Он же объект, а мы на жабе скрипучей кодим, а ей почти все похеру. Свобода обуславливает культуру. Один молится на спецификацию не смея отползти от алтаря, другой пишет библиотеку prototype. Это две крайности. Так вот, умные судят по мере, а дураки о крайностях. Используйте свободу html и js по мере.
|
Цитата:
И хватит мусорить в темах, уважать надо автора. |
Цитата:
Вот какой контекст Цитата:
Про сафарю походя сказал один профессор, а ты в ужасе сразу потер паттерны и приуныл. |
warren buffet,
слушай, умник, хватит срач в темах разводить. Несешь бред автору пользы не несущий. Охота языком чесать - создавай тему, пиши там о разностях, о плюсах и минусах, о своих мнениях, будет интересно, будут и собеседники. У меня есть свое мнение вообще о браузерах, но это не повод гадить этим мнением чужие темы. |
В общем вот рабочий пример, проще буквально некуда, но в нем есть все, что нужно для счастья.
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<br/>
<style>
.errlog{
outline:1px solid #eee;
}
</style>
<form id="feedback" method="get" action="" novalidate autocomplete="off">
<label>Ваше русское имя
<input name="fullname" required="required" type="text" placeholder="ФИО"
pattern="[а-яёА-ЯЁ]{2,12}"
e="Соблюдайте формат имени: от 2 до 12 русских букаф" /></label>
<br/><br/>
<label>Номер телефона
<input name="phone" required="required" type="tel" placeholder="+7(777)777-77-77"
pattern="^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$"
e="Неправильно набран номер, неправильно набран номер, бип-бип-бип" /></label>
<br/><br/>
<label>Электронный адрес
<input name="email" type="email" required="required" type="email" placeholder="МЫЛО"
pattern="^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$"
e="Соблюдайте формат имейл: some@example.com" /></label>
<br/><br/>
<input type="submit" value="PostIt"/>
<br/><br/>
<div class="errlog"></div>
</form>
<script>
var Form = new function(){
var form=document.getElementById('feedback'),
fields=form.elements,
errout=form.querySelector('.errlog'),errlog,
validate=function(ev){
errout.innerHTML='';
errlog=[];
for(var i=0;i<fields.length;i++){
var f=fields[i];
p=f.getAttribute('pattern'),
r=f.getAttribute('required'),
v=f.value;
if(f.name && r && p && !new RegExp(p).test(v))
errlog.push(f.parentNode.textContent+': '+f.getAttribute('e'));
}
if(errlog.length) {
ev.preventDefault();
errout.innerHTML='<ul><li>'+errlog.join('</li><li>')+'</li></ul>';
}
/* below line just for test purpose */
else {ev.preventDefault(); alert('Поздравляем! Все заполнено правильно!');}
};
form.addEventListener('submit',validate);
this.form=form;
};
</script>
</body>
</html>
|
warren buffet,
ты читаешь, что просьба была именно на JQ? А значит не getElementById, addEventListener, getAttribute.... Ты вообще для чего это все пишешь? |
Ты же опровергал такое ТЗ, нес там что-то о браузерной валидации, а теперь про ТЗ вспомнил?
Да ты пойми, что кроме тебя и меня и автора темы, тему читает гораздо больше людей и кроме того, топик индексируется и может быть найден еще большим числом людей и, если, там хорошее решение - это хорошо для многих, а если там какашка - то какашка для многих. Чего там хотел ТС - фиолетово. Главное - сделана рабочая иллюстрация простого и даже очевидного решения в рамках простой задачи. Если туда скажем добавить файлово поле - все резко усложнится, поскольку с файлами геморрой вообще. Если добавить списки, чек, радивы - еще усложнится. А такие вот простые вещи когда там текстовые поля не требуют никакой сложности сервисной проверки. ЗЫ тебе придурку хотел сказать спасибо за паттерны, но ты ж такой злой, что даже спасибо не дашь сказать. ))) |
| Часовой пояс GMT +3, время: 18:39. |