Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 24.07.2019, 17:04   #1
Степан Адамов
Новичок
 
Регистрация: 14.11.2013
Сообщений: 3
Репутация: 10
По умолчанию Валидация формы

Здравствуйте.Я создал форму,проверка котороый должна осуществляться на javascript при нажатии на "отправить".Вот мой код:
Код:
<!DOCTYPE html>
<html>
 <head>
<meta charset="UTF-8">
  <title>Форма</title>
   <style>
  
   body 
   {
    background: #f6e8d7;
   }
   #helpMe
   {
    
      background: #f0f0f0;
    width: 400px;
    padding: 10px; /* Iiey 
    border: 2px solid #000; 
	
   }
   input[type="submit"]	
   {
	  
	   border: 4px inset #100;
	    cursor: url(WorldOfWarCraft/arrow.cur),pointer;
	   
   }
   p b
   {
	   color:orange;
	   border: 1px inset #100;
	   box-shadow: 0 0 10px rgba(0,0,0,0.5);
	   background: #808080;
	   outline-style: outset;
   }
   img.rightfoto
   {
	float:right;
    margin: 4px 750px 2px 0px;   
   }
   
  </style>
 </head>


   
 <body>
  <form method="GET" action="handler.php" class="formWithValidation">
  <img class="rightfoto" src="image.png" alt="aeuoa?iaoeaiue oaeno"  >
  <fieldset style="width: 400px;">
  <p><b name="textX"> X</b></p>
	     
    
		   <div id="helpMe"> 
		   
		    <input type="checkbox" class='checkboxxx field'  name="InputX" value="2"> 2
				<input type="checkbox" class='checkboxxx field' name="InputX" value="-1.5">-1.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="-1">-1
				<input type="checkbox" class='checkboxxx field' name="InputX" value="-0.5">-0.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="0">0
				<input type="checkbox" class='checkboxxx field' name="InputX" value="0.5">0.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="1">1
				<input type="checkbox" class='checkboxxx field' name="InputX" value="1.5">1.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="2">2
				 
				</div>
				
				<Br>
			
			
	<p><b> Y</b></p>
           
				<p><input type="text" class="Y"  maxlength="5" size="6" name="InputY" placeholder=" от -3 до 3"></p>
			
	
	<p><b> R</b></p>
	<p>
	
		<input name="InputR"  class='RRR field' type="radio" value="1">1
		<input name="InputR" class='RRR field' type="radio" value="1.5"> 1.5
		<input name="InputR" class='RRR field' type="radio" value="2"> 2
		<input name="InputR" class='RRR field' type="radio" value="2.5"> 2.5
		<input name="InputR" class='RRR field' type="radio" value=" 3"> 3
		 
    </p>
	<p><input type="submit"  onclick="validate(this.form)" class="validateBtn" ></p>
	   </fieldset>
	   
</form>

  <script>
  var SMSx;
  var SMSy;
  var SMSr;
      
    function showError(container, errorMessage) {
      container.className = 'error';
     var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
      
    }
 
    function resetError(container) {
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }
    
    function validate(form) 
    {
      event.preventDefault();
      var elems = form.elements;
      resetError(document.body);
      if (elems.InputY.value) 
      {
        
       SMSy=""
        
      }
      else
      {
         SMSy=" Введите Y <Br>"
         
      }
      resetError(document.body);

      if ((elems['InputX'][0].checked==true)||(elems['InputX'][1].checked==true)||
      (elems['InputX'][2].checked==true)||(elems['InputX'][3].checked==true)||
      (elems['InputX'][4].checked==true)||(elems['InputX'][5].checked==true)||
      (elems['InputX'][6].checked==true)||(elems['InputX'][7].checked==true)
      ||(elems['InputX'][7].checked==true))
      {
		        SMSx=""
		          
	    }
       	else
       	{
		        SMSx="<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Введите X </p> ";
	        }
	        if ((elems['InputR'][0].checked==true)||(elems['InputR'][1].checked==true)||
      (elems['InputR'][2].checked==true)||(elems['InputR'][3].checked==true)||
      (elems['InputR'][4].checked==true))
      {
		        SMSr=""
		          
	    }
       	else
       	{
		        SMSr="Введите R <Br>";
	        }
	      
     showError(document.body, SMSx+SMSy+SMSr);
      
    
    }
  </script>
</body>

</html>
event.preventDefault();
По идее эта функция должна отключать действие по умолчанию,т.е переход к скрипту на php,но этого не происходит.Почему?
Степан Адамов вне форума   Ответить с цитированием
Старый 24.07.2019, 21:24   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,791
Репутация: 2359
По умолчанию

event твой undefined, скрипт соответственно ломается и форма отсылается стандартными методами html
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 24.07.2019, 22:02   #3
Степан Адамов
Новичок
 
Регистрация: 14.11.2013
Сообщений: 3
Репутация: 10
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
event твой undefined, скрипт соответственно ломается и форма отсылается стандартными методами html
понятно
А так почему не работает,Если слушатель повесить?
Код:
<!DOCTYPE html>
<html>
 <head>
<meta charset="ISO-8859-1">
  <title>Ôîðìû</title>
   <style>
  
   body 
   {
    background: #f6e8d7;
   }
   #helpMe
   {
    
      background: #f0f0f0; /* Oaao oiia */
    width: 400px; /* Oe?eia aeiea */
    padding: 10px; /* Iiey */
    border: 2px solid #000; /* Ia?aiao?u ?aiee */
	
   }
   input[type="submit"]	
   {
	  
	   border: 4px inset #100;
	    cursor: url(WorldOfWarCraft/arrow.cur),pointer;
	   
   }
   p b
   {
	   color:orange;
	   border: 1px inset #100;
	   box-shadow: 0 0 10px rgba(0,0,0,0.5);
	   background: #808080;
	   outline-style: outset;
   }
   img.rightfoto
   {
	float:right;
    margin: 4px 750px 2px 0px;   
   }
   
  </style>
 </head>


   
 <body>
 <form method="GET" action="handler.php" class="formWithValidation">
  <img class="rightfoto" src="image.png" alt="aeuoa?iaoeaiue oaeno"  >
  <fieldset style="width: 400px;">
  <p><b name="textX"> X</b></p>
	     
    
		   <div id="helpMe"> 
		   
		    <input type="checkbox" class='checkboxxx field'  name="InputX" value="2"> 2
				<input type="checkbox" class='checkboxxx field' name="InputX" value="-1.5">-1.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="-1">-1
				<input type="checkbox" class='checkboxxx field' name="InputX" value="-0.5">-0.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="0">0
				<input type="checkbox" class='checkboxxx field' name="InputX" value="0.5">0.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="1">1
				<input type="checkbox" class='checkboxxx field' name="InputX" value="1.5">1.5
				<input type="checkbox" class='checkboxxx field' name="InputX" value="2">2
				 
				</div>
				
				<Br>
			
			
	<p><b> Y</b></p>
           
				<p><input type="text" class="Y"  maxlength="5" size="6" name="InputY" placeholder=" от -3 до 3"></p>
			
	
	<p><b> R</b></p>
	<p>
	
		<input name="InputR"  class='RRR field' type="radio" value="1">1
		<input name="InputR" class='RRR field' type="radio" value="1.5"> 1.5
		<input name="InputR" class='RRR field' type="radio" value="2"> 2
		<input name="InputR" class='RRR field' type="radio" value="2.5"> 2.5
		<input name="InputR" class='RRR field' type="radio" value=" 3"> 3
		 
    </p>
	<p><input type="submit"   class="validateBtn" ></p>
	   </fieldset>
	   
