Сброс пароля с помощью Html и JavaScript

Question

У меня есть требование, где я есть 3 поля ввода, а именно

1.old пароль
2.new пароль
3.Убедитесь пароль.

Для чего мне необходимо применять правила следующим образом.

1.Новые и новые пароли не должны совпадать.
Поле 2.No должно быть пустым.
3. Новый пароль и подтверждение ввода пароля должны быть одинаковыми.

Если все эти проверки пройдены, тогда должна быть отправлена ​​только форма.
Вот файл Html, для которого мне нужно применить Js

<form role="form" method="post"> 
 
\t \t <div class="box box-primary"> 
 
\t \t \t <div class="box-header"> 
 
\t \t \t \t <h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2> 
 
\t \t \t \t <div class="pull-right"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div><!-- /.box-header --> 
 
\t 
 
    \t \t \t <div class="box-body"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-xs-12 col-sm-3 col-md-3"> 
 
    \t \t \t    \t <label>Old Password</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-xs-12 col-sm-3 col-md-3"> 
 
\t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t <div class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t <i class="fa fa-lock"></i> 
 
\t \t \t \t \t \t \t </div> 
 
    \t \t \t    \t \t <input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password"> 
 
    \t \t \t    </div> 
 
\t \t \t \t \t </div><!-- /.input group --> 
 
\t \t \t \t </div> 
 
\t \t \t \t <br/> 
 
    \t \t  <div class="row"> 
 
\t \t \t \t \t <div class="col-xs-12 col-sm-3 col-md-3"> 
 
\t \t \t \t \t \t <label>New Password</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-xs-12 col-sm-3 col-md-3"> 
 
\t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t <div class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t <i class="fa fa-lock"></i> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div><!-- /.input group --> 
 
\t \t \t \t </div> 
 
\t \t \t \t <br/> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-xs-12 col-sm-3 col-md-3"> 
 
\t \t \t \t \t \t <label>Confirm Password</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="col-xs-12 col-sm-3 col-md-3"> 
 
\t \t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t \t <div class="input-group-addon"> 
 
\t \t \t \t \t \t \t \t <i class="fa fa-lock"></i> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div><!-- /.input group --> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t </form>

спасибо

Answer 1

Пожалуйста, замените с идентификаторами ..

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; 
    } 
} 

в thml вам нужно добавить

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

Для сброса Вы можете создать функцию somting как этот

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

и позвоните, если хотите сбросить форму.

Answer 2

создать функцию и вызвать на OnClick кнопки

<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> 

Функция javascript будет выглядеть следующим образом:

<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> 

Answer 3

, во-первых, вы должны поймать щелчок avtion на кнопку отправки и проверить поля

$([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. Я написал код в этом стиле, потому что хочу показать все шаги. shurely вы можете комбинировать «if's in one», чтобы очистить свой код. например, u может совместить проверку 1 и проверить 3 и поместить ее в другой блок проверки 2