Форум

PSV · #1 (**permalink**) 09.03.2015, 14:58

Всем привет. У меня возник вопрос по формам. Не могу найти как делать перезаполнение формы в случае ошибки? Например есть 4 поля три ввели а четвертое или ввели или неправильно ввели. Вылезло сообщение об ошибки и все поля стали пусты. Я же хочу что бы все поля заполненные таковыми и оставались а на незаполненом поле стоял курсор. Если кто знает подскажите пожалуйста. Заранее всех благодарю!

рони · #2 (**permalink**) 09.03.2015, 15:00

PSV,
где код?

PSV · #3 (**permalink**) 09.03.2015, 15:19

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TZ</title>
<style>
.light::-webkit-input-placeholder {color:blue;opacity: 0.5}
.light::-moz-placeholder {color:blue;opacity: 0.5}
.light:-moz-placeholder {color:blue;opacity: 0.5}
.light:-ms-input-placeholder {color:blue;opacity: 0.5}

.highlight::-webkit-input-placeholder {color:blue;opacity: 0}
.highlight::-moz-placeholder {color:blue;opacity: 0}
.highlight:-moz-placeholder {color:blue;opacity: 0}
.highlight:-ms-input-placeholder {color:blue;opacity: 0}

</style>
<script>

function validate(){
var fn_val=document.forms["Myform"].elements["fname"].value;
var ln_val=document.forms["Myform"].elements["lname"].value;
var job_val=document.forms["Myform"].elements["job"].value;
var com_val=document.forms["Myform"].elements["company"].value;
if(fn_val == ""){
alert('Имя должно быть обязательно введено')
fname.focus = function() {this.className='highlight'}
}
if (ln_val == "") {
alert('Фамилия должна быть обязательно введена')
lname.focus = function() {this.className='highlight'}
}
if(job_val == ""){
alert('Должность должна быть обязательно введена')
job.focus = function() {this.className='highlight'}
}
if (com_val == "") {
alert('Компания должна быть обязательно введена')
company.focus = function() {this.className='highlight'}
}
}

function checkLname(){
var fn_val=document.forms["Myform"].elements["fname"].value;
var ln_val=document.forms["Myform"].elements["lname"].value;
var job_val=document.forms["Myform"].elements["job"].value;
var com_val=document.forms["Myform"].elements["company"].value;
var r =/([a-z]+)/i;
if (fn_val.search(r)< 0){alert("Некорректное введено имя!")}
if (ln_val.search(r)< 0){alert("Некорректно введена фамилия!")}
if (job_val.search(r)< 0){alert("Некорректно введена должность!")}
if (com_val.search(r)< 0){alert("Некорректно введена компания!")}
}
</script>

</head>
<body>

<form name="Myform">
<input type="text" class="light" id="fn" name="fname" placeholder="First name" onfocus="focusElem(this)" onblur="blurElem(this)" >
<input type="text" class="light" id="ln" name="lname" placeholder="Last name" onfocus="focusElem(this)" onblur="blurElem(this)" >
<br>
<input type="text" class="light" id="j" name="job"placeholder="Job" onfocus="focusElem(this)" onblur="blurElem(this)">
<input type="text" class="light" id="com" name="company" placeholder="Company" onfocus="focusElem(this)" onblur="blurElem(this)">
<br>
<input type="submit" value="Send" onclick="validate(); checkLname()">

</form>

<script>

function focusElem (elem) {
elem.className='highlight';
}
function blurElem (elem) {
elem.className ='light';
}

</script>
</body>
</html>

laimas · #4 (**permalink**) 09.03.2015, 15:38

var fn_val=document.forms["Myform"].elements["fname"].value;
var ln_val=document.forms["Myform"].elements["lname"].value;
var job_val=document.forms["Myform"].elements["job"].value;
var com_val=document.forms["Myform"].elements["company"].value;
var r =/([a-z]+)/i;
if (fn_val.search(r)< 0){alert("Некорректное введено имя!")}
if (ln_val.search(r)< 0){alert("Некорректно введена фамилия!")}
if (job_val.search(r)< 0){alert("Некорректно введена должность!")}
if (com_val.search(r)< 0){alert("Некорректно введена компания!")}

У вас один паттерн для всех полей формы -зачем же вы получаете значения каждого поля отдельной строкой, отдельной же строкой производите проверку, почему не делаете это в цикле получая поле и проверяя его?

PSV · #5 (**permalink**) 09.03.2015, 15:53

Я не знаю как это делать в цикле. Ну даже если и так как это влияет на заполненность? У меня все пропадает после вывода ошибки, как будто перегружается страница!

рони · #6 (**permalink**) 09.03.2015, 15:57

Сообщение от PSV

как будто перегружается страница

это так

рони · #7 (**permalink**) 09.03.2015, 16:01

PSV,
примерно так
структура -- сократить много можно

