Javascript function to post form input values

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?

3 thoughts on “Javascript function to post form input values”

  1. 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 .. 🙂

    Reply

Leave a Comment