jQuery - 表單驗證

Question

我想用jQuery編寫我自己的表單驗證腳本。

但是，我似乎無法得到它的工作，這可能是一些小事，但我找不到問題的原因。

此外，我只是剛開始使用jQuery，我正在尋找一個好的語法檢查器。任何人都可以推薦嗎？

$(document).ready(function() { 
    $('.error').toggle(); 
    }); 


//when the button is clicked 

$(".button").click(function() { 
     // validate and process form 
     // first hide any error messages 
    $('.error').hide(); 

     var name = $("input#name").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

      var name = $("input#email").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

      var name = $("input#subject").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

      var name = $("textarea#message").val(); 
     if (name == "") { 
     $("label#name_error").show(); 
     return false; 
    } 

    var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 

     $.ajax({ 
     type: "POST", 
     url: "bin/process.php", 
     data: dataString, 
     success: function() { 
     $('#contact_form').html("<div id='message'></div>"); 
     $('#message').html("<h2>Contact Form Submitted!</h2>") 
     .append("<p>We will be in touch soon.</p>") 
     .hide() 
     .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
     }); 
     } 
    }); 
    return false; 
    }); 
}); 

Answer 1

請務必包括jQuery.validate.min.js或jquery.validate.unobtrusive.min.js（記不起了我的頭頂部）文件（S），然後驗證裏面的jQuery這樣的：

$('.button').click(function() { 
if ($('form').valid()) { 
    //do saving stuff 
} else { 
    //errors on form - let user correct them 
} 

}）;

至於語法檢查器，不知道你在哪個平臺上開發，但是使用Visual Studio 2010的Im，如果你包含了js文件，那麼VS2010給出了intellisense，它突出了問題。

Answer 2

<script type="text/javascript"> 
$(document).ready(function() {  
$("#MyForm").validate({ 
      rules: { 

       name: {required: true}, 
       phone:{required: true}, 
       email:{required: true} 

       }, 
       messages: { 

        name: {required: "Please Enter Name"}, 
       phone:{required: "Please Enter Phone No"}, 
       email:{required: "Please Enter Email "} 

       } , 
       submitHandler: function(form) { 
         form.submit(); 
       } 

      }); 
}); 

</script>