yahoo5000 yahoo5000 - 6 months ago 18
jQuery Question

Check function is not working variable meaning unchanged

Hello I have a register scrip in jQuery witch only validates a field, everything is working except the last part where I create a variable check and set its meaning to 0. On the checks if everything is okay it will change to 1, if not to 0 and at the end if != to 0 show the next button div. Even if I fill in those fields correctly it doesn't show, and that probably means that the meaning stays unchanged, because if I set a variable meaning to 1 where i was declared , the button appears. Here is code of my script :

<script type="text/javascript">
//password validation ==================================
var check = 0;
$(document).ready(function() {
$('input[name*="password"]').keyup(validatepass);
});

function validatepass(){
var password = $('input[name="password"]').val();
var repassword = $('input[name="repassword"]').val();
var isValid = /^[a-zA-Z0-9]*$/.test(password);
var length = password.length;

if (isValid && (length > 4) && (length < 16)){
if(password == repassword){
$('input[name="password"]').attr('class', 'valid');
$('input[name="repassword"]').attr('class', 'valid');
check = 1;
} else {
$('input[name="repassword"]').attr('class', 'invalid');
check = 0;
}

if(password == ""){
$('input[name="password"]').attr('class', 'invalid');
$('input[name="repassword"]').attr('class', 'invalid');
check = 0;
} else {
$('input[name="password"]').attr('class', 'valid');
check = 1;
}

} else {
$('input[name="password"]').attr('class', 'invalid');
$('input[name="repassword"]').attr('class', 'invalid');
check = 0;
}
}
//username validation ========================
$(function () {

jQuery('#username').on('input', function () {

$("#username").removeClass();

var username = $(this).val();
var isValid = /^[a-zA-Z0-9]*$/.test(username);
var length = username.length;
if (isValid && (length > 4) && (length < 16)){
$("#username").addClass("valid");
check = 1;
} else {
$("#username").addClass("invalid");
check = 0;
}
});
});
//Email validation-------------------------------
$(function () {

jQuery('#email').on('input', function () {

$("#email").removeClass();

var username = $(this).val();
var isValid = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(username);
if (isValid){
$("#email").addClass("valid");
check = 1;
} else {
$("#email").addClass("invalid");
check = 0;
}
});
});
/// button show if everything is ok
$(document).ready(function() {
if(check != 0){
$("#loginsubmitbutton2").show();
}
});



</script>

Answer

I had to rework some of your code, have a look at the whole fiddle here:

https://jsfiddle.net/nkq8gc8z/4/

The main thing I did:

On every input event, check if the amount of <input> fields that exist in your form is the same as the amount of <input> fields with the class valid. Because if that's the case, all your fields are validated and you can show the button.

This means there is no more need for a check variable.

What you mainly did wrong was this code:

$(document).ready(function() {
    if(check != 0){
        $("#loginsubmitbutton2").show();
    }
});

It checks if the check variable is not 0 AS SOON AS the page loads. You set your check to 0 at the top of your script, meaning it will ALWAYS be 0 when this part of your code runs, so the button is never shown.

Comments