Dynamic validating - just one append

Question

I'm trying to quick validate it and shows it in pop-up #result, but I can't add my item only once. I tried e.preventDefault(); and e.stopPropagation(); - both didn't work. .html isn't a solution, because I wan't two (or more) paragraphs in a div. How to stop'em?

Working example

My html code:

HTML:

<form name="form" id="form" method="post">
<span> Write pwd: </span> 
<input id="login" name="login" type="text" />
</form>
<div id="result" class="tooltip"></div>

and JavaScript:

$(document).ready(function () {

    $('#login').keyup(function() {
    var th = document.getElementById('login').value;
        if (th.length < 6){
            $('#result').css('display','inline');
            $('#result').append('<p id="too_short">Too short password.</p>');
        }   else{
        $("#too_short").remove();
        }

        if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')){
            $('#result').css('display','inline');
            $('#result').append('<p id="forb_char">Forbidden characters</p>');
        }   else{
            $("#forb_char").remove();
        }

    });
});

Answer 1

Check if you have already added your warning using indexOf():

if($('#result').text().indexOf("Too short password.")==-1){
     if (th.length < 6){
        $('#result').css('display','inline');
        $('#result').append('<p id="too_short">Too short password.</p>');
    }
}else{
    $("#too_short").remove();
}

if($('#result').text().indexOf("Forbidden characters")==-1){
   if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')){
        $('#result').css('display','inline');
        $('#result').append('<p id="forb_char">Forbidden characters</p>');
    }
}else{
    $("#forb_char").remove();
}

Answer 2

• Well, it is not so clear what you need in your question but this is what I did from what I've understood.

• I implemented this a little bit cleaner and fixed the behavior (I hope it's what you need).

• Just to add something. If you need more complex validations in future or reduce lines of code try the following plugin which is really helpful and easy to use: http://jqueryvalidation.org/

• Live Demo: http://jsfiddle.net/nwu3ojft/

---

HTML:

<form name="form" id="form" method="POST"> 
    <span>Write pwd: </span> 
    <input id="login" name="login" type="text" />
</form>
<div id="result" class="tooltip"></div>

CSS:

Specify the display property needed from first time, no need to add it each time when validating your password.

div.#result {
    display: inline;
}

jQuery:

Please read code comments.

// Available error messages
var errorMessage = {
    tooShort: 'Too short password', 
    forbChar: 'Forbidden characters'
};

$(function() {

    var login = $('#login');

    login.on('keyup', function(e) {
        var pwd = this.value, 
            isValid = isValidPwd(pwd, true);

        if (isValid) {
            // Clear error message
            setMsg('');
        }
    });

});

/**
 * Check if password input is valid
 *
 * @param {String} value To be checked
 * @param {Boolean} showErrors Flag to display errors or not
 * @returns {Boolean} isValid
 */
function isValidPwd(value, showErrors) {
    var isValid = true, 
        error;

    // Rule #1
    if (value && value.length < 6) {
        error = '<p>' + errorMessage.tooShort + '</p>';
        isValid = false;
    } 

    // Rule #2
    if (value && (value.indexOf('\'') >= 0 || 
               value.indexOf('\"') >= 0 || 
               value.indexOf('\\') >= 0 || 
               value.indexOf('\/') >= 0)) {
        error = '<p>' + errorMessage.forbChar + '</p>';
        isValid = false;
    }

    // Check flag
    if (showErrors) {
        setMsg(error);
    }

    return isValid;
};

/**
 * Used to set a message in the UI
 */
function setMsg(value) {
    $('#result').html(value);
};

Answer 3

Fixed, try it http://jsfiddle.net/amostk/9n2db67u/17/

$(document).ready(function () {

$('#login').keyup(function() {
var th = document.getElementById('login').value;
    if (th.length < 6){
        $('#result').css('display','inline');
//add a variable to check if #too_sort exist
        var ex = $("#too_short").text();
//if it exists, do not append again else add
        if(!ex)
        {
            $('#result').append('<p id="too_short">Too short password.</p>');
//remove #forb_char if exists
            $("#forb_char").remove();
        }
    }   else{
      $("#too_short").remove();
    }

    if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')){
        $('#result').css('display','inline');
   //add a varible to check if "#forb_char exists

       var en = $("#forb_char").text();
   // if exists do not add else add
        if(!en)
        {
        $('#result').append('<p id="forb_char">Forbidden characters</p>');
 //remove all #too_short for only one validation
            $("#too_short").remove();
        }
    }   else{
        $("#forb_char").remove();
    }

});
});