Форум

Frost56ru · #1 (**permalink**) 21.12.2017, 11:34

Всем привет, плохо у меня с 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 · #2 (**permalink**) 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 · #3 (**permalink**) 21.12.2017, 12:10

Сообщение от ksa

Как вариант...

<!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 · #4 (**permalink**) 21.12.2017, 12:14

Сообщение от Frost56ru

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

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

Frost56ru · #5 (**permalink**) 21.12.2017, 12:20

Сообщение от laimas

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

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

Nexus · #6 (**permalink**) 21.12.2017, 12:25

Сообщение от Frost56ru

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

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

Frost56ru · #7 (**permalink**) 21.12.2017, 12:31

Сообщение от Nexus

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

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

laimas · #8 (**permalink**) 21.12.2017, 12:43

Сообщение от Frost56ru

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

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

Nexus · #9 (**permalink**) 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 · #10 (**permalink**) 21.12.2017, 14:58

Спасибо)

Форум

Справочник

Discord чат

Курсы javascript