CODEWITHSUNDEEP
jqueryvalidationfirefox
Joberror
Joberror

Reputation: 5890

jquery form validation > FIREFOX PROBLEM

This is a form validation that will hide the submit button if the input field(s) are not valid, and show it if all the input fields are valid.

Why is the submit button kept invisible in firefox after all inputs have been made valid once again, when that doesn't happen in other browsers?

This is the javascript in question:

$(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>

Upvotes: 2

Views: 1594

Answers (1)

jedatu
jedatu

Reputation: 4133

I think the answer may lie in the fact that you are showing and hiding the submit button as you evaluate each input. Instead, I hid the submit button right away and changed "showsubmit" to look like this. 

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;
}
}

The sample is available on JS Bin http://jsbin.com/eyexa4/3/edit

Upvotes: 4

Related Questions