<!DOCTYPE HTML>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>TZ</title>
 <style>
 .light::-webkit-input-placeholder {color:blue;opacity: 0.5}
 .light::-moz-placeholder {color:blue;opacity: 0.5}
 .light:-moz-placeholder {color:blue;opacity: 0.5}
 .light:-ms-input-placeholder {color:blue;opacity: 0.5}

 .highlight::-webkit-input-placeholder {color:blue;opacity: 0}
 .highlight::-moz-placeholder {color:blue;opacity: 0}
 .highlight:-moz-placeholder {color:blue;opacity: 0}
 .highlight:-ms-input-placeholder {color:blue;opacity: 0}

 </style>
 <script>

 function validate(){
 var fn_val=document.forms["Myform"].elements["fname"].value;
 var ln_val=document.forms["Myform"].elements["lname"].value;
 var job_val=document.forms["Myform"].elements["job"].value;
 var com_val=document.forms["Myform"].elements["company"].value;
/* if(fn_val == ""){
 alert('Имя должно быть обязательно введено')
fname.focus = function() {this.className='highlight'}
 }
 if (ln_val == "") {
 alert('Фамилия должна быть обязательно введена')
lname.focus = function() {this.className='highlight'}
 }
 if(job_val == ""){
 alert('Должность должна быть обязательно введена')
job.focus = function() {this.className='highlight'}
 }
 if (com_val == "") {
 alert('Компания должна быть обязательно введена')
company.focus = function() {this.className='highlight'}
 }*/
return (checkLname() && com_val && job_val && ln_val && fn_val)
 }


 function checkLname(){
 var fn_val=document.forms["Myform"].elements["fname"].value;
 var ln_val=document.forms["Myform"].elements["lname"].value;
 var job_val=document.forms["Myform"].elements["job"].value;
 var com_val=document.forms["Myform"].elements["company"].value;
 var r =/([a-z]+)/i;
 if (fn_val.search(r)< 0){alert("Некорректное введено имя!")}
if (ln_val.search(r)< 0){alert("Некорректно введена фамилия!")}
if (job_val.search(r)< 0){alert("Некорректно введена должность!")}
if (com_val.search(r)< 0){alert("Некорректно введена компания!")}
   return (fn_val.search(r) != -1 && ln_val.search(r)!= -1  && job_val.search(r)!= -1 && com_val.search(r) != -1)
}
 </script>

 </head>
 <body>

 <form name="Myform"  onsubmit="return validate()">
 <input type="text" class="light" id="fn" name="fname" placeholder="First name" onfocus="focusElem(this)" onblur="blurElem(this)" >
 <input type="text" class="light" id="ln" name="lname" placeholder="Last name" onfocus="focusElem(this)" onblur="blurElem(this)" >
 <br>
 <input type="text" class="light" id="j" name="job"placeholder="Job" onfocus="focusElem(this)" onblur="blurElem(this)">
 <input type="text" class="light" id="com" name="company" placeholder="Company" onfocus="focusElem(this)" onblur="blurElem(this)">
 <br>
 <input type="submit" value="Send" >

 </form>

 <script>

 function focusElem (elem) {
 elem.className='highlight';
 }
 function blurElem (elem) {
 elem.className ='light';
 }

 </script>
 </body>
 </html>

рони · #8 (**permalink**) 09.03.2015, 16:02

PSV,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

laimas · #9 (**permalink**) 09.03.2015, 16:14

Как, обычно, обойти в цикле элементы формы, передав их в функцию:

[ntml]<input type="submit" value="Send" onclick="validate(this.form.elements)">[/hml]

Но лучше не передавать в функцию по щелчку кнопки отправки, а зайдествовать событие формы onsubmit:

<form name="Myform">
[ntml]<form name="Myform" onsubmit="return validate(this.elements)">
....
<input type="submit" value="Send">[/hml]

Функцию checkLname() выкинуть, так как она у вас ничем полезным не занимается - alert('Имя должно быть обязательно введено') и alert("Некорректное введено имя!") это результат проверки, разница лишь в условии, а значит это может с успехом выполнить одна функция.

Функция validate(e) должна иметь параметр (например как тут, е), который и содержит массив всех элементов формы переданный ей по нажатию кнопки отправки, что инициализирует событие onsubmit.

Ну а далее цикл (в функции validate):

for(var i=0, k=e.length; i<k; i++) {
   //проверка значения полей
   //и каждое поле может иметь атрибут pattern описывающий условие проверки поля
}

Зайдите сюда там о проверке полей формы, правда под jQuery, но это не важно, важно понять принцип, а на чем написать, это уже вторичное.

После этого можно и продолжить.

PSV · #10 (**permalink**) 09.03.2015, 16:19

как будто перегружается страница
- это как нажать на кнопку "обновить страницу"

Форум

Справочник

Discord чат

Курсы javascript