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>