Javascript warning validation form

Question

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>

UweB · Accepted Answer · 2014-02-04 12:37:48Z

1

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}$/

answered Feb 4, 2014 at 12:37

UweB

4,1102 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3169490 Over a year ago

Thats it! I forgot the $ :D haha i'm so dumb at this, thank you!

markusthoemmes · Accepted Answer · 2014-02-04 12:36:29Z

0

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)

answered Feb 4, 2014 at 12:36

markusthoemmes

3,12016 silver badges24 bronze badges

3 Comments

user3169490 Over a year ago

still not working whenever i type the right characters at first and right the wrong characters after.

markusthoemmes Over a year ago

Check UweB's answer or turn your RegEx around: Search for unwanted characters and print the error, when you find one.

user3169490 Over a year ago

already checked it, i forgot the caret and the $ at both ends, thank you sir!

Raju · Accepted Answer · 2014-02-04 12:39:21Z

0

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

answered Feb 4, 2014 at 12:39

Raju

10913 bronze badges

Collectives™ on Stack Overflow

Javascript warning validation form

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related