How do I get javascript validation on form input working?

Question

Just trying to do a simple maximum length of fName to not exceed over 10.

I've been looking for online examples. Can't find a common ground in anywhere on any examples I find.

I'm able to submit anything except an empty text (because of required)

<head>
     <script type="text/javascript">

     var x = document.regoForm.fName.value;
      if (x > 1)
     {
        alert( "too big" );
        return false;
     }
  </script>
</head>
<body>

    <form name="regoForm" id="regoForm" method="post">

    </p>

    <p>
        <label for="fName">First Name</label>
        <input type="text" required placeholder="John" name="fName"
        id="fName"/>
    </p>

    <p>
        <input type="submit" value="submit">
        </p>

</form>

Still there are multiple issues... you need to have a event handler which can check the value when user enters the value etc... — Arun P Johny, Mar 16 '16 at 08:36
Possible duplicate of http://stackoverflow.com/questions/23431426/how-to-set-max-length-of-6-and-minimum-length-of-6-in-a-textbox — Arun P Johny, Mar 16 '16 at 08:37
You can't return when not in a function, your form isn't found by the script — baao, Mar 16 '16 at 08:39
Learn some basic js before posting. No one could help if you don't know the basics. — Ali Naci Erdem, Mar 16 '16 at 08:39

score 0 · Answer 1 · answered Mar 16 '16 at 08:39

0

You should be able to use built in methods like maxlength

<input type="text" maxlength="10" required placeholder="John" name="fName" id="fName"/>

answered Mar 16 '16 at 08:39

henrikmerlander

1,554
13
20

score 0 · Accepted Answer · answered Mar 16 '16 at 08:41

I've added an onclick handler to the button, and insert the code into a function.

And if you want to check the length, not the value, then you should use the .length to get the length of the text.

Try this

<head>
    <script type="text/javascript">
        function checkNameLength() {
            if (document.getElementById('fName').value.length > 10) {
                alert("too big");
                return false;
            }
        }
    </script>
</head>
<body>

    <form name="regoForm" id="regoForm" method="post">
        <p>
            <label for="fName">First Name</label>
            <input type="text" required placeholder="John" name="fName" id="fName"/>
        </p>
        <p>
            <input type="submit" value="submit" id="submitBtn" onclick="return checkNameLength()">
        </p>
    </form>
</body>

How do I get javascript validation on form input working?

2 Answers2