Валидация 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"></i>login_register_input_username',
minlength: '<i class="iconfont"></i>login_register_username_range',
maxlength: '<i class="iconfont"></i>login_register_username_range',
remote: '<i class="iconfont"></i>login_register_username_exists'
},
member_password: {
required: '<i class="iconfont"></i>login_register_input_password',
minlength: '<i class="iconfont"></i>login_register_password_range',
maxlength: '<i class="iconfont"></i>login_register_password_range'
},
member_password_confirm: {
required: '<i class="iconfont"></i>login_register_input_password_again',
equalTo: '<i class="iconfont"></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? |
Цитата:
А плагин работает с формой, ее полями, методами, которых у div нет. |
Цитата:
Какой плагин будет работать? Кто может сделать, чтобы работало как я описал выше? |
Цитата:
<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] как по индексам массива на сервере описывающем реальные имена полей можно их получить. |
Ваш вариант хорош, но у меня есть уже готовое решение, которое хорошо работает уже несколько лет на другом сайте.
Моя задача адаптировать имеющееся решение на новом сайте, где прикручен валидатор, который проверяет логин нового пользователя - зарегистрирован пользователь с таким логином или нет, ну и другие поля. Я уверен, что мою задачу сделает специалист. Ок, вот такую скрытую форму создает скрипт, после нажания кнопки Отправить (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', В первом посте есть полностью этот код. |
Цитата:
|
| Часовой пояс GMT +3, время: 07:42. |