Валидация формы - JavaScript, Ajax

Степан Адамов · 24.07.2019, 16:04

Здравствуйте.Я создал форму,проверка котороый должна осуществляться на 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,но этого не происходит.Почему?

Naive · 24.07.2019, 20:24

event твой undefined, скрипт соответственно ломается и форма отсылается стандартными методами html

Степан Адамов · 24.07.2019, 21:02

Цитата:

Сообщение от 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>

web-coder · 24.07.2019, 22:20

Обращайтесь к форме через document и имя формы.

Код:

<form action="" name="formName">
	<button>Submit</button>
</form>
<script>
	document.formName.addEventListener('submit', function(e){
		e.preventDefault();
	});
</script>

24.07.2019, 20:24	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	event твой undefined, скрипт соответственно ломается и форма отсылается стандартными методами html Alar, верни репу!

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

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

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