Error message not working in simple javascript form validation

Question

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>

The same issue here https://stackoverflow.com/questions/4882691/javascript-error-val-match-is-not-a-function — Ahmed Yasser, Jul 18 '17 at 12:53
Possible duplicate of [Javascript error: "val.match is not a function"](https://stackoverflow.com/questions/4882691/javascript-error-val-match-is-not-a-function) — , Jul 18 '17 at 13:33

score 0 · Accepted Answer · answered Jul 18 '17 at 13:04

0

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:

answered Jul 18 '17 at 13:04

MaVRoSCy

17,747
15
82
125

Hi, it worked.. thanks for the support. can you please give me some references where i can go through and gain deep JavaScript knowledge. – narend Jul 19 '17 at 05:11

score 0 · Answer 2 · answered Jul 18 '17 at 13:14

0

You should to use event.preventDefault method to prevent the page refresh. So, your function should look like this:

    function allLetter(event) {
        event.preventDefault();
        var letters = /^[A-Za-z]+$/;
        if (document.form1.text1.value.match(letters)) {
            document.getElementById("error").innerHTML="error here";
            //return false;
        } else {
            document.getElementById("error").innerHTML="success";
            return true;
        }
    }

It should be called in the following way: <input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />

answered Jul 18 '17 at 13:14

mgajic

109
6

Hi, it worked.. thanks for the support. can you please give me some references where i can go through and gain deep JavaScript knowledge. – narend Jul 19 '17 at 05:10
You are welcome. This is an excellent book about the JavaScript: http://shop.oreilly.com/product/9780596805531.do. If you prefer watching video tutorials, this is the best choice: https://www.pluralsight.com/paths/javascript – mgajic Jul 19 '17 at 09:16

Error message not working in simple javascript form validation

2 Answers2