Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Нужна помощь с Ajax и Jquery (https://javascript.ru/forum/misc/71907-nuzhna-pomoshh-s-ajax-i-jquery.html)

Frost56ru 21.12.2017 11:34

Нужна помощь с 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 массив.

ksa 21.12.2017 11:44

Цитата:

Сообщение от Frost56ru
Помогите пожалуйста сделать валидацию полей в форме чтобы проверки были на каждое поле в форме на пустоту

Как вариант...
<!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>

Frost56ru 21.12.2017 12:10

Цитата:

Сообщение от ksa (Сообщение 473419)
Как вариант...
<!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>

так это без аякса, мне надо в готовый аякс вставить)

laimas 21.12.2017 12:14

Цитата:

Сообщение от Frost56ru
так это без аякса, мне надо в готовый аякс вставить

Проверять на клиенте нужно до передачи формы. А вот сервер, будучи обязанным проверять пришедшие извне данные не зависимо от того проверялись ли они на клиенте или нет, будет возвращать ошибки клиенту уже после отправления формы.

Frost56ru 21.12.2017 12:20

Цитата:

Сообщение от laimas (Сообщение 473422)
Проверять на клиенте нужно до передачи формы. А вот сервер, будучи обязанным проверять пришедшие извне данные не зависимо от того проверялись ли они на клиенте или нет, будет возвращать ошибки клиенту уже после отправления формы.

Ну хотя бы сделать надо как то на строне клиента и в случае успеха делать ajax

Nexus 21.12.2017 12:25

Цитата:

Сообщение от Frost56ru
так это без аякса, мне надо в готовый аякс вставить

Сложно ли скопировать обработчик submit'а ksa и вставить её в свой "ajax"?

Frost56ru 21.12.2017 12:31

Цитата:

Сообщение от Nexus (Сообщение 473425)
Сложно ли скопировать обработчик submit'а ksa и вставить её в свой "ajax"?

Что за обработчик? Куда вставлять?

laimas 21.12.2017 12:43

Цитата:

Сообщение от Frost56ru
Ну хотя бы сделать надо как то на строне клиента и в случае успеха делать ajax

Вам это и показано, только вместо return true нужно продолжить - ajax запрос отправления формы.

Nexus 21.12.2017 13:07

$(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 способны написать, если даже с такой тривиальной задачей не справились.

Frost56ru 21.12.2017 14:58

Спасибо)


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