Question

I am using below code to compare pass and confirm password text field. Its working fine but the issue is if enter mismatch password its showing error ‘ password do not match’ and after that if i match the password its showing ‘password match’ next to old error. so its displaying like ‘password do not match password match'(please see the image for reference.. Error Image

. How to clear the span before i show the message.

   $(confPassword).live('blur', function() {
    alert(password.value);
    if (password.value != 'Password') {
        alert("hi");
        if (password.value == confPassword.value) {
            alert("match");
            setupConfirmControl(confPassword, astConfPassword, lblConfPassword, true);
        }
        else {
            alert("dont match");
            setupConfirmControl(confPassword, astConfPassword, lblConfPassword, false);
        }
    }
});

function setupConfirmControl(elemObj, id, labelTxt, addToParent) {
    var ConfirmPass = document.createElement('span');
    ConfirmPass.setAttribute('class', 'ClsConfirmPass');
    ConfirmPass.setAttribute('id', 'span' + id);
    ConfirmPass.innerHTML = '';
    if (addToParent) {
        ConfirmPass.innerHTML = 'Passwords match';
        elemObj.parentNode.insertBefore(ConfirmPass, elemObj);
    }
    else {
        ConfirmPass.innerHTML = 'Passwords do not match';
        elemObj.parentNode.insertBefore(ConfirmPass, elemObj);
    }
    showConfirmPassWord(id);
}

Answer 1

The problem is that you’re creating a new span every time within your function, simply check if a span exists and, if it does, use that span:

function setupConfirmControl(elemObj, id, labelTxt, addToParent) {
    var ConfirmPass = document.getElementById('span' + id);
    if (!ConfirmPass){
        ConfirmPass = document.createElement('span');
        ConfirmPass.setAttribute('class', 'ClsConfirmPass');
        ConfirmPass.setAttribute('id', 'span' + id);
        ConfirmPass.innerHTML = '';
    }

    if (addToParent) {
        ConfirmPass.innerHTML = 'Passwords match';
        elemObj.parentNode.insertBefore(ConfirmPass, elemObj);
    }
    else {
        ConfirmPass.innerHTML = 'Passwords do not match';
        elemObj.parentNode.insertBefore(ConfirmPass, elemObj);
    }
    showConfirmPassWord(id);
}

This effectively assigns the previously-created span element (of id equal to 'span' + id, assuming those are constant for error messages for the same field). And then, if there’s no element of that id in the document (the !ConfirmPass), creates the element.

This way any previously-written content in the span will be over-written by setting the innerHTML.