Не удается получить .focus () для фокусировки на входе с идентификатором в Chrome, Safari и FF

0

У меня возникают проблемы с кодом, который я использую, чтобы проверить достоверность электронной почты перед отправкой его в базу данных. У меня есть код javascript, который проверяет электронную почту следующим образом:

  1. Посмотрите, является ли первое электронное письмо действительным адресом электронной почты
  2. Посмотрите, совпадают ли два поля электронной почты

Вот соответствующие части формы:

<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() вообще не работает на этом конкретном элементе.

Теги:
forms
focus

1 ответ

0
Лучший ответ

изменения:

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

  • 0
    Спасибо за это - но это не та область, с которой у меня проблемы - это электронная почта, на которой я не могу сосредоточиться.
  • 0
    электронная почта работает и для меня: jsfiddle.net/zyVFF/1
Показать ещё 11 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню