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\-_ ’'‘ÆÐƎƏƐƔĲŊŒẞÞǷȜæðǝəɛɣĳŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊĲĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịĳĵķƙĸĺļłľŀŉń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

Always Helping · Accepted Answer · 2020-07-05 13:08:12Z

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\-_ ’'‘ÆÐƎƏƐƔĲŊŒẞÞǷȜæðǝəɛɣĳŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊĲĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịĳĵķƙĸĺļłľŀŉń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>

Thanks for your help again. My register form validation journey ends here with your answer. I learned lots of things from your answers. :)
@Ulrich I am glad i was able to help you out through the way. I have learnt alot as well Happy Learning :) Thanks again.

Ulrich · Accepted Answer · 2020-07-05 21:00:04Z

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\-_ ’'‘ÆÐƎƏƐƔĲŊŒẞÞǷȜæðǝəɛɣĳŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊĲĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịĳĵķƙĸĺļłľŀŉń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>

Thank you for your answer. Its working but whenever I write on inputs, it freezes the web page and writing on inputs while its validating. So I quickly pasted the articles into the inputs to test your answer is working or not. It's working but as I said its freezing. How can we fixed that
i have tried same script it does not freeze the page at my end try this fiddle: jsfiddle.net/8r504w9h

Collectives™ on Stack Overflow

Disable and enable submit button in jQuery if else condition

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related