![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:05
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от K_arina
|
Так просто???
|
Ну вы же пишите - required, а это доступно только в HTML5, а в нем также доступны и шаблоны.
Вот только изначально ваш вопрос звучит как нечто "хочу то, не знаю что".
А H1 должен быть на странице в количестве одна штука и не больше и никак не Ок в форме. ![](https://javascript.ru/forum/images/smilies/wink.gif)
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:07
|
Интересующийся
|
|
Регистрация: 15.10.2016
Сообщений: 15
|
|
Rise,
Правила валидации:
Поле Name {только русские буквы}
Поле Number {только цифры, регулярное выражение типа (___) ___ __ __}
E-mail {регулярное выражение типа smth@smth.smth}
Обязательно использовать JQuery
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:08
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от K_arina
|
Ой, а мы ж получается не используем JQuery?
|
А почему именно jQuery?
1) - пост выше о HTML5
2) - нужна поддержка старых браузеров? Тогда и нужен будет JS. Обязательно JQuery? Не проблема, и если не хотите плагинов, то можно использовать для проверки правила прописанные в pattern при отправке формы используя JQ.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:10
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от K_arina
|
Поле Number {только цифры, регулярное выражение типа (___) ___ __ __}
|
Это уже не Number будет, так как по условию это не только цифры.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:10
|
Интересующийся
|
|
Регистрация: 15.10.2016
Сообщений: 15
|
|
Сообщение от laimas
|
А почему именно jQuery?
1) - пост выше о HTML5
2) - нужна поддержка старых браузеров? Тогда и нужен будет JS. Обязательно JQuery? Не проблема, и если не хотите плагинов, то можно использовать для проверки правила прописанные в pattern при отправке формы используя JQ.
|
Если так можно, я бы с радостью воспользовалась всема плагинамы, чтобы оптимизировать код, но так была поставлена задача преподавателем.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:12
|
Интересующийся
|
|
Регистрация: 15.10.2016
Сообщений: 15
|
|
laimas,
Почему не только цифры? Это номер телефона, просто поле должно быть с маскировкой и проверкой.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:19
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от K_arina
|
Почему не только цифры? Это номер телефона, просто поле должно быть с маскировкой и проверкой.
|
Потому, что есть в HTML5 поле и типа number, а в нем разрешен ввод только чисел, и это поле имеет (не у всех версий браузеров) стрелочки для набора.
А маска, это уже не цифры. Хотите строго ввода, ну так надо организовывать проверку по маске ввода, хотя желание иметь телефон как вам хочется, это спорно. Можно ведь проверить количество цифр, а отформатировать номер при выводе для себя или кого-то, в этом нет проблем, а пользователь пусть вводит так, как ему удобнее.
<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}$" />
Последний раз редактировалось laimas, 15.10.2016 в 19:26.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 19:35
|
Интересующийся
|
|
Регистрация: 15.10.2016
Сообщений: 15
|
|
Rise,
Мне и нужно не через pattern, а через функции и js. Так ведь можно проверить????
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 20:05
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от K_arina
|
Мне и нужно не через 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)
}
};
Последний раз редактировалось laimas, 15.10.2016 в 20:32.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.10.2016, 21:44
|
Интересующийся
|
|
Регистрация: 15.10.2016
Сообщений: 15
|
|
<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>
Добавила маску для телефона и код перестал работать ![Sad](https://javascript.ru/forum/images/smilies/sad.gif) Как исправить?
PS Сама маска работает
|
|
|
|