</form>

  <script>
  var SMSx;
  var SMSy;
  var SMSr;
  var form=document.querySelector('.formWithValidation');
      

    function showError(container, errorMessage) {
      container.className = 'error';
     var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
      
    }
 
    function resetError(container) {
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }
    
    form.addEventListener('submit', function (event) {
  event.preventDefault() ;
      var elems = form.elements;
      resetError(document.body);
      if (elems.InputY.value) 
      {
        
       SMSy=""
        
      }
      else
      {
         SMSy=" Введите Y <Br>"
         
      }
      resetError(document.body);

      if ((elems['InputX'][0].checked==true)||(elems['InputX'][1].checked==true)||
      (elems['InputX'][2].checked==true)||(elems['InputX'][3].checked==true)||
      (elems['InputX'][4].checked==true)||(elems['InputX'][5].checked==true)||
      (elems['InputX'][6].checked==true)||(elems['InputX'][7].checked==true)
      ||(elems['InputX'][7].checked==true))
      {
		        SMSx=""
		          
	    }
       	else
       	{
		        SMSx="<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Введите X </p> ";
	        }
	        if ((elems['InputR'][0].checked==true)||(elems['InputR'][1].checked==true)||
      (elems['InputR'][2].checked==true)||(elems['InputR'][3].checked==true)||
      (elems['InputR'][4].checked==true))
      {
		        SMSr=""
		          
	    }
       	else
       	{
		        SMSr="Введите R <Br>";
	        }
	      
     showError(document.body, SMSx+SMSy+SMSr);
    }
  </script>



</body>

</html>

Последний раз редактировалось Степан Адамов; 24.07.2019 в 22:26.
Степан Адамов вне форума   Ответить с цитированием
Старый 24.07.2019, 23:20   #4
web-coder
Форумчанин
 
Аватар для web-coder
 
Регистрация: 27.05.2019
Сообщений: 62
Репутация: 104
По умолчанию

Обращайтесь к форме через document и имя формы.
Код:
<form action="" name="formName">
	<button>Submit</button>
</form>
<script>
	document.formName.addEventListener('submit', function(e){
		e.preventDefault();
	});
</script>
__________________
Лучший сервис выбора хостинга по параметрам.
Более 600 тарифов. Есть промокоды!
web-coder вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация Marquick Java Базы данных (JDBC, JPA, Hibernate) 0 27.07.2018 10:41
Не работает валидация на js собственной формы. DanDiablo WordPress и другие CMS 2 11.07.2016 17:05
Ненавязчивая валидация ts-alan ASP.NET 1 23.07.2015 00:58
Валидация Yii KuckaMAXHATKA PHP 0 25.07.2014 14:33
Валидация Kapitann HTML и CSS 1 08.09.2010 12:37


03:03.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru