Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2015, 15:46
Интересующийся
Отправить личное сообщение для beagle Посмотреть профиль Найти все сообщения от beagle
 
Регистрация: 11.02.2015
Сообщений: 18

Проверка формы
Доброго времени суток!

Помогите разобраться!
Ниже представлен код формы + скрипт
Форма проверяется с помощью javascript, если все ок, данные заносятся в базу с помощью db.php. На деле, сразу срабатывает db.php
Что необходимо, чтобы сначала поля проверялись а после записывались в базу?



<form name="insert" action="db.php" id="form" method="post">
   
   
   <input name="company" id="company" type="text" onclick="setBorder('company')" value="Название компании" onfocus="if (this.value=='Название компании') this.value='' "onblur="if (this.value==''){this.value='Название компании'}" ><div id="company_err"></div><br />
   
   
   <input name="name" id="name" type="text" onclick="setBorder('name')" value="ФИО" onfocus="if (this.value=='ФИО') this.value='' "onblur="if (this.value==''){this.value='ФИО'}" ><div id="name_err"></div><br />
   
    <input name="mail" id="mail" type="text" onclick="setBorder('mail')" value="Электронная почта" onfocus="if (this.value=='Электронная почта') this.value='' "onblur="if (this.value==''){this.value='Электронная почта'}" ><div id="mail_err"></div><br />
    
  <input name="phone"  id="phone" type="text" onclick="setBorder('phone')"  value="Номер телефона" onfocus="if (this.value=='Номер телефона') this.value='' "onblur="if (this.value==''){this.value='Номер телефона'}" ><div id="phone_err"></div><br />
  
   

<input class="regbtn" onclick="checkForm()" type="submit" value="Участовать" name="button"></div>


function checkForm() {

var err = 0;

if (document.getElementById("company").value == 'Название компании') {

document.getElementById("company").style.border = "1px solid #FF0000";
document.getElementById("company_err").innerHTML = "поле не заполнено";
err = 1;

}

if (document.getElementById("name").value == 'ФИО') {

document.getElementById("name").style.border = "1px solid #FF0000";
document.getElementById("name_err").innerHTML = "поле не заполнено";
err = 1;

}

var email = document.getElementById('mail').value;
emailTest = "^[_.0-9a-z-]+@([0-9a-z][0-9a-z_-]+.)+[a-z]{2,4}$";
var regex = new RegExp(emailTest); 

if (!regex.test(email)) {

document.getElementById("mail").style.border = "1px solid #FF0000";
document.getElementById("mail_err").innerHTML = "не корректный e-mail";
err = 1;

}


if (document.getElementById("phone").value == 'Номер телефона') {

document.getElementById("phone").style.border = "1px solid #FF0000";
document.getElementById("phone_err").innerHTML = "укажите ваш номер телефона";
err = 1;

}

if (err == 0) document.getElementById("form").submit();

}

function setBorder(id) {

document.getElementById(id).style.border = "1px solid #C0C0C0";
document.getElementById(id+"_err").innerHTML = "";

}

Последний раз редактировалось beagle, 11.02.2015 в 15:53.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2015, 16:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от beagle
Что необходимо, чтобы сначала поля проверялись а после записывались в базу?
Правильно использовать событие onsubmit формы...

Пример...
http://www.wisdomweb.ru/JS/formval.php

Последний раз редактировалось ksa, 11.02.2015 в 16:08.
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2015, 16:21
Интересующийся
Отправить личное сообщение для beagle Посмотреть профиль Найти все сообщения от beagle
 
Регистрация: 11.02.2015
Сообщений: 18

Если не сложно, на примере выше представленного кода объясните)!
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2015, 16:22
Интересующийся
Отправить личное сообщение для beagle Посмотреть профиль Найти все сообщения от beagle
 
Регистрация: 11.02.2015
Сообщений: 18

также отправляется без проверки!
Ответить с цитированием
  #5 (permalink)  
Старый 11.02.2015, 16:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

Сообщение от beagle
также отправляется без проверки!
Да брось!

<!DOCTYPE html>
<html ng-app>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
function ok(){
	if (document.getElementById('name').value=='') {
		alert('Name is empty...');
		return false;
	} 
	return true;
};
</script>
</head>
<body> 
<form onsubmit='return ok();'>
	<label>Name
		<input id='name' type='text' />
	</label>
	<button>Send</button>
</form>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 12.02.2015, 14:36
Интересующийся
Отправить личное сообщение для beagle Посмотреть профиль Найти все сообщения от beagle
 
Регистрация: 11.02.2015
Сообщений: 18

в контексте приведенного мной кода, что необходимо добавить чтобы в начале проверялись поля а после срабатывал пхп? спасибо).
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2015, 13:31
Интересующийся
Отправить личное сообщение для beagle Посмотреть профиль Найти все сообщения от beagle
 
Регистрация: 11.02.2015
Сообщений: 18

Сделал в соответствии с вашим советом, почему-то не срабатывает проверка, возможно где-то в коде накосячил??
<html>
<head>
<script type="text/javascript">
function validate(){
   //Считаем значения из полей name и email в переменные x и y
   var v=document.forms["form"]["company"].value;
   var w=document.forms["form"]["jab"].value;
   var x=document.forms["form"]["name"].value;
   var y=document.forms["form"]["mail"].value;
   var z=document.forms["form"]["phone"].value;
   //Если поле name пустое выведем сообщение и предотвратим отправку формы
     if (v.length==0){
      document.getElementById("companyf").innerHTML="*данное поле обязательно для 
      заполнения";
      return false;
   }
    if (w.length==0){
      document.getElementById("jabf").innerHTML="*данное поле обязательно для 
      заполнения";
      return false;
   }
   
   if (x.length==0){
      document.getElementById("namef").innerHTML="*данное поле обязательно для 
      заполнения";
      return false;
   }
   //Если поле email пустое выведем сообщение и предотвратим отправку формы
   if (y.length==0){
      document.getElementById("mailf").innerHTML="*данное поле обязательно для 
      заполнения";
      return false;
   }
   //Проверим содержит ли значение введенное в поле email символы @ и .
   at=y.indexOf("@");
   dot=y.indexOf(".");
   //Если поле не содержит эти символы знач email введен не верно
   if (at<1 || dot <1){
      document.getElementById("mailf").innerHTML="*email введен не верно";
      return false;
   }
   if (z.length==0){
      document.getElementById("phonef").innerHTML="*данное поле обязательно для 
      заполнения";
      return false;
   }
}
</script>
</head>
<body>
<form name="form" onsubmit="return validate()">
Компания: <input type="text" name="company"> <span style="color:red" id="companyf"></span><br />
Должность: <input type="text" name="jab"> <span style="color:red" id="jabf"></span><br />
Имя: <input type="text" name="name"> <span style="color:red" id="namef"></span><br />
И-mail: <input type="text" name="mail"> <span style="color:red" id="mailf"></span><br />
Телефон: <input type="text" name="phone"> <span style="color:red" id="phonef"></span>

<br /><input type="submit" value="Отправить форму">
</form>
<p><b>Обратите внимание:</b> попробуйте отправить на сервер форму не заполнив все поля.</p>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2015, 15:11
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Uncaught SyntaxError: Unexpected token ILLEGAL
Строки должны распологаться на одной строке

<html>
<head>
<script type="text/javascript">
function validate(){
   //Считаем значения из полей name и email в переменные x и y
   var v=document.forms["form"]["company"].value;
   var w=document.forms["form"]["jab"].value;
   var x=document.forms["form"]["name"].value;
   var y=document.forms["form"]["mail"].value;
   var z=document.forms["form"]["phone"].value;
   var allowToSend = true;
   var msg = "* данное поле обязательно для заполнения";
   //Если поле name пустое выведем сообщение и предотвратим отправку формы
   document.getElementById("companyf").innerHTML=/^\s*$/.test(v)?(allowToSend = false,msg):"";
   document.getElementById("jabf").innerHTML=/^\s*$/.test(w)?(allowToSend = false,msg):"";
   document.getElementById("namef").innerHTML=/^\s*$/.test(x)?(allowToSend = false,msg):"";

   //Если поле email пустое выведем сообщение и предотвратим отправку формы
   document.getElementById("mailf").innerHTML=!(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(y))?(allowToSend = false,msg):"";

   document.getElementById("phonef").innerHTML=/^\s*$/.test(z)?(allowToSend = false,msg):"";
  
   return allowToSend;
}
</script>
</head>
<body>
<form name="form" onsubmit="return validate()">
Компания: <input type="text" name="company"> <span style="color:red" id="companyf"></span><br />
Должность: <input type="text" name="jab"> <span style="color:red" id="jabf"></span><br />
Имя: <input type="text" name="name"> <span style="color:red" id="namef"></span><br />
И-mail: <input type="text" name="mail"> <span style="color:red" id="mailf"></span><br />
Телефон: <input type="text" name="phone"> <span style="color:red" id="phonef"></span>

<br /><input type="submit" value="Отправить форму">
</form>
<p><b>Обратите внимание:</b> попробуйте отправить на сервер форму не заполнив все поля.</p>
</body>
</html>


Подправил логику проверки: если значение поля соответствует regexp, то предупреждение изчезнет
P. S. Но имейте в виду, что не следует полагаться только на проверки JavaScript. JavaScript может быть легко отключен. Это также должно быть проверено на стороне сервера.
Ответить с цитированием
  #9 (permalink)  
Старый 13.02.2015, 15:33
Интересующийся
Отправить личное сообщение для beagle Посмотреть профиль Найти все сообщения от beagle
 
Регистрация: 11.02.2015
Сообщений: 18

проверка работает, а в базу почемуто не отправляется.
что не так делаю?
<form name="form" action="db.php" onsubmit="return validate()">
Ответить с цитированием
  #10 (permalink)  
Старый 13.02.2015, 15:48
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Должны быть заполнены все поля. Также укажите нужный method
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка формы housewm Events/DOM/Window 6 13.01.2014 14:30
проверка формы не работает в ie begelme Javascript под браузер 6 13.08.2013 01:00
проверка формы на изменение полей, кроме одного! cmygeHm ExtJS 14 13.04.2011 18:27
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
Простая проверка формы. Добавить "динамики". Jurasmi Элементы интерфейса 3 07.04.2010 16:48