password validation in javascript onkeypress

codereview.stackexchange.com › questions › 59690 › javascript-onkeypress-validation

onKeyValidate is an okay name, but a better name could be validateKeypress.
It seems very silly to store a RegExp as a string, and then construct it every time. Why not just declare var alpha = /[ A-Za-z]/?
keyChars appears to check against \x00, the null character, and \x08, the backspace character. Neither of these can ever be passed to onKeypress, so you can just take it out.
The standard way to get the character code is event.which || event.keyCode.
event is a global; I don't think you need to pass it in.

Here's a proposed rewrite:

var alpha = /[ A-Za-z]/;
var numeric = /[0-9]/; 
var alphanumeric = /[ A-Za-z0-9]/;

function validateKeypress(validChars) {
    var keyChar = String.fromCharCode(event.which || event.keyCode);
    return validChars.test(keyChar) ? keyChar : false;
}

The HTML will have to change to onkeypress="validateKeypress(alpha);".

Answer from Schism on Stack Exchange

Stack Exchange

codereview.stackexchange.com › questions › 59690 › javascript-onkeypress-validation

JavaScript onKeypress validation - Code Review Stack Exchange

Top answer

1 of 2

onKeyValidate is an okay name, but a better name could be validateKeypress.
It seems very silly to store a RegExp as a string, and then construct it every time. Why not just declare var alpha = /[ A-Za-z]/?
keyChars appears to check against \x00, the null character, and \x08, the backspace character. Neither of these can ever be passed to onKeypress, so you can just take it out.
The standard way to get the character code is event.which || event.keyCode.
event is a global; I don't think you need to pass it in.

Here's a proposed rewrite:

var alpha = /[ A-Za-z]/;
var numeric = /[0-9]/; 
var alphanumeric = /[ A-Za-z0-9]/;

function validateKeypress(validChars) {
    var keyChar = String.fromCharCode(event.which || event.keyCode);
    return validChars.test(keyChar) ? keyChar : false;
}

The HTML will have to change to onkeypress="validateKeypress(alpha);".

2 of 2

The thing that I was able to pick out, and it's more of a nitpick type of things is that you should turn your last if statement around

if (!validChars.test(keychar) && !keyChars.test(keychar))   {
    return false
} else{
    return keychar;
}

should look like this

if (validChars.test(keychar) && keyChars.test(keychar)) {
    return keychar;
} else {
    return false;
}

Do your Positive first. most people like this better than all the negatives.

Side Note: for code golfing you just shaved 2 characters as well as made it more standard compliant if this nitpick can be considered a standard.

Short Version:

If you know Ternary operators and would like to use them instead of this simple if statement, @renatargh mentioned that you could make this super short

return validChars.test(keychar) && keyChars.test(keychar) ? keychar : false;

Also, var alphanumeric = "[ A-Za-z0-9]"; is never used (in this code block) and neither is var keyChars = /[\x00\x08]/;

you should just get rid of them

Stack Overflow

stackoverflow.com › questions › 54641066 › how-can-i-read-value-and-validate-password-length-in-javascript-using-keyup › 54641297

jquery - How can I read value and validate password length in javascript using keyup? - Stack Overflow

Top answer

1 of 2

Use .on("keypress",function(){}) as written to the code below:

$("#password").on("keyup",function(){
    if($(this).val().length < 9 && $(this).val().length != 0 ){
      $("#lblError").prop("style","display:block");
      $("#Submit").prop("style","display:none");
    }
    else if($(this).val().length == 0){
      $("#Submit").prop("style","display:none");
      $("#lblError").prop("style","display:none");
    }
    else{
     $("#Submit").prop("style","display:block");
     $("#lblError").prop("style","display:none");
    }
})

<html>

