Я пытаюсь реализовать скрипт проверки формы JavaScript из Javascript-Coder.com, который можно найти здесь .
У меня он работает для элементов формы, но яинтересно, как заставить его работать с массивом.В частности, у меня есть форма на веб-странице здесь , к которой пользователь может добавлять строки.Тогда у меня есть следующая форма:
<form method="post" name="booking" id="booking" action="bookingengine.php">
<fieldset>
<h2>Waged/Organisation Rate</h2>
<p>
<input type="text" name="name[]" id="name">
<input type="text" name="email[]" id="email">
<input type="text" name="organisation[]" id="organisation">
<input type="text" name="position[]" id="position">
</p>
<p><span class="add">Add person</span></p>
</fieldset>
<fieldset>
<h2>Unwaged Rate</h2>
<p>
<input type="text" name="name2[]" id="name2">
<input type="text" name="email2[]" id="email2">
</p>
<p><span class="add">Add person</span></p>
</fieldset>
<p><input type="submit" name="submit" id="submit" value="Submit and proceed to payment page" class="submit-button" /></p>
</form>
В настоящее время скрипт проверки формы выглядит следующим образом:
<script language="JavaScript" type="text/javascript">
var frmvalidator = new Validator("booking");
frmvalidator.addValidation("email[]","req","Please enter a valid email address");
frmvalidator.addValidation("email[]","email","Please enter a valid email address");
</script>
Но, если пользователь добавляет вторую строку в верхнюю часть формы, скрипт проверяет только адрес электронной почты в первой строке, и мне интересно, как я могу получить его для проверки каждой строки, которая также добавляется в форму.
ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
По совету Melsi скрипт для генерации формы и обработки валидации был полностью переписан.Ответ Мелси, представленный ниже, включает в себя следующие функции, которые я запросил (большинство из которых были также в исходном скрипте):
- Форма теперь пуста при загрузке страницы, и все строки (текстовые поля)динамически добавляется пользователем с помощью кнопок.
- Значения по умолчанию для каждого текстового поля показывают, когда новая строка добавляется с уникальным цветом.
- Когда пользователь нажимает в каждом текстовом поле цвет дляизменения текста и фона.
- Кнопка «Удалить» добавлена в конец каждой строки, чтобы можно было удалять строки.
ВАЛИДАЦИЯ НЕОБХОДИМА
Для каждой строки необходимы следующие проверки:
- Имя : не «Имя» (сообщение: «Пожалуйста, введите ваше имя»), не более 100 символов(Сообщение: «Ваше имя должно содержать не более 100 символов»)
- E-mail : действительный адрес электронной почты (Сообщение: «Пожалуйста, введите действительный адрес электронной почты»), не более 100 символов (Сообщение: «Ваш адрес электронной почты должен быть менее 100 чараcters ")
- Позиция : не" Позиция "(сообщение:" Пожалуйста, введите вашу позицию или N / A, если не применимо "), не более 100 символов (Сообщение:" Ваша позиция должнабыть не более 100 символов ")
- Организация : не" Организация "(сообщение:" Пожалуйста, введите вашу организацию или N / A, если не применимо "), не более 100 символов (Сообщение:«Ваша организация должна содержать не более 100 символов»)
Тогда мне потребуется подтверждение для отправки формы, которая проверяет, что строка была добавлена в форму, с сообщением «Пожалуйста, добавьте хотя быодин человек в вашем бронировании "
Пример проверки:
//validate-name
box=document.getElementById(caller).name.charAt(0);
if(box=='n'){
if((document.getElementById(caller).value)=='Name')
{
alert('Please enter your name')
document.getElementById('message').innerHTML="<span>Please enter your name</span>";
//put focus back again if you like
document.getElementById(caller).focus();
return;
}
}
//if code comes here = validation success
document.getElementById(caller).style.backgroundColor = '#F5FEC1';
document.getElementById('message').innerHTML="<span style="+dbq+"background-color: #A3BB00"+ dbq+">Thanks!</span>";
}