無法使用.focus（）專注於在Chrome，Safari和FF中使用ID的輸入

Question

我正在使用代碼將問題發送到數據庫之前檢查電子郵件有效性。我有一個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="youremail@example.com" /> 
      </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="youremail@example.com"/> 
      </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; 
} 

正如你可以在我的checkEmail函數的main if else語句中看到的，我不得不使用setTimeout來延遲對電子郵件字段的關注。如果我拿出setTimeout，頁面將不會重點關注元素。但是，如果我取出setTimeout並將指定的元素更改爲第二個電子郵件字段，它將起作用。

唯一的例外是IE10（我在FF，Chrome，Safari和IE10測試）。

我真的不想使用這項工作，我不明白爲什麼我需要。任何人都可以給我一些想法或答案嗎？

謝謝！

編輯：似乎無法讓我的黑客現在的工作。我不確定它之前在做什麼......所以現在focus（）在該特定元素上根本不起作用。

Answer 1

變化：

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工作對我來說