how to stop a form from submitting without disable the button with JQuery?
<p>hello I have a simple form to validate I want to do a client side validation lets say that my form has only one field for name I want to check if the name length is between 5 and 20 chars if yes then no problem and the data will be sent to the server and then apply a server side validation ;however, if it's not then an error message will be displayed in a span beside the input field says that it must be 5 to 20 chars.The problem is when I hit the submit button it shows the result for less than a second then it goes cause the submit button reload the page which also means if I have included my server side validation it will also be processed since the input data already sent so how can I stop the submit button from sending data to the server and reloading the page without disabling the button.</p>

<p>here is my example code</p>

<pre><code> &lt;!doctype html&gt;
 &lt;html&gt;
&lt;head&gt;
    &lt;title&gt;form validation&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;

    &lt;script&gt;
        $( document ).ready(function() {
            $("#submit").click(function(){
               myfunction();
            });

            function myfunction()
            {
                name = $("#user").val();
                nameError = $(".error").first();
                myError = "";
                if(name.length &lt; 5 || name.length &gt; 20)
                    myError += "length should be between 5 and 20 ";
                else
                    myError += "ok"

                nameError.html(myError);

            }
        });
    &lt;/script&gt;

    &lt;style&gt;
        .error
        {
            color : red;
            text-transform: capitalize;
            margin-left: 20px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;form method="post" action=""&gt;
        NAME : &lt;input type="text" name="user" id="user"&gt;&lt;span class="error"&gt;&lt;/span&gt;&lt;br /&gt;
        &lt;input type="submit" value="Submit" id="submit"&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>