CODEWITHSUNDEEP
javascriptvalidationhtml
user3169490
user3169490

Reputation: 173

Javascript warning validation form

The output of this form is whenever you enter a wrong character, a warning will appear on the right side right after you onBlur. And when you enter the correct characters on the box and onBlur again, the warning will disappear.

The script is running okay except when you enter the valid characters and then you click outside the textbox, and then click again inside the textbox and input unwanted characters without deleting the previous valid characters you entered, the warning message doesn't appear.

Any suggestions how to make the warning message appear in this situation?

here's the code:

  <!DOCTYPE html>
<html>
<head>

</head>
<body>

<script>

    function editThisOne(regThat,input,spanId,spanMessage)
    {
        if(!regThat.test(input))
        {
            if(spanId!=null)
            while(spanId.firstChild)
            spanId.removeChild(spanId.firstChild)
            spanId.appendChild(document.createTextNode(spanMessage))
            return false;
        }
        else
        {
            if(spanId!=null)
            while(spanId.firstChild)
            spanId.removeChild(spanId.firstChild)
            return true;
        }
    }

    function changeThis(wow,that)
    {
        return editThisOne(/[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}/,wow.value,that,"Please enter name correctly");
    }

</script>
<div>
    Enter your name:
        <input id="name" onBlur="changeThis(this,document.getElementById('thisSpan'))">
        <span id="thisSpan"></span>
</div>
</body>
</html>

Upvotes: 0

Views: 424

Answers (3)

Raju
Raju

Reputation: 109

onBlur() The event occurs when a form element loses focus onkeyup() The event occurs when the user releases a key

Upvotes: 0

UweB
UweB

Reputation: 4110

Your regex is probably lacking start (^) and end ($) delimiters, which means that as long as the input string contains a valid sequence of characters anywhere in it, it will not validate as expected. Try the following regex instead:

/^[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}$/

Upvotes: 1

markusthoemmes
markusthoemmes

Reputation: 3120

Try

<input id="name" onkeyup="changeThis(this,document.getElementById('thisSpan'))">

instead of

<input id="name" onBlur="changeThis(this,document.getElementById('thisSpan'))">

onkeyup fires at every keystroke (everytime, you let the button you just pressed come back up). onblur just fires, when the element loses focus (clicking somewhere else, pressing tab)

Upvotes: 0

Related Questions