2010-03-09 86 views
2

這是一個表單驗證,如果輸入字段無效,將隱藏提交按鈕,並在所有輸入字段都有效時顯示它。jquery表單驗證> FIREFOX問題

爲什麼firefox中的提交按鈕在所有輸入重新生效之後都保持隱藏狀態,而這在其他瀏覽器中沒有發生?

這是有問題的JavaScript:

$(document).ready(function(){ 
$("input[type='text'],input[type='password']").focus(function(){ 
    $(this).siblings('.hideit').removeClass('hideit').parent('div').addClass('phover').siblings('div').removeClass('phover').children('p,strong:not(.invalid,.valid,.hidev)').addClass('hideit'); 
}); 
$("input[type='text'],input[type='password']").blur(function(){ 
    $(this).siblings('p,strong:not(.invalid,.valid,.hidev)').addClass('hideit').parent('div').removeClass('phover'); 
}); 
$("input[type='text'],input[type='password']").change(function(){ 
    var theval = $(this).val(); 
    var theexp = $(this).attr("reg"); 
    var ivalid = new RegExp(theexp); 
    if (theval.search(ivalid) == -1) { 
     $(this).siblings('strong.hidev,strong.valid').removeClass('hidev valid').addClass('invalid').text("x"); 
     showsubmit($(this)); 
     } else { 
      $(this).siblings('strong.hidev,strong.invalid').removeClass('hidev invalid').addClass('valid').text("="); 
      showsubmit($(this)); 
    } 

}); 
function showsubmit(x){ 
    $("input[type='text'],input[type='password']").each(function(){ 
      var getval = $(this).val(); 
      var getreg = $(this).attr("reg"); 
      var itest = new RegExp(getreg); 
      if (getval.search(itest) == -1) { 
       $("p.sub").fadeOut(1000); 
       return false; 
      } else { 
      $("p.sub").fadeIn(1000); 
      return true; 
      } 
    }); 
} 

}); 

<div id="formb"> 
    <form name="tform1" id="form1"> 
     <div ><label for="names">NAMES:</label><strong class="prepend-2 hideit">Your names (Last, First and/or middle).</strong><br /><input type="text" name="name" id="names" reg="^([a-zA-Z]{2,},)((\s[a-zA-Z]{2,})|(\s[a-zA-Z]{2,}){2})$" /><strong class="hidev"></strong><p class="prepend-2 hideit hintf">example: BILL, GATES JOHN</p></div> 
     <div><label for="usern">USERNAME:</label><strong class="prepend-4 hideit">Choose a username.</strong><br /><input type="text" name="user" id="usern" reg="^[a-zA-Z]{6,}$" /><strong class="hidev"></strong><p class="prepend-1 hideit hintf">min 6, without special character or numbers</p></div> 

     <div><label for="userp">PASSWORD:</label><strong class="prepend-4 span-3 hideit">Choose a password.</strong><br /><input type="password" name="pass" id="userp" reg="^(?=.*[0-9]+.*)(?=.*[a-zA-Z]+.*)(?=.*[#@!&]+.*)[0-9a-zA-Z#@!&]{6,}$" /><strong class="hidev"></strong><p class="hintf hideit">min. 6, must contain alphabet(s), number(s) & xter(#, @, &, !)</p></div> 
     <div><label for="email">E-MAIL ADDRESS:</label><strong class="prepend-2 hideit">Input your email address.</strong><br /><input type="text" name="mail" id="email" reg="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})$" /><strong class="hidev"></strong><p class="prepend-2 hideit hintf">E-mail address must be valid for usage.</p></div> 

      <p class="sub"> 
       <input type="submit" value="Submit" /> 

      </p> 

    </form> 
</div> 
+12

泡泡糖粘在你的「大寫鎖定」鍵? – Pointy

+0

大寫鎖定在最左邊,就在tab鍵下。 –

+0

請不要寫全部大寫:這相當於大喊大叫,只會讓一些人「遮住他們的耳朵」... – siukurnin

回答

4

我認爲,答案可能在於這樣的事實,你是在顯示和隱藏您在評估每個輸入提交按鈕。相反,我立即隱藏了提交按鈕,並將「showsubmit」更改爲這樣。

function showsubmit(x){ 
var hideIt = 0; 
$("input[type='text'],input[type='password']").each(function(){ 
    var getval = $(this).val(); 
    var getreg = $(this).attr("reg"); 
    var itest = new RegExp(getreg); 
    hideIt |= (getval.search(itest) == -1); 
}); 
if (hideIt) { 
    if ($("p.sub").is(":visible")) { 
     $("p.sub").fadeOut(1000); 
    } 
    return false; 
} else { 
    $("p.sub").fadeIn(1000); 
    return true; 
} 
} 

樣品可以用JS斌http://jsbin.com/eyexa4/3/edit

+0

感謝噓!測試和工作很好... – Joberror

+0

嗨jedatu!我在JS BIN網站上測試了它,它完美的工作,但沒有在本地工作,可能是錯誤的。即使我將生成的JS BIN HTML代碼複製到我的本地文件仍然在firefox上相同.. – Joberror

+0

JS Bin版本上的jQuery版本是否與您的項目相同? – jedatu