<head>
  <title>Email List</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-family: Arial;
      box-sizing: border-box
    }
    
    body {
      text-align: center;
    }
    
    header {
      padding: 50px;
      color: black;
      font-size: 20pt
    }
    
    section {
      width: 700px;
      margin: 0 auto;
    }
    
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }
    
    ul li {
      cursor: pointer;
      position: relative;
      padding: 12px 8px 12px 40px;
      background: #FF6D1F;
      font-size: 18px;
      transition: 0.2s;
      text-align: left;
      user-select: none;
    }
    
    ul li:nth-child(odd) {
      background: #FA5B0F;
    }
    
    ul li:hover {
      background: #FF822E;
    }
    
    ul li.checked {
      background: #FF822E;
      color: #fff;
      text-decoration: line-through;
    }
    
    ul li.checked::before {
      content: '';
      position: absolute;
      border-color: #fff;
      border-style: solid;
      border-width: 0 2px 2px 0;
      top: 10px;
      left: 16px;
      transform: rotate(45deg);
      height: 15px;
      width: 7px;
    }
    
    .close {
      position: absolute;
      right: 0;
      top: 0;
      padding: 12px 16px 12px 16px;
      display: none;
      background-color: #f44336;
    }
    
    .close:hover {
      color: white;
    }
    
    form {
      padding: 0;
      margin-top: 20px;
      width: 100%;
      overflow: hidden;
    }
    
    input {
      height: 56px;
      line-height: 56px;
      margin-right: 0;
      display: inline-block;
      float: left;
      width: 90%;
      font-size: 18px;
      padding: 12px 8px 12px 40px;
      outline: 0;
    }
    
    .btn {
      display: inline-block;
      background-color: green;
      width: 10%;
      padding: 9.5px;
      font-size: 32px;
      cursor: pointer;
      background-color: #FA5B0F;
    }
    
    .btn:hover {
      color: white;
      background-color: #ff931e;
    }
    
    #lblError {
      background-color: #000;
      color: white;
      height: 56px;
      line-height: 56px;
      display: none;
    }
    #Submit {
      color: white;
      height: 56px;
      line-height: 56px;
      display: none;
    }
  </style>
</head>

<body>
  <header>
    <h1>Create A New Password</h1>
  </header>

  <section>


    <form>
      <input type="password" id="password" placeholder="Enter a password" autocomplete="off">

    </form>

    <div id="lblError">Please enter a password longer than 9 characters!</div>
    <div id="Submit"><input type="submit"></div>
  </section>

</html>

Feel free to ask for any clarification.

2 of 2

You can also try using pure javascript to accomplish this.

var minLength = 9;
var output = document.getElementById("output");

function checkInput(){
    var password = document.getElementById("password").value;
    if (password.length < minLength) {
         output.innerHTML = "Not yet.....";
         return false; 
    }else {
         output.innerHTML = "<button>submit</button>";
      }
}

    <form>
      <input type="password" id="password" placeholder="Enter a password" autocomplete="off" onkeyup="checkInput()">
      <p id="output"></p>
    </form>

Discussions

php - password mismatch alert javascript on onkeypress - Stack Overflow

I want to check whether confirm password matches with password or not, through onkeypress() function. It's not working.. Some of the part working like password length must be 6 character. But, I'm ... More on stackoverflow.com

stackoverflow.com

September 2, 2015

javascript - on keyup event of password field validation should perform - Stack Overflow

Form validation using jquery Onkeyup event password input field is verified as minimum 8 character one lower case letter,one upper case letter,one numeric and one special character More on stackoverflow.com

stackoverflow.com

June 7, 2015

Alphanumeric password validation in javascript - Stack Overflow

I have written function in javascript for alphanumeric password validation in jsp and calling that function on onkeypress event of textbox but not working. function alphanumeric(inputtxt) { ... More on stackoverflow.com

stackoverflow.com

December 3, 2016

Javascript validation onkeypress function - Stack Overflow

In web form, I have multiple fields and each field have some unique validation like phone and zip code have only number and some of the fields do not allow special characters. So how do I validate ... More on stackoverflow.com

stackoverflow.com

Videos