Password field html form with jquery functions

Question

I want add this feature in my password text box. Like:

Password textbox 1 and password textbox 2. I want in text box required one uppercase, one lowercase, number, and special characters and it must 8 to 30 character length .

Also password textbox 1 and textbox 2 is equal

If user not do this them submit button is disable.

I research it on Google stackoverflow but there didn't find this question which help me.

Please help me.

Possible duplicate of [Regex for password must contain at least eight characters, at least one number and both lower and uppercase letters and special characters](https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a) — Muhammad Usman, Jul 09 '18 at 04:37
I am with @George How I add that code with html code ? Pls tell me — Arjit, Jul 09 '18 at 04:44

Mamun · Accepted Answer · 2018-07-09T05:43:10.673

0

Try the following way:

function validate(){
  var patt = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,30}/;
  if($('#pass1').val() == $('#pass2').val() && patt.test($('#pass1').val()))
    $('#btnSubmit').prop('disabled', false);
  else 
    $('#btnSubmit').prop('disabled', true);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="password" id="pass1" oninput="validate()">
  <input type="password" id="pass2" oninput="validate()">
  
  <button id="btnSubmit" disabled>Submit</button>
</form>

edited Jul 09 '18 at 05:43

answered Jul 09 '18 at 05:21

Mamun

66,969
9
47
59

@Arjit, you are most welcome :) – Mamun Jul 09 '18 at 14:40

score 0 · Answer 2 · answered Jul 09 '18 at 05:33

You can try following code:

<body>
    <form action="/action_page.php">
  Password: <input type="password" id="pwd1" name="pwd1" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,30}$" onkeyup="firstPassword()" title="Six or more characters">
  <input type="password" id="pwd2" name="pwd2" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,30}$" onkeyup="secondPassword()" title="Six or more characters">
  <input id="submitBtn" type="submit">
</form>
    <script>
       function firstPassword() {
            var passwordText1 = document.getElementById("pwd1").value;
            var passwordText2 = document.getElementById("pwd2").value;
            document.getElementById("submitBtn").disabled = false;
            if(passwordText1 != passwordText2){
                document.getElementById("submitBtn").disabled = true;
            }
        }

         function secondPassword() {
            var passwordText1 = document.getElementById("pwd1").value;
            var passwordText2 = document.getElementById("pwd2").value;
            document.getElementById("submitBtn").disabled = false;
            if(passwordText1 != passwordText2){
                document.getElementById("submitBtn").disabled = true;
            }
        }
    </script
</body>

If you make change in any text field, it will check for string match.

I don't understand, what you want to say. Please tell me briefly. — Ashu Mhatugade, Jul 10 '18 at 04:28
Mamun given answer works only, if you have filled textbox1 and then textbox2, if after filling textbox2, If you change in textbox1 then still submit button will be disable if condition not matched. His answer works only you change in textbox2. In my code you can make changes in any textbox it will check for string match condition. I will share div close code. — Ashu Mhatugade, Jul 10 '18 at 05:36
Refer this for div close on button click : https://stackoverflow.com/questions/19301808/jquery-onclick-hide-div — Ashu Mhatugade, Jul 10 '18 at 05:41

Password field html form with jquery functions

2 Answers2