No jquery events working properly inside form tag

Question

    <script type="text/javascript">

        $("document").ready(function () {

            $("#done").click(function () {
                $("#nm").hide();

            });
        });
    </script>

But when I use form tag it doesn't work. When I run the code, the validation stayed for few seconds and then gone.. But in the case when I remove the <form> , it runs well. Why does this happen?

    <form id="frm1" method="post"  >
        Name:    <input type="text" id="nm"/><br>
        E-Mail:  <input type="email" id="eml"/><br>
        Password:<input type="password" id="pass"/><br>

        <input type="submit" id="done"  value="SUBMIT"/>


    </form>       

Answer 1

you need to pass an event and use preventDefault() to prevent the form from submitting on click:

$("#done").click(function (event) {
   event.preventDefault();
   $("#nm").hide();
 });

Answer 2

You could use the event as in the example above or avoid using it and return false instead:

        $("#done").click(function () {
            $("#nm").hide();
            return false;
        });