Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.10.2019, 18:16
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Валидация input внутри div, а не внутри form
На сайте есть форма регистрации пользователей.

<div class="page_register clearfix">
    <div class="w1200">
        <div class="r_icon1"></div>
        <div class="r_icon2"></div>
        <div class="r_icon3"></div>
        <div class="r_icon4"></div>
        <div class="r_icon5"></div>
		
		
        <form method="post" id="post_form" action="">
            <div class="register_form">
                <div class="mt">account_registratio</div>
                                <div class="item clearfix">
                    <div class="label">login_register_username</div>
                    <div class="item-text">
                        <input type="text" id="member_name" name="member_name" class="text" tabindex="1" placeholder=login_register_username_to_login/>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="label">
                        login_register_pwd                    </div>
                    <div class="item-text">
                        <input type="password" id="member_password" name="member_password" class="text" tabindex="1" placeholder=""/>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class="label">
                        login_register_ensure_password                    </div>
                    <div class="item-text">
                        <input type="password" id="member_password_confirm" name="member_password_confirm" class="text" tabindex="1" placeholder=""/>
                    </div>
                </div>

                <div class="item">
                    <input type="submit" class="btn login-btn" value=login_register_login_now_4 />
                </div>
            </div>
        </form>
		
		
    </div>
</div>


<script>
    $(function () {
        $("#post_form").validate({
            errorPlacement: function (error, element) {
                var error_td = element.parent('.item-text');
                error_td.append(error);
                element.parents('.item:first').addClass('error');
            },
            success: function (label) {
                label.parents('.item:first').removeClass('error').find('label').remove();
            },
            rules: {
                member_name: {
                    required: true,
                    minlength: 3,
                    maxlength: 15,
                    remote: {
                        url: HOMESITEURL + '/Login/check_member.html',
                        type: 'get',
                        data: {
                            user_name: function () {
                                return $('#member_name').val();
                            }
                        }
                    }
                },
                member_password: {
                    required: true,
                    minlength: 6,
                    maxlength: 20
                },
                member_password_confirm: {
                    required: true,
                    equalTo: '#member_password'
                },

            },
            messages: {
                member_name: {
                    required: '<i class="iconfont">&#xe64c;</i>login_register_input_username',
                    minlength: '<i class="iconfont">&#xe64c;</i>login_register_username_range',
                    maxlength: '<i class="iconfont">&#xe64c;</i>login_register_username_range',
                    remote: '<i class="iconfont">&#xe64c;</i>login_register_username_exists'
                },
                member_password: {
                    required: '<i class="iconfont">&#xe64c;</i>login_register_input_password',
                    minlength: '<i class="iconfont">&#xe64c;</i>login_register_password_range',
                    maxlength: '<i class="iconfont">&#xe64c;</i>login_register_password_range'
                },
                member_password_confirm: {
                    required: '<i class="iconfont">&#xe64c;</i>login_register_input_password_again',
                    equalTo: '<i class="iconfont">&#xe64c;</i>login_register_password_not_same'
                },

                            }
        });
    });

</script>


Для валидации формы, в хедере размещен плагин
<script src="/jquery.validate.min.js?1"></script>
https://jqueryvalidation.org/

Я хочу поменять в форме тег form c id="post_form" на тег div, чтобы на странице регистрации не было формы и тем самым скрыть форму регистрации от ботов.
Далее я добавил скрипт который формирует скрытую форму с тегом form и при нажатии кнопки отправляет регистрацию. С этим всё получилось. В выше указанной форме этого кода нет, чтобы не нагромождать сейчас.

После замены form на div, валидатор конечно перестал работать.
Вопрос:
Как проверять псевдоформу с тегом div имеющим id="post_form" все input находящиеся внутри div?
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2019, 18:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Vaska
чтобы на странице регистрации не было формы и тем самым скрыть форму регистрации от ботов
Умный бот просто поля будет искать, где бы они не были, особенно такие input type="password" и с такими именами name="member_password".

А плагин работает с формой, ее полями, методами, которых у div нет.
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2019, 19:30
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Сообщение от laimas Посмотреть сообщение
А плагин работает с формой, ее полями, методами, которых у div нет.
Понятно, что данный плагин не будет работать.
Какой плагин будет работать?
Кто может сделать, чтобы работало как я описал выше?
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2019, 19:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Vaska
Какой плагин будет работать?
Не знаю такового, пишите свой код. А вообще поля формы можно разместить и вне тега form, то есть он будет пуст, и его можно запулить куда угодно на странице, как и сами поля разбросать по ней. Если при этом не именовать поля формы так "вкусно" для бота "password", "login" и т.п., а давать им случайные имена, которые живут только на время сессии, то жизнь боту можно усложнить. То есть к примеру так:

