How to Enable and disable a button if textbox is empty or not - Jquery

IR39Shah
December 29, 2022
105 views
3 votes
3 Answers

I want to enable or disable a button on the basis of the textbox being empty, actually, if user is logged in then the Email is comping from logged in user

$(document).ready(function () {
    if (document.getElementById("Email").value === "") {
        document.getElementById("Continuebtn").disabled = true;
    } else {
        document.getElementById("Continuebtn").disabled = false;
    }


    if (document.getElementById("PhoneNoTextbox").value === "") {
        document.getElementById("PhoneBtn").disabled = true;
    } else {
        document.getElementById("PhoneBtn").disabled = false;
    }
});

<label class="form-label QstFonts mx-4 my-4">Please Enter Your Email Address <span class="text-danger">*</span></label>
                                                        <span class="QstFontssmall">Please make sure that your Email is correct.</span>
                                                        <div class="px-0">
                                                            <div class="pt-4 mx-5 d-flex row">
                                                                <div class="row m-auto form-icon">
                                                                    <i data-feather="mail" class="fa fa-envelope icons"></i>
                                                                                                                                            <input id="Email"
                                                                           type="email"
                                                                           asp-for="HLApplication.UserEmail"
                                                                           autocomplete="off"
                                                                           class="input-text form-control-input m-auto p-3"
                                                                           placeholder="Email"
                                                                           required="" />
                                                                </div>
                                                                <div class="row m-auto my-3">
                                                                    <button id="Continuebtn"
                                                                            type="button"
                                                    class="btn btn-primary m-auto p-3">
                                                                        NEXT
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

Tags: javascript jquery

Answers

I just created the validation function for email. Please try to do like this.

$(document).ready(function () {
    if (document.getElementById("Email").value === "") {
        document.getElementById("Continuebtn").disabled = true;
    } else {
        document.getElementById("Continuebtn").disabled = false;
    }
});
const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[]\.,;: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,}))$/
  );
};

const validate = () => {
  const email = $('#Email').val();

  if (validateEmail(email)) {
    document.getElementById("Continuebtn").disabled = false;
  } else {
    document.getElementById("Continuebtn").disabled = true;
  }
  return false;
}

$('#Email').on('input', validate);

Consider the following example.

$(function() {
  function disableButton(sel, bool) {
    $(sel).prop("disabled", bool);
  }
  if ($("#Email").val() == "") {
    disableButton("#Continuebtn", true);
  }
  $("#Email").keyup(function() {
    var v = $(this).val();
    if (v === "") {
      // Empty
      disableButton("#Continuebtn", true);
    } else {
      // Populated
      if ((v.indexOf("@") !== -1) && (v.indexOf(".") !== -1)) {
        // Possible Email format
        disableButton("#Continuebtn", false);
      }
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-label QstFonts mx-4 my-4">Please Enter Your Email Address <span class="text-danger">*</span></label>
<span class="QstFontssmall">Please make sure that your Email is correct.</span>
<div class="px-0">
  <div class="pt-4 mx-5 d-flex row">
    <div class="row m-auto form-icon">
      <i data-feather="mail" class="fa fa-envelope icons"></i>
      <input id="Email" type="email" asp-for="HLApplication.UserEmail" autocomplete="off" class="input-text form-control-input m-auto p-3" placeholder="Email" required="" />
    </div>
    <div class="row m-auto my-3">
      <button id="Continuebtn" type="button" class="btn btn-primary m-auto p-3">NEXT</button>
    </div>
  </div>
</div>

When the page loads, it checks for a value in the textbox. If it is empty, the button is disabled.

When the User enters some value, it is checked again. If it is Empty, the button is disabled. If it has content, it checks to see if it is an Email like format. This is a very basic check for the @ symbol and a . symbol. If these are present, then the button is enabled.

var email = document.getElementById("Email");
email.addEventListener('keyup', () =>{
    if (email.value === "") {
        document.getElementById("Continuebtn").disabled = true;
    } else {
        document.getElementById("Continuebtn").disabled = false;
    }

/*
    if (document.getElementById("PhoneNoTextbox").value === "") {
        document.getElementById("PhoneBtn").disabled = true;
    } else {
        document.getElementById("PhoneBtn").disabled = false;
    }
*/
})

<label class="form-label QstFonts mx-4 my-4">Please Enter Your Email Address <span class="text-danger">*</span></label>
<span class="QstFontssmall">Please make sure that your Email is correct.</span>
<div class="px-0">
  <div class="pt-4 mx-5 d-flex row">
     <div class="row m-auto form-icon">
       <i data-feather="mail" class="fa fa-envelope icons"></i>
          <input id="Email" type="email" asp-for="HLApplication.UserEmail" autocomplete="off" class="input-text form-control-input m-auto p-3" placeholder="Email" 
                                                                           required="" />
    </div>
    <div class="row m-auto my-3">
       <button id="Continuebtn" type="button" class="btn btn-primary m-auto p-3" disabled>
                                                                        NEXT
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

Please signup or login to give your own answer.

Click here to cancel reply.

How to Enable and disable a button if textbox is empty or not – Jquery

Answers