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

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 >Please Enter Your Email Address <span >*</span></label>
                                                        <span >Please make sure that your Email is correct.</span>
                                                        <div >
                                                            <div >
                                                                <div >
                                                                    <i data-feather="mail" ></i>
                                                                                                                                            <input id="Email"
                                                                           type="email"
                                                                           asp-for="HLApplication.UserEmail"
                                                                           autocomplete="off"
                                                                           
                                                                           placeholder="Email"
                                                                           required="" />
                                                                </div>
                                                                <div >
                                                                    <button id="Continuebtn"
                                                                            type="button"
                                                    >
                                                                        NEXT
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>

CodePudding user response：

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

CodePudding user response：

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 >Please Enter Your Email Address <span >*</span></label>
<span >Please make sure that your Email is correct.</span>
<div >
  <div >
    <div >
      <i data-feather="mail" ></i>
      <input id="Email" type="email" asp-for="HLApplication.UserEmail" autocomplete="off"  placeholder="Email" required="" />
    </div>
    <div >
      <button id="Continuebtn" type="button" >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.

CodePudding user response：

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 >Please Enter Your Email Address <span >*</span></label>
<span >Please make sure that your Email is correct.</span>
<div >
  <div >
     <div >
       <i data-feather="mail" ></i>
          <input id="Email" type="email" asp-for="HLApplication.UserEmail" autocomplete="off"  placeholder="Email" 
                                                                           required="" />
    </div>
    <div >
       <button id="Continuebtn" type="button"  disabled>
                                                                        NEXT
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>