Error message not working in simple javascript form validation

Here is the following code which is not working to show error message when submitted.

The problem is that the error message is not displayed properly when clicked once but if you give multiple clicks it works.

Help will be appreciated.

Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>JavaScript form validation - checking all letters</title>

    <style type="text/css">    
        li {list-style-type: none;
        font-size: 16pt;
        }
        .mail {
            margin: auto;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 400px;
            background : #D8F1F8;
            border: 1px soild silver;
        }
        .mail h2 {
            margin-left: 38px;
        }
        input {
            font-size: 20pt;
        }
        input:focus, textarea:focus{
            background-color: lightyellow;
        }
        input submit {
            font-size: 12pt;
        }
        .rq {
            color: #FF0000;
            font-size: 10pt;
        }
    </style>

</head>
<body onload='document.form1.text1.focus()'>
    <div class="mail">
        <h2>Enter your Name and Submit</h2>
        <form name="form1" action="#">
            <ul>
                <li>
                    Code:
                </li>
                <li id="myList">
                    <input type='text' name='text1'/>
                    <p id="error"></p>
                </li>
                <li class="rq">
                    *Enter alphabets only.
                </li>
                <li>&nbsp;</li>
                <li>
                    <input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" />
                </li>
                <li>&nbsp;</li>
            </ul>
        </form>
    </div>

    <script type="text/javascript">
        function allLetter(inputtxt) {     
            var letters = /^[A-Za-z]+$/;
            if(inputtxt.value.match(letters)) {
                document.getElementById("error").innerHTML="error here";
                return false;
            } else {
                document.getElementById("error").innerHTML="success";
                return true;
            }
        }
    </script>
</body>
</html>

Solution

Your problem and solution is quite simple.

When you click the form button, the form automatically submits itself and that's why you see nothing. Add this to your button code so you can prevent the default functionality of the submit input:

<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />

That should solve it: