Member Avatar for ayesha789

hi this is my code.
I want to validate new password with repeat password befor user press submit.

<p align="center">To reset your password, provide your current password</p>
<form id="form1"  name="form1" method="post" action="pcq.php">
    
     <table border="0" align="center" class="mytable2" style="margin-left:175px"  >
	 <tr>
         <td>Current Password</td>
         <td>
         
        <input type="password" name="oldpass" style="width:150px;" />
         
         </td>
       </tr>
       <tr>
         	 <? $user=$_SESSION[myusername] ?>
		          <td><input type="hidden" name="usr" id="usr" value="<?php echo $user; ?>"style=" width:150px;" />
         </td>
       </tr>
       <tr>
         <td>New Password</td>
         <td><input type="password" name="pass"  style="width:150px;" /></td>
       </tr>
	   <tr>
         <td>Repeat New Password</td>
         <td><input type="password" name="rpass"  style="width:150px;" /></td>
       </tr>
       <tr>
       
       
       <tr>
	   <td>
	   </td>
<td > <input type="submit" value="submit"  >
 <input type="reset" value="Reset"></td>

</tr>

       
       
     </table>
   </form>
  • 3 Contributors
  • 6 Replies
  • 387 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short expert summary and a practical fix. The goal is to compare the "New password" and "Repeat new password" fields immediately (live) and again on submit, while still enforcing the rule on the server. Live comparison improves UX; the browser's Constraint Validation API (via setCustomValidity / reportValidity) integrates with native messages so you don't have to use alert(). Server-side validation must still be performed because client-side checks can be bypassed. (developer.mozilla.org)

posted the form; suggested a blur/alert approach; reminded to validate on submit. Combine those ideas but use modern events and the Constraint Validation API for a robust solution: listen for input on both fields, set a custom validity message on the repeat field when they don't match, and on submit call reportValidity() (or prevent submission) so the browser shows the message. The input event fires as the user types, which is preferable to blur for immediate feedback. (developer.mozilla.org)

Example (short, unobtrusive) — put this in a script block after the form:

const pass = document.getElementById('password');
const pass2 = document.getElementById('passwordverify');

function validateMatch() {
  pass2.setCustomValidity(pass.value && pass.value === pass2.value ? '' : 'Passwords do not match');
}

pass.addEventListener('input', validateMatch);
pass2.addEventListener('input', validateMatch);

document.getElementById('form1').addEventListener('submit', e => {
  validateMatch();
  if (!e.target.checkValidity()) {
    e.preventDefault();
    e.target.reportValidity();
  }
});

For showing messages: a jQuery lightbox/modal can work, but prefer either inline messages with an aria-live region or the native <dialog> / properly implemented ARIA dialog for accessibility. If using a modal, follow the WAI-ARIA dialog pattern so keyboard and screen-reader users are handled correctly. (w3.org)

Troubleshooting notes: make both password fields required so checkValidity() catches empties; always clear setCustomValidity('') when the fields become valid; never rely on client-only checks for security — repeat validation on the server before accepting a password change. (developer.mozilla.org)

Recommended Answers

All 6 Replies

Member Avatar for ayesha789

please tell me

Member Avatar for samaru

What will trigger the validate() function? When you tab or switch the cursor to another textbox? This is what this does.

<html>
<head>
  <title></title>

<script language="javascript">

function validate() 
{
  // Verify that both passwords put in match. 
  if ( ( document.getElementById("password").value != document.getElementById("passwordverify").value ) ||
  document.getElementById("password").value.length == 0   )
  {
    alert("Both passwords must match.");
    // return false;  
  }

}

</script>
  
</head>

<body>



<p align="center">To reset your password, provide your current password</p>
<form id="form1"  name="form1" method="post" action="pcq.php">
    
     <table border="0" align="center" class="mytable2" style="margin-left:175px"  >
	 <tr>
         <td>Current Password</td>
         <td>
         
        <input type="password" name="oldpass" style="width:150px;" />
         
         </td>
       </tr>
       <tr>
         	    <? $user=$_SESSION[myusername] ?>
		          <td><input type="hidden" name="usr" id="usr" value="<?php echo $user; ?>"style=" width:150px;" />
         </td>
       </tr>
       <tr>
         <td>New Password</td>
         <td><input type="password" name="pass"  style="width:150px;" id="password" /></td>
       </tr>
	   <tr>
         <td>Repeat New Password</td>
         <td><input type="password" name="rpass"  style="width:150px;" id="passwordverify" onblur="validate()"/></td>
       </tr>
       <tr>
       
       
       <tr>
	   <td>
	   </td>
<td > <input type="submit" value="submit"  >
 <input type="reset" value="Reset"></td>

</tr>

       
       
     </table>
   </form>


</body>
</html>
Member Avatar for ayesha789

Can I Use light box for showing message.

Member Avatar for samaru

What do you mean by "light box"?

Member Avatar for ayesha789

light box using jquey.

Member Avatar for almostbob

users may submit without filling in either password input so

<form id="form1"  name="form1" method="post" action="pcq.php" onsubmit='validate();'>

yes you can use a lightbox popup
instructions are in the lightbox docs,
RTFM

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.