jquery - jqueryの問題を伴うHTMLの有効なフォーム関数

Question

HTML のフォームを検証するためにこのスクリプトを作成しました。問題は、ボタンを押すとすべての jquery コードが再起動され、その理由がわかりません。

jquery:

function validForm(){

    if($("#name").val() == ""){
        alert("Name field can't be empty.");
        $("#name").focus();
        return false;
    }

    if($("#email").val() == ""){
        alert("E-mail field can't be empty.");
        $("#email").focus();
        return false;
    }
    if($("#message").val() == ""){
        alert("message field can't be empty.");
        $("#message").focus();
        return false;
    }

    return true;
};

$("#botonenviar").click( function() {
    if(validForm()){
        $.post("enviar.php",$("#formdata").serialize(),function(res){
            $("#formulario").fadeOut("slow");  
            if(res == 1){
                $("#exito").delay(500).fadeIn("slow");      
            } else {
                $("#fracaso").delay(500).fadeIn("slow");    
            }
        });
    }
});

Answer 1

これはどう：

$('#form_id').submit(function() {
  if(validForm()){
    $.post("enviar.php",$("#formdata").serialize(),function(res){
        $("#formulario").fadeOut("slow");  
        if(res == 1){
            $("#exito").delay(500).fadeIn("slow");      
        } else {
            $("#fracaso").delay(500).fadeIn("slow");    
        }
    });
  }
  return false;
});