CODEWITHSUNDEEP
javascriptformsvalidation
user3556177
user3556177

Reputation: 77

Javascript password validation skip if fields are empty

This works great, but I need it to do is also ignore it if the password field is left blank.

I want the user to be able to update their information without having to change their password. So if they leave the password fields blank, their password remain the same.

  document.addEventListener("DOMContentLoaded", function() {

    // JavaScript form validation

    var checkPassword = function(str)
    {
      var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
      return re.test(str);
    };

    var checkForm = function(e)
    {

      if(this.pwd1.value != "" && this.pwd1.value == this.pwd2.value) {
        if(!checkPassword(this.pwd1.value)) {
          alert("The password you have entered is not valid!");
          this.pwd1.focus();
          e.preventDefault();
          return;
        }
      } else {
        alert("Error: Please check that you've entered and confirmed your password!");
        this.pwd1.focus();
        e.preventDefault();
        return;
      }
    };

    var add_employee_form = document.getElementById("add_employee_form");
    add_employee_form.addEventListener("submit", checkForm, true);

    // HTML5 form validation

    var supports_input_validity = function()
    {
      var i = document.createElement("input");
      return "setCustomValidity" in i;
    }

    if(supports_input_validity()) {


      var pwd1Input = document.getElementById("field_pwd1");
      var pwd1Rule = "Password must contain at least 6 characters, including UPPER/lowercase and numbers.";
      pwd1Input.setCustomValidity(pwd1Rule);

      var pwd2Input = document.getElementById("field_pwd2");
      var pwd2Rule = "Please enter the same Password as above.";

      // input onchange event handlers


      pwd1Input.addEventListener("change", function() {
        this.setCustomValidity(this.validity.patternMismatch ? pwd1Rule : "");
        if(this.checkValidity()) {
          pwd2Input.pattern = this.value;
          pwd2Input.setCustomValidity(pwd2Rule);
        } else {
          pwd2Input.pattern = this.pattern;
          pwd2Input.setCustomValidity("");
        }
      }, false);

      pwd2Input.addEventListener("change", function() {
        this.setCustomValidity(this.validity.patternMismatch ? pwd2Rule : "");
      }, false);

    }

  }, false);

</script>

Upvotes: 0

Views: 734

Answers (1)

racamp101
racamp101

Reputation: 516

Change your function to have this at the top:

if(!this.pwd1.value) return;

javascript will return false for values of null or blank so this says return if false.

Full function:

var checkForm = function(e)
    {
      if(!this.pwd1.value) return;
      if(this.pwd1.value != "" && this.pwd1.value == this.pwd2.value) {
        if(!checkPassword(this.pwd1.value)) {
          alert("The password you have entered is not valid!");
          this.pwd1.focus();
          e.preventDefault();
          return;
        }
      } else {
        alert("Error: Please check that you've entered and confirmed your password!");
        this.pwd1.focus();
        e.preventDefault();
        return;
      }
    };

Upvotes: 1

Related Questions