Field validation before submitting?

  • 0
    Good day, help to check the field (phone number of characters) If the number is entered correctly, we send the form; if not, we display an alert that fill in the phone number.
    The form itself works, but the validation does not work correctly. It happens that an alert is displayed but after a click (ok) the form is then sent all the same.
    I've been fucking with her for 2 days already, thanks.

    <form action="" id="forma2" class="form-element formGo">
    	<input type="text" id="login" class="second name-duble-1 form-name-one" name="entry.2053498632" placeholder="Ваше имя" required>
    	<input type="hidden" id="login" class="second" name="theme" placeholder="" value="Форма - (Урок Английского)" required >
    	<input type="text" id="testInput" min="17" class="phone-duble-1 form-control phone form-phone form-phone-one" name="entry.1532729351" placeholder="Ваш телефон" required  data-inputmask="&quot;mask&quot;:&quot;+38(999) 999-9999&quot;" data-mask="">
      <input type="submit" class="form-input__button btn submit-btn btn-style-one" value="Отправить" onclick="sendPost1();">
    	</form>


    <script>
        
        $(".phone__input").inputmask({"mask": "+38(999) 999-9999"});
    		$(document).ready(function () {
    			$('[data-mask]').inputmask();
            })
            
    
    	  function sendPost1() {
    		  let input = document.querySelector("#testInput");
    	  let length = input.value.length;
    	  if (length < 17) {
    		alert(document.querySelector('#testInput').value + ' меньше 17!');
    	  //   alert(Введите правильно номер телефона)
    	  }
    	  else {
          //   alert(document.querySelector('#testInput').value + ' ок!')
          
    		$('.formGo').submit(function (e) { // вешаем событие на отправку формы
    			e.preventDefault(); // выключаем стандартное действие отправки
    			var form = $(this); // запомним форму в переменной
    			// добавим небольшую секцию проверки на заполненность
    			var errors = false; // сначала ошибок нет
    			form.find('.req').each(function () { // пройдем по каждому полю с классом .req в форме
    				$(this).removeClass('error'); // сначала уберем у него класс с ошибкой, на случай если он там есть
    				if ($(this).val() == '') { // если оно пустое
    					$(this).addClass('error'); // добавим к нему класс с ошибкой
    					errors = true; // найдена ошибка
    				}
    			});
    			if (errors) return false; // если есть ошибка то больше ничего не делаем
    			var data = form.serialize(); // сериализуем данные формы в строку для отправки, обратите внимание что атрибуты name у полей полностью сопдают с нэймами у полей самой гугл формы
    			$.ajax({ // инициализируем аякс
    				url: "https://docs.google.com/forms/u/0/d/e/1FAIpQLSfxZUHvrZkPUXtppi5hyQGe9tG1KGw1ldUiowxUtG_-2O90Vw/formResponse", // слать надо сюда, строку с буковками надо заменить на вашу, это атрибут action формы
    				data: data, // данные  которые мы сериализовали
    				type: "POST", // постом
    				dataType: "xml", // ответ ждем в формате xml
    				beforeSend: function () { // перед отправкой
    					form.find('.send__form').attr('disabled'); // отключим кнопку
    				}
    				, statusCode: { // после того как пришел ответ от сервера
    					0: function () { // это успешный случай
    						form.html('<h4 style="color: #fff;">Спасибо, Ваш заявка отправлена!</h4><p style="color: #fff;">Я вам перезвоню в течении 30-ти минут.</p>'); // сунем в форму сообщение что все ок
    					}
    					, 200: function () { // это тоже успешный случай
    						form.html('<h4 style="color: #fff;">Спасибо, Ваш заявка отправлена!</h4><p style="color: #fff;">Я вам перезвоню в течении 30-ти минут.</p>'); // сунем в форму сообщение что все ок
    					}
    				}
    			});
    		});
      
    	  }
      
    	  }
    	</script>
    JavaScript Anonymous, Jun 2, 2019

  • 1 Answers
  • 0
    Good afternoon,



    By mistakes:

    1. Do not use the same id on the page, this can also lead to bugs when working with the DOM.

    2. alert is not an exit from the function, you check the condition, output alert, then it goes below and still handles submit. If you want to get out of this - use return

    3. You have an error variable. I recommend putting it at the very beginning of the sendPost1 function and triggering it to true just when the condition is triggered that the number of characters in the phone is incorrect. Then return in the first if condition is not needed.
    Autumn Joseph

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!