Help with implementing onblur function

Question

minimee120 0 Newbie Poster

13 Years Ago

Hi all, I've been trying to implement the onblur function for a database, but i'm having trouble getting it to work. It's suppoed to be used for my 2nd password field to check it.

Would anyone be able to help me implement into the following code I have?:

script type="text/javascript">
function clear2(pass) 
{
    var x = document.getElementById(pass);
    x.value = "";
}
<!--I used pwdCheck because it will make sure that the values are correctly input, or that there is no missing field so that the database will not have an empty row if customer forgets to put one-->
function pwdCheck1()
{
    pwd1 = document.getElementById('password1').value;
    pwd2 = document.getElementById('password2').value;
    name = document.getElementById('name').value;
    email = document.getElementById('email').value;

    if(pwd1 == pwd2 && pwd1!="" && pwd2!="" && name!="" && email!="")
    {

        document.getElementById("checkpwdForm1").style.display = 'none';
        document.form1.submit();
        return true;
    }
    else
    {
        clear2('password1');
        clear2('password2');
        document.getElementById("checkpwdForm1").style.display = 'block';
        return false;
    }
}

function pwdCheck2()
{
    xpwd1 = document.getElementById('xpassword1').value;
    xpwd2 = document.getElementById('xpassword2').value;
    xname = document.getElementById('xname').value;
    xemail = document.getElementById('xemail').value;
    xaddress = document.getElementById('xaddress').value;
    <!---checks to see if passwords are equal and if all fields are filled in--->
    if(xpwd1 == xpwd2 && xpwd1!="" && xpwd2!="" && xname!="" && xemail!="" && xaddress!="")
    {

        document.getElementById("checkpwdForm2").style.display = 'none';
        document.form2.submit();
        return true;
    }
    else
    {
        clear2('xpassword1')
        clear2('xpassword2')
        document.getElementById("checkpwdForm2").style.display = 'block';
        return false;
    }
}
</script>

html-css javascript

2 Contributors
3 Replies
186 Views
7 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Member #949455

Dani AI

Generated 6 Months Ago

Two quick, concrete points about the code shown by and the replies from :

The script block contains HTML-style comment markers and uses undeclared variables (e.g. pwd1, pwd2). HTML comment tokens inside JavaScript and implicit globals commonly break behavior or hide runtime errors.
Clearing both password fields on mismatch is harsh UX and not necessary. The common, robust pattern is: validate on input for live feedback, re-check on blur, and prevent form submit if the fields don’t match. Integrate with HTML5 validation via setCustomValidity so the browser’s native UI is used, and always repeat the check on the server (PHP).

A small, self-contained example that follows those points:

<form id="regForm" novalidate>
  <input id="pwd" type="password" required>
  <input id="pwdConfirm" type="password" required>
  <div id="pwdMsg" aria-live="polite"></div>
  <button type="submit">Register</button>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.getElementById('regForm');
  var pwd = document.getElementById('pwd');
  var confirm = document.getElementById('pwdConfirm');
  var msg = document.getElementById('pwdMsg');

  function checkPasswords() {
    if (!confirm.value) {
      confirm.setCustomValidity('');
      msg.textContent = '';
      return true;
    }
    if (pwd.value !== confirm.value) {
      confirm.setCustomValidity('Passwords do not match');
      msg.textContent = 'Passwords do not match';
      return false;
    }
    confirm.setCustomValidity('');
    msg.textContent = '';
    return true;
  }

  confirm.addEventListener('input', checkPasswords);
  confirm.addEventListener('blur', checkPasswords);
  pwd.addEventListener('input', function () { if (confirm.value) checkPasswords(); });

  form.addEventListener('submit', function (e) {
    if (!checkPasswords()) {
      e.preventDefault();
      confirm.focus();
    }
  });
});
</script>

Troubleshooting checklist (items seen often in student code): ensure IDs in the HTML match the JS; remove HTML comments from inside JavaScript; declare variables (avoid implicit globals); run the script after DOM load (or place it below the form); and never rely only on client-side checks — always verify passwords server-side in PHP, then hash and store securely.

All 3 Replies

Member #949455

13 Years Ago

Would anyone be able to help me implement into the following code I have?:

Does it work for the 1st password? Why you modify the code like that? It should be one password for one function.

Meaning

function#1 has password 1
function#2 has password 2

The reason is if you have 2 passwords in each function then your have 2 column of 2 different passwords.

I'm bit curious how your query will select the 2 passwords from your database at the same time?

If you query doesn't work then your onblur function wouldn't work either

You never provide the query only the variables in your javascript.

What language are you using PHP or ASP.net or some other?

Edited 13 Years Ago by Member #949455 because: grammer

Reply to this topic

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.

minimee120 0 Newbie Poster · Answer 1 · 2013-03-24T03:47:02+00:00

Using PHP, the pass2 is just another field for checking pass1, it's what the professor wanted, he actually wants us to code it inside an HTML form, using javascript. I don't understand why, being HTML5 already supports the blurring

Member #949455 · Answer 2 · 2013-03-24T04:16:46+00:00

Using PHP, the pass2 is just another field for checking pass1,

So does it work (meaning the password code does it work for 1 password without the pass)?

You should also post the form with it because it's not very clear on how this works.

Here is a simple example on how the onblur function works:

This is base on the variables you are usings this is just HTML:

<script type="text/javascript">

function Username() {
var pId = document.getElementById("UserId").value;
if (pId.length == 0) {
alert("User Id should not be empty");
}
}

function pwdCheck1() {
var oPassword1 = document.getElementById("Password1").value;
if (oPassword1.length == 0) {
alert("User Password1 should not be empty");
}
}


function pwdCheck2() {
var oPassword2 = document.getElementById("Password2").value;
if (oPassword2.length == 0) {
alert("User Password2 should not be empty");
}
}

</script>

<p>UserName</p>
<input type="text" style="margin-left:30px;width:150px;margin-top:10px;margin-bottom:10px;" id="UserId" onblur="Username()" />
<p>Password1</p>
<input type="password" id="Password1" style="margin-left:30px;width:150px;margin-top:5px;margin-bottom:10px;" onblur="pwdCheck1()" />
<p>Password2</p>
<input type="password" id="Password2" style="margin-left:30px;width:150px;margin-top:5px;margin-bottom:10px;" onblur="pwdCheck2()" />
<input type="button" onclick="alert('Login Successful')" value="Log In" style="margin:10px 10px 5px 5px" />

You can modify this code I provided so you get a picture how it works because the code you provided I can't picture in my mind how it works.

Help with implementing onblur function

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers