Нужна помощь с Ajax и Jquery
Всем привет, плохо у меня с Jquery, в основном на php пишу.
Помогите пожалуйста сделать валидацию полей в форме чтобы проверки были на каждое поле в форме на пустоту перед отправкой. HTML: div id="fieldone">
<div class="reg-form-block">
<div class="reg-form">
<div class="title">Имя</div>
<input id="fio" name="fio" value="" type="text" placeholder="Фамилия Имя Отчество">
</div>
<div class="reg-form">
<div class="title">Логин</div>
<input id="login" name="login" value="" type="text" placeholder="Ваш логин">
</div>
<div class="reg-form">
<div class="title">E-mail</div>
<input id="email" name="email" value="" type="text" placeholder="Введите e-mail">
</div>
<div class="reg-form">
<div class="title">Пароль</div>
<input id="pass" name="pass" value="" type="password" placeholder="Введите пароль">
</div>
<div class="reg-form">
<div class="title">Повторите пароль</div>
<input id="re_pas" name="re_pas" value="" type="password" placeholder="Введите пароль">
</div>
</div>
</div>
Jquery: $(document).ready(function ()
{ // после загрузки DOM
$("#ajax_user").submit(function ()
{
// this указывает на нашу форму
var str = $(this).serialize(); // сериализуем данные для POST-запроса
$.ajax(
{
type: "POST",
url: "regform_user.php",
data: str,
success: function (msg)
{
$(document).ajaxComplete(function (event, request, settings)
{
//if (msg == 'OK') // Если сообщение отправлено, поблагодарим пользователя
//{
//result = 'Ваше сообщение отправлено. Спасибо!';
//$("#fieldone").css('display','none');
//}
//else
//{
//result = msg;
//}
//$("#noteone").html(result);
});
}
});
return false;
});
});
Понимаю что должно быть типа if($("fio").val()){ } else { form.send } Но не понимаю куда вставлять и как сделать в 1 функции сразу проверки на все поля. Кстати если что аякс возвращает массив ошибок, если они есть, лучше бы их реализовать, но не знаю как работать с массивами Jquery и как правильно разбить принятый из php массив. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('form').submit(function(){
var n=$(this).find('input').filter(function(){
return (this.value=='')? true: false;
}).length;
if (n>0) {
alert('Не заполнено '+n+'шт. полей');
return false;
};
return true;
});
});
</script>
</head>
<body>
<form>
<div class="reg-form-block">
<div class="reg-form">
<div class="title">Имя</div>
<input id="fio" name="fio" value="" type="text" placeholder="Фамилия Имя Отчество">
</div>
<div class="reg-form">
<div class="title">Логин</div>
<input id="login" name="login" value="" type="text" placeholder="Ваш логин">
</div>
<div class="reg-form">
<div class="title">E-mail</div>
<input id="email" name="email" value="" type="text" placeholder="Введите e-mail">
</div>
<div class="reg-form">
<div class="title">Пароль</div>
<input id="pass" name="pass" value="" type="password" placeholder="Введите пароль">
</div>
<div class="reg-form">
<div class="title">Повторите пароль</div>
<input id="re_pas" name="re_pas" value="" type="password" placeholder="Введите пароль">
</div>
</div>
</div>
<button>Отправить</button>
</form>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
$(document).ready(function() { // после загрузки DOM
$("#ajax_user").submit(function() {
// © ksa, [url]https://javascript.ru/forum/misc/71907-nuzhna-pomoshh-s-ajax-i-jquery.html#post473419[/url]
var n = $(this).find('input').filter(function() {
return (this.value == '');
}).length;
if (n > 0) {
alert('Не заполнено ' + n + 'шт. полей');
return false;
};
// this указывает на нашу форму
var str = $(this).serialize(); // сериализуем данные для POST-запроса
$.ajax({
type: "POST",
url: "regform_user.php",
data: str,
success: function(msg) {
$(document).ajaxComplete(function(event, request, settings) {
//if (msg == 'OK') // Если сообщение отправлено, поблагодарим пользователя
//{
//result = 'Ваше сообщение отправлено. Спасибо!';
//$("#fieldone").css('display','none');
//}
//else
//{
//result = msg;
//}
//$("#noteone").html(result);
});
}
});
return false;
});
});
Заранее прошу прощения, но страшно представить, что вы на php способны написать, если даже с такой тривиальной задачей не справились. |
Спасибо)
|
| Часовой пояс GMT +3, время: 11:26. |