Нужно сделать проверку при нажати на submit ?

ilyas · October 9, 2013

имеются 3 тектовых инпута, допустим пользователь нажал на submit но не заполнил ни один из этих полей, , нужно чтобы при нажатии submit вылетало небольшое модальное окошко с сообщением чтобы пользователь заполнил обязательные поля помеченные звездочкой, к этим текстовым инпутам можно обратиться только по id #PROP1, #PROP2, #PROP3

И после нажатия на submit вылетает модальное окошко и после закрытия этого модального окошка не нужно чтобы отправлялись POST-данные т.е. не нужно чтобы страница перезагружалась

Помогите пожалуйста написать эту проверку, заранее благодарен

Zverushka · October 9, 2013


$(document).ready(function(){

$("form").submit(function() {

	 var isFormValid = true;
	 // обязательные поля отмечены классом required
	 $(this).find(".required").each(function(){

	 if ($.trim($(this).val()).length == 0){
		 isFormValid = false;
		 }
	 });
     var mAlert = "Заполните, пожалуйста, обязательные поля";
	 if (!isFormValid) {
		 alert(mAlert);
	 }

	 return isFormValid; // так как 0, отправки данных не происходит
	 });
});

Edited October 9, 2013 by Zverushka

CoDy · October 9, 2013

Цепляемся на событие "onsubmit" нужной формы, делаем нужную проверку и в зависимости от ее результатов возвращаем:

- true, все ок форма идет на обработку

- false, отправка данных формы не происходит.

Вот как-то так:


<!DOCTYPE html>
<html>
  <head>   
    <meta charset=utf-8 />
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <form id="form">
	  <input id="text" name="text" type="text" value="" />

	  <input type="submit" value="Отправить" />
	  <button type="submit">Отправить</button>
    </form>
    <script type="text/javascript">
    function valid(){
	  var valid = false;

	  // Проверка выставить в valid результат валидации. 


	  !valid && alert("Сообщение");
	  return valid;
    }
    // Если загружена JQuery.
    // $("#form").bind("submit", valid);
    document.getElementById("form").onsubmit = valid;
    </script>
  </body>
</html>

ilyas · October 9, 2013


$(document).ready(function(){

$("form").submit(function() {

	 var isFormValid = true;
	 // обязательные поля отмечены классом required
	 $(this).find(".required").each(function(){

	 if ($.trim($(this).val()).length == 0){
		 isFormValid = false;
		 }
	 });
var mAlert = "Заполните, пожалуйста, обязательные поля";
	 if (!isFormValid) {
		 alert(mAlert);
	 }

	 return isFormValid; // так как 0, отправки данных не происходит
	 });
});

А можно как то по id проверить а не по имеющемуся классу required ? по 3 разным id выполнить проверку

Zverushka · October 9, 2013


if ($.trim($("#id1").val()).length == 0){
				 isFormValid = false;
}
if ($.trim($("#id2").val()).length == 0){
				 isFormValid = false;
}
if ($.trim($("#id3").val()).length == 0){
				 isFormValid = false;
}

Ну и это требует подключения jQuery

Как вы без знаний скриптов работаете :blink:

Edited October 9, 2013 by Zverushka

ilyas · October 9, 2013

if ($.trim($("#id1").val()).length == 0){
				 isFormValid = false;
}
if ($.trim($("#id2").val()).length == 0){
				 isFormValid = false;
}
if ($.trim($("#id3").val()).length == 0){
				 isFormValid = false;
}
Ну и это требует подключения jQuery
Как вы без знаний скриптов работаете

В моем случае скрипт вот так должен выглядеть вот, но что то ни один алерт не вылетел


$(document).ready(function(){
$("form#ORDER_FORM").submit(function() {

		 var isFormValid = true;
		 // обязательные поля отмечены классом required
		 $(this).find(".required").each(function(){

		 if ($.trim($("#ORDER_PROP_2").val()).length == 0){
								 isFormValid = false;
}
if ($.trim($("#ORDER_PROP_3").val()).length == 0){
		 isFormValid = false;
}
if ($.trim($("#ORDER_PROP_7").val()).length == 0){
		 isFormValid = false;
}
var mAlert = "Заполните, пожалуйста, обязательные поля";
		 if (!isFormValid) {
				 alert(mAlert);
		 }
		 return isFormValid; // так как 0, отправки данных не происходит
		 });
});

Edited October 9, 2013 by ilyas

ilyas · October 9, 2013

Короче вот так

Silver Soft · October 9, 2013

так у тебя там список )

чтобы селекторами не парится можешь в тэге прописать

onchange="myFunc(id_region)"

и там отлавливать... если у тебя в этих списках есть элементы типа "Не выбрано", то еще проще


$("#id_form").submit(function() {

// условно у элемента "Не выбрано" стоит значение -1
if ('#ORDER_PROP_1').val() == -1) {
  alert('Значение 1 не выбрано!');
  return false; // возврат false - не перезагружает страницу
}

});

ilyas · October 9, 2013

так у тебя там список )
чтобы селекторами не парится можешь в тэге прописать
onchange="myFunc(id_region)"
и там отлавливать... если у тебя в этих списках есть элементы типа "Не выбрано", то еще проще
$("#id_form").submit(function() {

// условно у элемента "Не выбрано" стоит значение -1
if ('#ORDER_PROP_1').val() == -1) {
alert('Значение 1 не выбрано!');
return false; // возврат false - не перезагружает страницу
}

});

Можно по подробнее код, что-то не совсем его понял ?

Zverushka · October 9, 2013

if ($.trim($("#id1").val()).length == 0){
				 isFormValid = false;
}
if ($.trim($("#id2").val()).length == 0){
				 isFormValid = false;
}
if ($.trim($("#id3").val()).length == 0){
				 isFormValid = false;
}
Ну и это требует подключения jQuery
Как вы без знаний скриптов работаете

В моем случае скрипт вот так должен выглядеть вот, но что то ни один алерт не вылетел


$(document).ready(function(){
$("form#ORDER_FORM").submit(function() {

		 var isFormValid = true;
		 // обязательные поля отмечены классом required
		 $(this).find(".required").each(function(){

		 if ($.trim($("#ORDER_PROP_2").val()).length == 0){
								 isFormValid = false;
}
if ($.trim($("#ORDER_PROP_3").val()).length == 0){
		 isFormValid = false;
}
if ($.trim($("#ORDER_PROP_7").val()).length == 0){
		 isFormValid = false;
}
var mAlert = "Заполните, пожалуйста, обязательные поля";
		 if (!isFormValid) {
				 alert(mAlert);
		 }
		 return isFormValid; // так как 0, отправки данных не происходит
		 });
});

Надо убрать цикл:

$(this).find(".required").each(function(){

Edited October 9, 2013 by Zverushka

ilyas · October 9, 2013

я не выбрал город не заполнил поля и нажал на отправить, никакого алерта не вылетело, цикл убирал

ilyas · October 10, 2013

Вот например если нажать на кнопку Отправить на этом форуме вылетает же алерт и не перезагружается страница вот мне так же надо

Silver Soft · October 10, 2013

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

Николя223 · October 10, 2013

Вот например если нажать на кнопку Отправить на этом форуме вылетает же алерт и не перезагружается страница вот мне так же надо

Вы уже пол года на этом форуме а так ни чему и не научились... может не стоит вообще...

вам же подробно почти всё написали, причем без наглядного примера

если вы используете селекты, то проверяйте на то что не выбран первый пункт(Ничего не выбранно)

http://jsfiddle.net/svqwP/1/

Edited October 10, 2013 by Николя223

Sign In

Нужно сделать проверку при нажати на submit ?

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information