Javascript function to post form input values

Question

I have a php page where I manage the password change request, I'm having trouble calling a javascript function to check if the new password has at least a special character and then calling again the same page to let the php update the password field of the database.

This is my html:

<form name="changePassword" onsubmit="return CheckPassword()" method="post"
      accept-charset="utf-8">
  Current Password:
  <input name="currPwd" type="password" size="40" maxlength="200" id="currPwd"
         placeholder="Current Password" required/>

  New Password:
  <input name="newPwd" type="password" size="40" maxlength="200" id="newPwd"
         placeholder="New Password" required/>

  Repeat New password:
  <input name="rNewPwd" type="password" size="40" maxlength="200" id="rNewPwd"
         placeholder="Repeat New Password" required/>

  <input type="submit" id="changepsw" value="Change Password"/>
</form>

And this is my javascript code:

function CheckPassword () {
  var pass1 = document.getElementById('newPwd');
  var pass2 = document.getElementById('rNewPwd');
  var isOk = true;

  var res1 = /^(?=.*[ -\/:-@\[-_])([\w -\/]).+$/.test(pass1);
  var res2 = /^(?=.*[ -\/:-@\[-_])([\w -\/]).+$/.test(pass2);

  if ((res1 == false) || (res2 == false)) {
    isOk = false;
  } else {
    $.ajax({
      type: 'POST',
      url: 'updatepswd.php',
      data: $'form'.serialize()
    });
  }
  return isOk;

}

Clicking on the submit button it should call the js function and that should check if the password does contain at least a special character and then call the php to update but what happens is that it calls the php page even if the password doesn't have any special characters.

Am I missing something or doing something wrong?

Edit:

I also did this without using jquery adding the .value to the password field when using it in the test function:

var res1 = /^(?=.*[ -\/:-@\[-_])([\w -\/]).+$/.test(pass1.value);

and I didn't use ajax but instead:

document.changePassword.submit();

Won't solve your problem but, shouldn't it be $("#form").serialize() — Silidrone
– Silidrone, Commented Feb 15, 2021 at 16:51
On the other hand, I suppose your regex could be wrong? Did you test it? — Silidrone
– Silidrone, Commented Feb 15, 2021 at 16:52
Not sure if this will help you, but try adding event.preventDefault() inside the block after or before isOk = false; — Adarsh Mohan
– Adarsh Mohan, Commented Feb 15, 2021 at 16:54
if you check your regex here, no char is selected regexr.com — Don Diego
– Don Diego, Commented Feb 15, 2021 at 16:57
Why are you letting the form submit and also making an Ajax request? — epascarello
– epascarello, Commented Feb 15, 2021 at 17:07

Pinguto · Accepted Answer · 2021-02-15 17:43:32Z

function Test(password) {
    var regex = [
        /[\W]+/, // I check for the presence of at least one special character 
        /[a-z]+/, // I check for at least one lowercase letter 
        /[A-Z]+/, // I verify the presence of at least one capital letter 
        /[\d]+/ // I verify the presence of at least one number 
    ];
    for (var i = 0; regex[i]; i++) {
        if (!regex[i].test(password)) return false;
    }
    return true;
}

function Send() {
    var psw1 = $('#newPwd').val();
    var psw2 = $('#rNewPwd').val();
    if (Test(psw1) && psw1 === psw2) {
        alert('OK!');
        /*
        $.ajax({
            type: 'POST',
            url: 'updatepswd.php',
            data: $('form').serialize()
        });
        */
    } else alert('ERROR!');
}

$(function() {
    $('#changepsw').click(Send);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form name="changePassword" onsubmit="return false;" method="post" accept-charset="utf-8">
        Current Password:
        <input name="currPwd" type="password" size="40" maxlength="200" id="currPwd" placeholder="Current Password" required/>

        New Password:
        <input name="newPwd" type="password" size="40" maxlength="200" id="newPwd" placeholder="New Password" required/>

        Repeat New password:
        <input name="rNewPwd" type="password" size="40" maxlength="200" id="rNewPwd" placeholder="Repeat New Password" required/>

        <input type="submit" id="changepsw" value="Change Password"/>
    </form>

Well, the regexes you use don't seem the best to me, however to write them I usually use this site: https://www.debuggex.com/

But, back to us, usually to check the passwords entered by users I use this little function that returns TRUE only and only if the regex entered are all correct:

function Test(password){
    var regex =[
            /[\W]+/, // I check for the presence of at least one special character 
            /[a-z]+/, // I check for at least one lowercase letter 
            /[A-Z]+/, // I verify the presence of at least one capital letter 
            /[\d]+/  // I verify the presence of at least one number 
        ];
    for(var i = 0; regex[i]; i++){
        if(!regex[i].test(password)) return false;
    }
    return true;
}

I also noticed that to read the password entered by the user you use:

var pass2 = document.getElementById("rNewPwd");

But by doing so you get THE ITEM, not the text it contains, right? therefore the TEST function will fail in all cases.

If I can advise you, an easy way to get the input values is:

var data = $('#your_ID').val();

or

var data = $('.your_class').val();

I hope I was helpful .. :)

Collectives™ on Stack Overflow

Javascript function to post form input values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related