Disable and enable submit button in jQuery if else condition

Question

I tried to disable and enable the submit button depending on certain conditions in if else with Javascript so that the submit button will not active without verifying all the validations. But despite all the validations being validated, the submit button is not enabled, why? I have tried many times.

function isValidFullname(input) {
    var fullnameregex = /^([a-zA-Z\-_ ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;

    if (fullnameregex.test(input)) {
        return true;
    } else {
        return false;
    }
}

function isValidUsername(input) {
    var usernameregex = /^[a-z0-9_-]{3,16}$/;

    if (usernameregex.test(input)) {
        return true;
    } else {
        return false;
    }
}

function isValidEmail(input) {
    var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (emailregex.test(input)) {
        return true;
    } else {
        return false;
    }
}

function isValidPassword(input) {
    var passwordregex = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;

    if (passwordregex.test(input)) {
        return true;
    } else {
        return false;
    }
}

function StopSubmit() { 

    var fullname = $("#fullname").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var password = $('#password').val();    

    if (fullname == "" || username == "" || email == "" || password == "" || !isValidFullname(fullname) || !isValidUsername(username) || !isValidEmail(email) || !isValidPassword(password)) {
        //Disable submit button
        $('#submit').prop('disabled', true)
    }
    else {
        //Enable submit button
        $('#submit').prop('disabled', false)
    }   
}

function UserRegistration() {   

    //Input validations
    $('.validate-inputs').keyup(function (event) {
        
        event.preventDefault();             

        if ($(this).attr('id') == 'fullname') {
            if ($(this).val() == "") {              
                $("#vfullname").html("Please enter a name.");               
            }
            else if (!isValidFullname($(this).val())) {
                $("#vfullname").html("Please enter a valid name.");             
            } else {
                $("#vfullname").html("");               
            }
        } else if ($(this).attr('id') == 'username') {
            if ($(this).val() == "") {
                $("#vusername").html("Please enter a username.");               
            }
            else if (!isValidUsername($(this).val())) {
                $("#vusername").html("Please enter a valid username.");             
            } else {
                $("#vusername").html("");               
            }
        } else if ($(this).attr('id') == 'email') {
            if ($(this).val() == "") {
                $("#vemail").html("Please enter an email.");                
            }
            else if (!isValidEmail($(this).val())) {
                $("#vemail").html("Please enter a valid email");                
            } else {
                $("#vemail").html("");              
            }
        } else if ($(this).attr('id') == 'password') {
            if ($(this).val() == "") {
                $("#vpassword").html("Please enter a password.");               
            }
            else if (!isValidPassword($(this).val())) {
                $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");               
            } else {
                $("#vpassword").html("");               
            }
        }
    }); 
}

StopSubmit();
UserRegistration();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="register-form" role="form" method="post" autocomplete="off">

    <input type="text" name="fullname" id="fullname" class="validate-inputs" placeholder="Fullname">
    <span id="vfullname"></span><br>
    
    <input type="text" name="username" id="username" class="validate-inputs" placeholder="Username">
  <span id="vusername"></span><br>
  
    <input type="email" name="email" id="email" class="validate-inputs" placeholder="Email">
    <span id="vemail"></span><br>
    
    <input type="password" name="password" id="password" class="validate-inputs" placeholder="Password">
    <span id="vpassword"></span><br>
                                     
    <input id="submit" type="submit" name="submit" value="Create" disabled>
                                    
</form>

Thank you

Answer 1

for validations i suggest you should try jquery validation

In your case though there is no need to have function "UserRegistration". and you are just not calling the right function on right event. js needs to be like:-

function isValidFullname(input) {
    var fullnameregex = /^([a-zA-Z\-_ ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;

    if (fullnameregex.test(input)) {
        return true;
    } else {
        return false;
    }
}

function isValidUsername(input) {
    var usernameregex = /^[a-z0-9_-]{3,16}$/;

    if (usernameregex.test(input)) {
        return true;
    } else {
        return false;
    }
   
}

function isValidEmail(input) {
    var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (emailregex.test(input)) {
        return true;
    } else {
        return false;
    }
    
}

function isValidPassword(input) {
    var passwordregex = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;

    if (passwordregex.test(input)) {
        return true;
    } else {
        return false;
    }
   
}

function StopSubmit() { 

    var fullname = $("#fullname").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var password = $('#password').val();    

    if (fullname == "" || username == "" || email == "" || password == "" || !isValidFullname(fullname) || !isValidUsername(username) || !isValidEmail(email) || !isValidPassword(password)) {
        //Disable submit button
        $('#submit').prop('disabled', true)
    }
    else {
        //Enable submit button
        $('#submit').prop('disabled', false)
    }   



    //Input validations
    $('.validate-inputs').keyup(function (event) {
        
        event.preventDefault();             

        if ($(this).attr('id') == 'fullname') {
            if ($(this).val() == "") {              
                $("#vfullname").html("Please enter a name.");               
            }
            else if (!isValidFullname($(this).val())) {
                $("#vfullname").html("Please enter a valid name.");             
            } else {
                $("#vfullname").html("");               
            }
        } else if ($(this).attr('id') == 'username') {
            if ($(this).val() == "") {
                $("#vusername").html("Please enter a username.");               
            }
            else if (!isValidUsername($(this).val())) {
                $("#vusername").html("Please enter a valid username.");             
            } else {
                $("#vusername").html("");               
            }
        } else if ($(this).attr('id') == 'email') {
            if ($(this).val() == "") {
                $("#vemail").html("Please enter an email.");                
            }
            else if (!isValidEmail($(this).val())) {
                $("#vemail").html("Please enter a valid email");                
            } else {
                $("#vemail").html("");              
            }
        } else if ($(this).attr('id') == 'password') {
            if ($(this).val() == "") {
                $("#vpassword").html("Please enter a password.");               
            }
            else if (!isValidPassword($(this).val())) {
                $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");               
            } else {
                $("#vpassword").html("");               
            }
        }
        //Called again on every input element value changed
        StopSubmit();
    }); 
}   

$(function(){
//Called once at document ready
StopSubmit();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="register-form" role="form" method="post" autocomplete="off">

    <input type="text" name="fullname" id="fullname" class="validate-inputs" placeholder="Fullname">
    <span id="vfullname"></span><br>
    
    <input type="text" name="username" id="username" class="validate-inputs" placeholder="Username">
  <span id="vusername"></span><br>
  
    <input type="email" name="email" id="email" class="validate-inputs" placeholder="Email">
    <span id="vemail"></span><br>
    
    <input type="password" name="password" id="password" class="validate-inputs" placeholder="Password">
    <span id="vpassword"></span><br>
                                     
    <input id="submit" type="submit" name="submit" value="Create" disabled>
                                    
</form>

Answer 2

You can call stopSubmit on keyUp and keep checking in all input changes and are fully validated.

Hopefully - This will not cause the screen freeze as it will be validating instantly. I have tested this it works.

Run Snippet below to see it working.

function isValidFullname(input) {
  var fullnameregex = /^([a-zA-Z\-_ ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;

  if (fullnameregex.test(input)) {
    return true;
  } else {
    return false;
  }
}

function isValidUsername(input) {
  var usernameregex = /^[a-z0-9_-]{3,16}$/;

  if (usernameregex.test(input)) {
    return true;
  } else {
    return false;
  }

}

function isValidEmail(input) {
  var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

  if (emailregex.test(input)) {
    return true;
  } else {
    return false;
  }

}

function isValidPassword(input) {
  var passwordregex = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;

  if (passwordregex.test(input)) {
    return true;
  } else {
    return false;
  }

}

function StopSubmit() {

  var fullname = $("#fullname").val();
  var username = $("#username").val();
  var email = $("#email").val();
  var password = $('#password').val();

  if (fullname == "" || username == "" || email == "" || password == "" || !isValidFullname(fullname) || !isValidUsername(username) || !isValidEmail(email) || !isValidPassword(password)) {
    //Disable submit button
    $('#submit').prop('disabled', true)
  } else {
    //Enable submit button
    $('#submit').prop('disabled', false)
    console.log('Ready to Submit')
  }
}

//Input validations
$('.validate-inputs').keyup(function(event) {

  //Call one only
  StopSubmit();

  event.preventDefault();

  if ($(this).attr('id') == 'fullname') {
    if ($(this).val() == "") {
      $("#vfullname").html("Please enter a name.");
    } else if (!isValidFullname($(this).val())) {
      $("#vfullname").html("Please enter a valid name.");
    } else {
      $("#vfullname").html("");
    }
  } else if ($(this).attr('id') == 'username') {
    if ($(this).val() == "") {
      $("#vusername").html("Please enter a username.");
    } else if (!isValidUsername($(this).val())) {
      $("#vusername").html("Please enter a valid username.");
    } else {
      $("#vusername").html("");
    }
  } else if ($(this).attr('id') == 'email') {
    if ($(this).val() == "") {
      $("#vemail").html("Please enter an email.");
    } else if (!isValidEmail($(this).val())) {
      $("#vemail").html("Please enter a valid email");
    } else {
      $("#vemail").html("");
    }
  } else if ($(this).attr('id') == 'password') {
    if ($(this).val() == "") {
      $("#vpassword").html("Please enter a password.");
    } else if (!isValidPassword($(this).val())) {
      $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");
    } else {
      $("#vpassword").html("");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="register-form" role="form" method="post" autocomplete="off">

  <input type="text" name="fullname" id="fullname" class="validate-inputs" placeholder="Fullname">
  <span id="vfullname"></span><br>

  <input type="text" name="username" id="username" class="validate-inputs" placeholder="Username">
  <span id="vusername"></span><br>

  <input type="email" name="email" id="email" class="validate-inputs" placeholder="Email">
  <span id="vemail"></span><br>

  <input type="password" name="password" id="password" class="validate-inputs" placeholder="Password">
  <span id="vpassword"></span><br>

  <input id="submit" type="submit" name="submit" value="Create" disabled>

</form>