Reset Password Using Html and javascript

Question

I Have a requirement where i have 3 input fields namely

1.old password
2.new password
3.confirm password.

For which i need to apply rules as follows.

1.Old and new passwords should not match.
2.No field should be empty.
3.New password and confirm password inputs should be same.

If all these validations passes then only form should be submitted.
Here is the Html file for which i need to apply js

<form role="form" method="post">
    <div class="box box-primary">
        <div class="box-header">
            <h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
            <div class="pull-right">
                <button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
                <button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
            </div>
        </div>
        <!-- /.box-header -->

        <div class="box-body">
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <label>Old Password</label>
                </div>
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
                    </div>
                </div>
                <!-- /.input group -->
            </div>
            <br/>
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <label>New Password</label>
                </div>
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
                    </div>
                </div>
                <!-- /.input group -->
            </div>
            <br/>
            <div class="row">
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <label>Confirm Password</label>
                </div>
                <div class="col-xs-12 col-sm-3 col-md-3">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fa-lock"></i>
                        </div>
                        <input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
                    </div>
                </div>
                <!-- /.input group -->
            </div>

</form>

thank you

Solution 1

Please replace with your ids..

    function checkForm()
   {
    var oldP=document.getElementById("oldP").value;
    var newP=document.getElementById("newP").value;
    var confirmP =document.getElementById("confirmP").value;

    if(oldP!=""&&newP!=""&&confirmP!="")
    {
      if(oldP!=newP)
      {
        if(newP==confirmP)
         {
          return true;
         }
         else
          {
            alert("Confirm password is not same as you new password.");
            return false;
          }
      }
      else
     {
      alert(" This Is Your Old Password,Please Provide A New Password");
      return false;
     }
    }
    else
    {
     alert("All Fields Are Required");
     return false;
    }
}

An in thml you need to add

<form onsubmit="return checkForm();" ----- >

For reset you can create a function somting like this

function resetForm()
{
        var oldP=document.getElementById("oldP").value="";
        var newP=document.getElementById("newP").value="";
        var confirmP =document.getElementById("confirmP").value="";
}

and call when you want form reset.

Solution 2

create a function and call on onClick of button

<button type="button" name="Submit" value="Save" class="btn btn-danger" onclick="Function();"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" "></i> Save</button>

Your javascript Function will be Like this

  <script>
    function Function() {
        var oldpasswprd = document.getElementById('oldPassword').value;
        var newpassword = document.getElementById('newPassword').value;
        var confirmpassword = document.getElementById('confirmPassword').value;
        if (oldPassword == "" || newpassword == "" || confirmpassword == "") {
            alert('Please fill all the details');
        }
        else if (oldpasswprd == newpassword) {
            alert("Old password and New Password cannot be same");
        }
        else if (newpassword != confirmpassword) {
            alert("password mismatch");
        }
    }

</script>

Solution 3

firstly you should catch the click avtion on submit button and check the fields

$([name=Submit]).on('click', function(e) {

   if (($('#oldPassword').val() == "")||($('#newPassword').val() == "")||($('#confirmPassword').val() == "")) {//check 2
       e.preventDefault();
  }
  if ($('#oldPassword').val() == $('#newPassword').val()) {//check 1
       e.preventDefault();
   }
   if ($('#newPassword').val() != $('#confirmPassword').val()) {//check 3
       e.preventDefault();
   }
}

P.S. i wrote code in this style because i want to show all steps. shurely you can combine 'if's in one to clear your code. as example u can combine check 1 and check 3 and put it in else block of check 2

Comments

[Vijay Kumar]

But if i use dialog box instead of alert..its not working..any reason for that

[Anand Singh]

What is not working... form submitted without validation??

[Vijay Kumar]

i have one dialog box instead of alert...if i apply that form will be submitted without validation

[Anand Singh]

you are using jquery dialog or not... if possible post some code.. so i can get whats going on. i think problem is because of script asynchronous execution.

[Vijay Kumar]

you can see the jquery i am using in updated question

[Anand Singh]

try this not tested but will work i think...` setTimeout('call you dialog',10)`