Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Валидация формы JQuery (https://javascript.ru/forum/dom-window/65381-validaciya-formy-jquery.html)

laimas 15.10.2016 19:05

Цитата:

Сообщение от K_arina
Так просто???

Ну вы же пишите - required, а это доступно только в HTML5, а в нем также доступны и шаблоны.

Вот только изначально ваш вопрос звучит как нечто "хочу то, не знаю что".

А H1 должен быть на странице в количестве одна штука и не больше и никак не Ок в форме. ;)

K_arina 15.10.2016 19:07

Rise,
Правила валидации:
Поле Name {только русские буквы}
Поле Number {только цифры, регулярное выражение типа (___) ___ __ __}
E-mail {регулярное выражение типа smth@smth.smth}

Обязательно использовать JQuery

laimas 15.10.2016 19:08

Цитата:

Сообщение от K_arina
Ой, а мы ж получается не используем JQuery?

А почему именно jQuery?

1) - пост выше о HTML5
2) - нужна поддержка старых браузеров? Тогда и нужен будет JS. Обязательно JQuery? Не проблема, и если не хотите плагинов, то можно использовать для проверки правила прописанные в pattern при отправке формы используя JQ.

laimas 15.10.2016 19:10

Цитата:

Сообщение от K_arina
Поле Number {только цифры, регулярное выражение типа (___) ___ __ __}

Это уже не Number будет, так как по условию это не только цифры.

K_arina 15.10.2016 19:10

Цитата:

Сообщение от laimas (Сообщение 431814)
А почему именно jQuery?

1) - пост выше о HTML5
2) - нужна поддержка старых браузеров? Тогда и нужен будет JS. Обязательно JQuery? Не проблема, и если не хотите плагинов, то можно использовать для проверки правила прописанные в pattern при отправке формы используя JQ.


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

K_arina 15.10.2016 19:12

laimas,
Почему не только цифры? Это номер телефона, просто поле должно быть с маскировкой и проверкой.

laimas 15.10.2016 19:19

Цитата:

Сообщение от 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}$" />

K_arina 15.10.2016 19:35

Rise,
Мне и нужно не через pattern, а через функции и js. Так ведь можно проверить????

laimas 15.10.2016 20:05

Цитата:

Сообщение от 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)
    }
};

K_arina 15.10.2016 21:44

<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 Сама маска работает


Часовой пояс GMT +3, время: 00:24.