使用JavaScript验证输入长度

Question

I want to show an error if user enters less than 4 letters in text box. Here is the code I'm currently using now, it is somewhat working. The problem is - it is showing the error and then it is submitting the value also.

I want to stop it submitting if user enters less than 4 letters.

JavaScript

<script type="text/javascript">
function check(what)
{
    var length=what.search_text.value.length;   

    if (length >3 && length < 21)
        what.submit();
    else
        alert("Your nick should be 4-20 characters long.");
}
</script>

HTML

<form method=post action=''><input type=hidden name=todo value=search>
<p align=center>
    Enter Your Name: 
    <input type=text name=search_text value='$search_text'>
    <input onclick=check(this.form); return false; type=submit value=Search>
</p>
</form>

Answer 1

in case of invalid values you need to

return false;

so that form submission is cancelled

Answer 2

<script type="text/javascript">
function check(what)
{
    var length=what.search_text.value.length;   

    if (length >3 && length < 21){
        what.submit();
    }
    else {
        alert("Your nick should be 4-20 characters long.");
        return false;
    }

}
</script>

<?php
echo "<form method='post' action='' onsubmit='return check(this);'><input type=hidden name=todo value=search>
<p align=center>Enter Your Name: <input type=text name=search_text value='$search_text'><input type=submit value=Search></p><br>
</form>";
?>

Changes :

1. onsubmit='return check(this);' added in form tag
2. Removed onclick from button submit
3. return false; added in else condition of js function

Suggestion : Always try to use jQuery, It is simple and will reduce your code length.

Answer 3

u can achive this by using RegularExpressionValidator control

design your textbox like this example i am using.

<asp:TextBox ID="txtCityCode" runat="server" Width="147px" CssClass="txt" MaxLength="2"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="rfvCityCode" runat="server" ErrorMessage="City Code is required information."
                    ControlToValidate="txtCityCode" Display="None" ValidationGroup="Save" SetFocusOnError="True"></asp:RequiredFieldValidator>
                     <asp:RegularExpressionValidator ID="revCityCode" runat="server" ErrorMessage="Numbers and special characters not allowed in 'City Code' field."
                    ControlToValidate="txtCityCode" ValidationExpression="^[a-zA-Z\s]+$" ValidationGroup="Save"
                    Display="None" SetFocusOnError="True"></asp:RegularExpressionValidator>

Just Change the ValidationExpression according to your needs

Answer 4

        <script type="text/javascript">
        function check(what)
        {
            var length=what.search_text.value.length;   

            if (length >3 && length < 21)
               { what.submit(); return true; } 
            else
                {alert("Your nick should be 4-20 characters long."); 
                 return false;}
        }
        </script>

and in HTML 

  <input onclick='return check(this.form)' type="submit" value="Search">