.validate() on submit doesn't work

Question

I apologize for my english ...

I would like to valide my form when the user click on submit, not before. But, when I click on submit the page reloads !

I from work a template, that could be the reason ^^

<form method="POST" class="frm_etape" name="frm_etape1" id="frm_etape1">
    <input type="text" class="inp-etapes col-md-3" id="nom" name="surface" placeholder="Surface (m²)" required />
    <input type="submit" class="inp-envoyer" value="OK" />
</form>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
 $("#frm_etape1").validate({
     rules: {
         surface: {
             required: true,
             number: true
         }
     }
 });

Answer 1

You are adding validate feature before form is loaded

$(document).ready(function(){
     $("#frm_etape1").validate({
         rules: {
             surface: {
                 required: true,
                 number: true
             }
         }
     });
})