How to Disable a Message When the Password Value Is Empty

How to disable a message when the password value is empty

You should add a test to check if the passwords fields are empty.

function isPasswordMatch() {
    var password = $("#txtNewPassword").val();
    var confirmPassword = $("#txtConfirmPassword").val();

    if (password != confirmPassword) $("#divCheckPassword").html("Passwords do not match!");
    else if ((password ==  "") || (confirmPassword == "")) $("#divCheckPassword").html("Please fill both password fields"); 
    else $("#divCheckPassword").html("Passwords match.");


}

$(document).ready(function () {
    $("#txtConfirmPassword").keyup(isPasswordMatch);
});

Or use $("#divCheckPassword").html(""); instead of $("#divCheckPassword").html("Please fill both password fields"); to clear the message.

Why is the value of my password field always an empty string?

Your value is always empty because the value of passWord is set on the loading of page. It is not updated after a user types in a value.

If you modify the code so it is like this you should get the value.

function submitIt() {
  const passWord = document.getElementById('password').value;

  console.log('passWord: ', passWord)
}

How to make an error message for each empty form field

Hope this fixed your issue. Notice, password changed to passwordD and you were accessing all the error field without specifying which

const submitButton = document.querySelector('.form-button');
const errorField = document.querySelectorAll(".error-field");
const validate = (e) => {
  e.preventDefault();
  const firstName = document.getElementById("name");
  const lastName = document.getElementById("last-name");
  const email = document.getElementById("email");
  const passwordD = document.getElementById("password");

  if (firstName.value < 1) {
    errorField[0].classList.toggle('error-active');
    errorField[0].style.color = "red";
    firstName.classList.toggle("invalid");
    
  }

  if (lastName.value < 1) {
    errorField[1].classList.toggle("error-active");
    errorField[1].style.color = "red";
    lastName.classList.toggle("invalid");
    
  }

  if (email.value < 1) {
    errorField[2].classList.toggle("error-active");
    errorField[2].style.color = "red";
    email.classList.toggle("invalid");
    
  }

  if (password.value < 1) {
    errorField[3].classList.add("error-active");
    errorField[3].style.color = "red";
    passwordD.classList.toggle("invalid");
    
  } else {
    passwordD.classList.remove("invalid");

    errorField.forEach((f) => {
      f.classList.remove("error-active");
      f.style.color = "black";
    });
    return true;
  }

  return false;
}

submitButton.addEventListener('click', validate);

<form action="" id="my-form">
  <label for="name">
    <input type="text" id="name" name="firstName" placeholder="First Name">
  <p class="error-field">First Name cannot be empty</p>
  </label>

  <label for="last-name">
    <input type="text" id="last-name" name="lastName" placeholder="Last Name">
    <p class="error-field">Last Name cannot be empty</p>
  </label>

  <label for="email">
    <input type="email" id="email" name="email" placeholder="Email Address">
    <p class="error-field">Looks like this is not an email</p>
  </label>

  <label for="password">
    <input type="password" id="password" name="password" placeholder="Password">
    <p class="error-field">Password cannot be empty</p>
  </label>

  <button type="submit" name="submit" class="form-button">Claim your free trial </button>
  <p>By clicking the button, you are agreeing to our <a href="" class="terms-conditions-link">Terms and Services</a></p>

</form>

How to hide error message once the user starts writing in the input field?

let timeout;

function typeFinished() {
    timeout = setTimeout(validate, 2000);
}
function validate(){
    
    var password = document.getElementById('demo2')
    var error2= document.getElementById('error2')
    var flag =true;
    if(password.value.trim()==""){
        // alert('blank password')
        password.style.border="dotted red"
        password.style.outline="none"
        error2.innerHTML ='***Enter Password'
        flag=false
    }else if(password.value.trim()!=""){
        password.style.border=""
    }
    if( password.value.length < 5){
        error2.innerHTML ='***Password too short'
        flag = false;
    }
    else if(password.value.length >= 5){
        error2.innerHTML = ''
        flag = true;
    }
    
    // alert(flag);
    return flag // to maintain state of flag

}

<form onsubmit="return validate();">
<label for="">Password</label>
        <p id="error2"></p>
           <input type="text"name="input2" id="demo2" oninput="return typeFinished();">
        <input type="submit" name="input3"  id="demo3">
        </form>

Disable browser 'Save Password' functionality

I'm not sure if it'll work in all browsers but you should try setting autocomplete="off" on the form.

<form id="loginForm" action="login.cgi" method="post" autocomplete="off">

The easiest and simplest way to disable Form and Password storage prompts and prevent form data from being cached in session history is to use the autocomplete form element attribute with value "off".

From https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Some minor research shows that this works in IE to but I'll leave no guarantees ;)

@Joseph: If it's a strict requirement to pass XHTML validation with the actual markup (don't know why it would be though) you could theoretically add this attribute with javascript afterwards but then users with js disabled (probably a neglectable amount of your userbase or zero if your site requires js) will still have their passwords saved.

Example with jQuery:

$('#loginForm').attr('autocomplete', 'off');

Disable button whenever a text field is empty dynamically

Add a check when the button is clicked to see if there is any text. If there isn't, pop up an alert box (or some other form of feedback) to tell the user to enter data, and don't do the button functionality.

Example:

<input id="myText" type="text" onkeyup="stoppedTyping()">
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/> 

<script type="text/javascript">
    function stoppedTyping(){
        if(this.value.length > 0) { 
            document.getElementById('start_button').disabled = false; 
        } else { 
            document.getElementById('start_button').disabled = true;
        }
    }
    function verify(){
        if myText is empty{
            alert "Put some text in there!"
            return
        }
        else{
            do button functionality
        }
    }
</script>

How to Disable a Message When the Password Value Is Empty