Подтвердить форму на стороне клиента

Я хочу проверить форму на стороне клиента (перед отправкой на сервер). У меня есть скрипт для поиска специальных символов (~! @ #) И т. Д. Если хотя бы один существует, форма не должна быть отправлена до тех пор, пока пользователь не исправит ошибку (ошибки). Вот моя форма:Подтвердить форму на стороне клиента

<form id="setUp" method="post" action="Usercontact.php"> 
<table id="contact"> 
<tbody> 
<tr> 
<th class="cdtl">Name of user:</td> 
<td><input type="text" name='username' required /></td> 
</tr> 
<tr> 
<th class="cdtl">Course</td> 
<td><input type="text" name='useraddy1' required /></td> 
</tr> 
<tr> 
<th class="cdtl">Telephone</td> 
<td><input type="text" name='userfone' required /></td> 
</tr> 
<tr> 
<th class="cdtl">e-mail Address</td> 
<td><input type="email" name='schemail' required /></td> 
</tr> 
</tbody> 
</table> 
<br> 
<input id="postform" type="submit" onclick="err()" value="Submit form"> 
</form>

Ниже приведен сценарий

<script> 
function err() { 
    var tbl = document.getElementById("contact"); 
    var name = tbl.rows[0].cells[1].getElementsByTagName("input")[0].value; 
    var addy = tbl.rows[1].cells[1].getElementsByTagName("input")[0].value; 
    var fone = tbl.rows[2].cells[1].getElementsByTagName("input")[0].value; 
    var email = tbl.rows[3].cells[1].getElementsByTagName("input")[0].value; 

    var namepos = name.lastIndexOf("~`[email protected]#$%^&*)(+=}{][|\:;'.'/"',>?<"); 
    var addypos = addy.lastIndexOf("~`[email protected]#$%^&*)(+=}{][|\:;'.'/"',>?<"); 
    var fonepos = fone.lastIndexOf("~`[email protected]#$%^&*)(+=}{][|\:;'.'/"',>?<"); 
    var emailpos = name.lastIndexOf("~`[email protected]#$%^&*)(+=}{][|\:;'.'/"',>?<"); 

    if (namepos !== -1 || addypos !== -1 || fonepos !== -1 || emailpos !== 
    -1) { 
     document.getElementById("postform").addEventListener("click", 
     function(event){ 
     event.preventDefault() 
     }); 
    } 
} 
</script>

Пожалуйста, почему этот сценарий не работает. Форма отправляется, даже если в любом из полей ввода есть специальные символы. Цените

источник

2015-08-23 Olu Adabonyan

Вне темы, но поскольку вы используете один и тот же вызов 'indexOf()', используя одно и то же регулярное выражение несколько раз, вы действительно должны сделать эту функцию, а не повторять сам. Помните: держите [DRY] (https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). –

использовать 'onsubmit' вместо' onclick' –

У вас есть взгляд на использование атрибута pattern для HTML 5 - не поддержка покупки Safari, но его тоже можно посмотреть - http://www.w3schools.com/tags/ att_input_pattern.asp – TrojanMorse

Эта линия:

var namepos = name.lastIndexOf("~`[email protected]#$%^&*)(+=}{][|\:;'.'/"',>?<");

проверяет для всей строки ("~` @ # $%^& *!) (+ =} {] [|:;». '/"' ?.,> < «), а не каждый символ

Как указывается в комментариях, вы можете использовать атрибут шаблона HTML5:

<input name="name" pattern="[A-Za-z]{3,12}">

Это потребует имя включать только буквы и диапазон в длину от От 3 до 12 ча racters.

Чтобы использовать регулярные выражения для проверки для всех символов, которые вы перечислили, вы можете использовать:

var re=/[~`[email protected]#$%^&*)(+=}{\]\[|\:;'.'\"',>?<]/ 
var str="[email protected]"; 

if (re.test(str)) { 
    console.log('The string has one of the characters'); 
} else { 
    console.log('The string does not have any of the characters'); 
}

источник

2015-08-24 00:19:51 user2182349

Даже если вы не собираетесь использовать метод шаблона, всегда лучше указать, какие символы вы хотите принять, а не то, что вы хотите отказать. –

@ user2182349 и Jacque Goupil txs для ввода. Я применил ваш с другими выше, и теперь у меня есть рабочий документ. Я воспроизвел ниже новый документ. –

Вам нужно включить событие. PreventDefault() .. Это предотвратит отправку формы, если вы найдете символы, которые вы проверяете, или что-то еще, что вы можете проверить.

источник

2015-08-24 00:47:14 JVM

Эти предложения выше, у меня сейчас рабочий документ следующим образом:

<form id="setUp" method="post" action="Usercontact.php"> 
<table id="contact"> 
<tbody> 
<tr> 
<th class="cdtl">Name of user:</td> 
<td><input type="text" name='username' required pattern="[A-Za-z0-9.-_] 
{5,12}"/></td> 
</tr> 
<tr> 
<th class="cdtl">Course</td> 
<td><input type="text" name='useraddy1' required pattern="[A-Za-z0-9]{5,15}" 
/></td> 
</tr> 
<tr> 
<th class="cdtl">Telephone</td> 
<td><input type="text" name='userfone' required pattern="[0-9.-_]{6,15}" />  
</td> 
</tr> 
<tr> 
<th class="cdtl">e-mail Address</td> 
<td><input type="email" name='schemail' required pattern="[[email protected]]" 
/></td> 
</tr> 
</tbody> 
</table> 
<br> 
<input id='submit' type="submit" value="Submit form"> 
</form>

Сценарий был удален, поскольку нет никакой потребности в этом.

источник

2015-08-25 19:50:26

Подтвердить форму на стороне клиента

ответ

Смежные вопросы