验证表格然后发布？答案

【问题标题】：validate the form and then post?验证表格然后发布？
【发布时间】：2010-11-09 18:39:06
【问题描述】：

我有一个包含很少文件的表单和一个提交按钮...当我单击提交按钮时，表单应该验证并抛出一个丢失数据的错误，但发生的事情是，它发布数据而不是验证表格

我应该如何验证表单然后发布表单？

    <body>
     <form class="cmxform" id="commentForm" method="post" action="">
     <div class="subColumns paragraph">
            <div class="lefty">
                <div class="fontWeight7">  
                    <label for="first_name">
                    First Name:</label>
                    <input id="first_name" class="text required" maxlength="200" 
                        name="first_name"   />
                </div>
            </div>
            <div class="cdc-left">
                <div class="fontWeight7">
                    <label for="last_initial">
                    Last Initial:</label>
                    <input id="last_initial" class="required text" maxlength="200" 
                        name="last_initial"  />
                </div>
            </div>
        </div>
            <input id="btnRegister" name="btnRegister" class="submit" type="submit" value="Submit Your Answer" /> 
</form>




 <script type="text/javascript">

    $(document).ready(function () {

        $("#commentForm").validate(); 

        // validate the comment form when it is submitted  
        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }
        }); 

        $("#commentForm").validate({
            submitHandler: PostData
        });  

    });

    function PostData() {
  debugger
    var _firstName = commentForm.first_name.value;// $('#first_name').value; //first_name.value;
    var _lastName = $('#last_initial').value; //last_initial.value;
    var _city = $('#city').value; //city.value;
    var _state = $('#state').value; //state.value;
    var _country = $('#country').value; //country.value;

     } 

</script>

【问题讨论】：

服务器端检查虽然很贵，但更可靠......想象一下，用户选择禁用javascript？
@ajreal - 我发现你的逻辑有一个很大的谬误，客户端验证并不排除服务器端验证，你可以（并且应该，如果做客户端）两者都做。
如果没有启用 javascript.. 或者当 javascript 没有正确加载时，客户端检查是不可能的......当然同时进行检查是理想的

标签： asp.net jquery validation jquery-validate

【解决方案1】：

您正在连接按钮上的click 事件，该事件发生在表单上的submit 事件之前，而不是使用submitHandler callback option 代替.validate()，如下所示：

$("#commentForm").validate({
  submitHandler: PostData
});

...并完全删除此click 处理程序：

$('#btnRegister').click(function () {
  PostData();
});

submitHandler 仅在验证成功时执行，这就是您想要的。

【讨论】：

@Nick：它确实验证了表单，但从未执行 PostData 处理程序，我在 PostData 中设置了断点。有什么想法吗？
@Abu - 我的名字弄错了，已经有一段时间了，请确保您使用的是submitHandler 而不是successHandler，就像更新后的答案一样
@Nick：我已更改为 submitHandler 但同样的事情不执行 PostData
@Abu - 你有我可以看到的页面吗？
您希望如何查看页面？你要我送你什么的？

【解决方案2】：

为什么不使用 ASP.NET 的验证控件进行服务器端验证？它的优点是更难覆盖，因为如果用户将浏览器配置为不运行 JavaScript，则可以禁用客户端验证。

【讨论】：

@Mathhew：我不能使用服务器端，我在 html 页面上使用 WCF 服务。