<input type="text" id="member_name" name="be5695717fb290b0234f1ea7d1b5386e[1]" class="text" tabindex="1" placeholder=""/>
<input type="password" id="member_password" name="be5695717fb290b0234f1ea7d1b5386e[2]" class="text" tabindex="1" placeholder=""/>
....

не помещать явных сладостей (login_register_username_to_login) в их атрибуты, а формировать их в объекте и скриптом добавлять, а тип поля "password" эмулировать типом "text", то уже это добавит неудобства боту. Чем больше программного в построении формы и случайного от сессии к сессии тем сложнее, каждый раз придется анализировать воочию скрипт, чтобы натравить потом на него собаку.

А что такое be5695717fb290b0234f1ea7d1b5386e[1], be5695717fb290b0234f1ea7d1b5386e[2], знает сервер, храня ключ be5695717fb290b0234f1ea7d1b5386e в сессии. Если будет прислан иной, значит левый запрос, так как либо ключа вообще нет в сессии, либо иной. По ключам [1], [2] как по индексам массива на сервере описывающем реальные имена полей можно их получить.
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2019, 20:04
Профессор
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 178

Ваш вариант хорош, но у меня есть уже готовое решение, которое хорошо работает уже несколько лет на другом сайте.
Моя задача адаптировать имеющееся решение на новом сайте, где прикручен валидатор, который проверяет логин нового пользователя - зарегистрирован пользователь с таким логином или нет, ну и другие поля.
Я уверен, что мою задачу сделает специалист.

Ок, вот такую скрытую форму создает скрипт, после нажания кнопки Отправить (login_register_login_now_4):

<form id="form" method="POST" name="post_form" action="">
  <input type="hidden" id="member_name" name="member_name" class="text" tabindex="1" style="display: none;">
  <input type="hidden" id="member_password" name="member_password" maxlength="11" class="text" tabindex="1"  style="display: none;">
  <input type="hidden" id="member_password_confirm" name="member_password_confirm" class="text" tabindex="1" style="display: none;">
</form>


Далее я добавил скрипт, которые проверяет input у скрытой формы:

function submitbutton() {
				let form = document.post_form,
				r = new RegExp("[^0-9A-Za-z]", "i");
				e = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
				
				// do field validation 
				if (form.member_name.value == "") { 
					alert( "Пожалуйста, введите Ваш логин." ); 
					} else if (r.exec(form.member_name.value)) { 
					alert( "Пожалуйста, введите правильно Логин.  Не должно быть пробелов, только символы 0-9,a-z,A-Z и длина больше 6 символов" ); 
					} else if (form.member_password.value == "") {
					alert( "Пожалуйста, введите пароль." ); 
					} else if (form.member_password_confirm.value == "") {
					alert( "Пожалуйста, введите пароль повторно." ); 
					} else { 
					form.submit(); 
				} 
			}

Как мне теперь, в этот скрипт, добавить проверку логина нового пользователя?
url: HOMESITEURL + '/Login/check_member.html',

В первом посте есть полностью этот код.

Последний раз редактировалось Vaska, 15.10.2019 в 20:06.
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2019, 20:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Vaska
где прикручен валидатор
А я что предлагал его "открутить"? Я лишь говорю о способе построения формы, а ваш валидатор работает по именам полей, а как оно называется или "password", или "alligator", или "be5695717fb290b0234f1ea7d1b5386e[1]" валидатору по барабану, просто эти имена нужно укать и для валидатора, что вы собственно и делаете.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделить текст внутри input при получении фокуса InviS jQuery 12 30.09.2015 17:12
Копировать div в input - Проблемма в FF lamer Элементы интерфейса 8 12.06.2012 23:30
Скроллить до определенной строки внутри div Putnik Элементы интерфейса 1 15.08.2011 16:52
input type="button" внутри input type="file" x-yuri Firefox/Mozilla 1 11.05.2011 17:51
ширина Input внутри div jetli13 (X)HTML/CSS 3 28.09.2010 19:01