jquery - 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>

最佳答案

我认为答案可能在于您在评估每个输入时正在显示和隐藏“提交”按钮。相反，我立即隐藏了提交按钮，并更改了“ 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 Bin http://jsbin.com/eyexa4/3/edit上可用