У меня возникают проблемы с кодом, который я использую, чтобы проверить достоверность электронной почты перед отправкой его в базу данных. У меня есть код javascript, который проверяет электронную почту следующим образом:
Вот соответствующие части формы:
<form action="URLGOESHERE" method="post" name="someName" onSubmit="return validation();" id="formId">
<section class="sectionHeader">
<h2>Contact Information</h2>
<span class="important">*Required Fields</span>
</section>
<section id="contactInfo">
<fieldset>
<legend>Contact Information</legend>
<div id="contact">
<div class="inputGroupSameLine">
<label for="name" class="left"><span class="important">*</span>First Name:</label>
<input type="text" name="firstName" class="imp" size="20" maxlength="25" placeholder="John">
</div>
<div class="inputGroupSameLine">
<label for="name" class="left"><span class="important">*</span>Last Name:</label>
<input type="text" name="lastName" class="imp" size="20" maxlength="25" placeholder="Smith">
</div>
<div class="inputGroupSL">
<span class="left"><label for="org">Company/Group Name:</label></span>
<input type="text" name="org" size="30" maxlength="50" placeholder="Auburn University">
</div>
<div class="inputGroupSameLine">
<span class="left"><label for="email"><span class="important">*</span>Email:</label></span>
<input name='email' id='email' class="imp" type='text' size='45' maxlength='45' placeholder="[email protected]" />
</div>
<div class="inputGroupSameLine">
<span class="left"><label for="email2"><span class="important">*</span>Re-type Email:</label></span>
<input name='email2' id='email2' class="imp" type='text' size='45' maxlength='45' placeholder="[email protected]"/>
</div>
<div id="phoneGroup">
<span class="left"><span class="important">*</span>Phone #:</span>
<input name='phone' type='text' class="imp" id="phone" size='12' maxlength='20' placeholder="xxx-xxx-xxxx" />
</div>
<div id="extGroup">
<span class="left">Ext:</span>
<input name='ext' type='text' id="ext" size='12' maxlength='6' placeholder="xxxx" />
</div>
</div>
</fieldset>
</section>
И вот мой код, который работает onSubmit:
var reEMail=/^\w[\w\-\.]+\@\w[\w\-]+(\.[\w\-]+)+$/;
function validation() {
if (!checkImportant()) {
alert("Please enter information in all fields marked important.");
return false;
}
if (!checkAttendees())
return false;
if (!checkEmail($('#email'),$('#email2')))
return false;
return true;
}
function checkImportant() {
important = document.getElementsByClassName('imp');
for (i=0; i < important.length; i++) {
if($(important[i]).val() == "") {
$(important[i]).focus();
return false;
}
}
return true;
}
function checkAttendees() {
total = 0 + Number($('#numAttend').val());
parts = 0 + Number($('#8').val()) + 0 + Number($('#12').val()) + 0 + Number($('#16').val()) + 0 + Number($('#19').val()) + 0 + Number($('#26').val()) + 0 + Number($('#26').val()) + 0 + Number($('#55').val());
count = 0;
if (total != (parts)) {
alert('Please check to ensure you have entered the correct number of participants.');
count++;
if (count%2 == 0) {
$('#numAttend').focus();
return false;
}
else {
$('#8').focus();
return false;
}
}
return true;
}
function checkEmail(email,email2) {
if (goodEMail2(email)) {
if (email.val() != email2.val()) {
alert("Please check to make sure your email address is correct in both fields!");
email2.focus();
return false;
}
else return true;
}
else {
alert("Please input a valid email address");
setTimeout(function(){
$('#email').focus();
}, 100);
email.select();
return false;
}
return false;
}
function goodEMail2(field) {
return _checkIt2(reEMail, field);
}
function _checkIt2(re, field){
if (!re.test(field.val())) {
field.select();
field.focus();
return false;
}
else return true;
}
Как вы можете видеть в моей основной инструкции if else моей функции checkEmail, мне нужно использовать setTimeout для задержки фокусировки на поле электронной почты. Если я выберу setTimeout, страница не будет фокусироваться на элементе. Однако, если я выберу setTimeout и изменим указанный элемент на второе поле электронной почты, он будет работать.
Единственное исключение - IE10 (для тестирования в FF, Chrome, Safari и IE10).
Я действительно не хочу использовать эту работу, и я не понимаю, зачем мне это нужно. Может ли кто-нибудь дать мне несколько идей или ответов?
Благодарю!
РЕДАКТИРОВАТЬ: Кажется, я не могу сейчас взломать работу. Я не уверен, что он делал раньше... так что теперь focus() вообще не работает на этом конкретном элементе.
изменения:
function checkImportant() {
important = document.getElementsByClassName('imp');
for (i=0; i < important.length; i++) {
if($(important[i]).val() == "") {
$(important[i]).focus();
return false;
}
}
return true;
}
чтобы:
function checkImportant() {
important = document.getElementsByClassName('imp');
for (i=0; i < important.length; i++) {
if(important[i].value == "") { // drop the jQuery reference, not needed
important[i].focus(); // drop the jQuery reference, not needed
return false;
}
}
return true;
}
работал на меня в Chrome