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>

Answer 1

您应该能够使用像maxlength这样的内置方法

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

Answer 2

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?

Question

2 answers

solution1
0 2016-03-16 08:39:59

solution2
0 ACCPTED 2016-03-16 08:41:50

How do I get javascript validation on form input working?

Question

2 answers

solution1 0 2016-03-16 08:39:59

solution2 0 ACCPTED 2016-03-16 08:41:50

solution1
0 2016-03-16 08:39:59

solution2
0 ACCPTED 2016-03-16 08:41:50