jquery.validator 和 formhash 一起工作时遇到问题

Question

我正在尝试使用jquery.validator 插件来验证我的表单，然后对密码进行哈希处理，但我遇到了问题。如果我提交完整填写的表单，它可以正常工作，但如果我尝试提交带有空字段的表单，则哈希会提交表单是否有效。在触发哈希函数之前，我尝试了各种方法来测试表单是否有效，但我得到了未定义的函数错误。

有没有办法让它们一起工作？

形式：

<form action="process_register.php" method="post" id="user_register_form" name="user_register_form" class="login_form_box">
<table id="home_register_box">
<?php if(isset($reg_error)){echo "<h3 class='red'>$reg_error</h3>";}?>
    <tr>    
        <td><label for="username">Username</label></td><td><input type="text" id="reg_user" name="username" required=""/></td><td><div id="user_ok"><img alt="correct tick for user" src="images/tick.png"></div><div id="user_error"><img alt="incorrect cross user" src="images/cross.png"></div></td><td id="user_taken_error" style="display:none;"><span class='red error_margin med_text'>Already in use!</span></td>
    </tr>
    <tr>    
        <td><label for="name">Name</label></td><td><input type="text" id="name" name="name" required=""/></td>
    </tr>
    <tr>    
        <td><label for="email">Email</label></td><td><input type="email" id="reg_email" name="email" required=""/></td><td><div id="email_ok"><img alt="correct tick for email" src="images/tick.png"></div><div id="email_error"><img alt="incorrect cross email" src="images/cross.png"></div></td><td id="user_email_error" style="display:none;"><span class='red error_margin med_text'>Already registered!</span></td>
    </tr>                                       
    <tr>
        <td><label for="password">Password</label></td><td><input type="password" name="password" id="password" required=""/></td>
    </tr>
    <tr>
        <td></td><td><input type="submit" class="submit clickable" value="Register" onclick="formhash_register(this.form, this.form.password);" /></td>
    </tr>
</table>

验证

        <script>
        jQuery(document).ready(function() {
            $("#user_register_form").validate({
                rules: {
                    username: "required",
                    name: "required",
                    email: {
                    required: true,
                    email: true
                    }                                                               
                }                   
            });
        });                 
    </script>   

js 链接

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

形成哈希

function formhash_register(form, password) {

   // Create a new element input, this will be out hashed password field.
   var p = document.createElement("input");
   // Add the new element to our form.
   form.appendChild(p);
   p.name = "p";
   p.type = "hidden"
   p.value = hex_sha512(password.value);
   // Make sure the plaintext password doesn't get sent.
   password.value = "";
   // Finally submit the form.
   form.submit();

}

Answer 1

当您设置提交按钮以调用您的 formhash_register 函数时，您正在覆盖 jQuery Validate 正在执行的操作。而是使用 Validate 库的 submitHandler 选项，该选项仅在表单有效时调用：

        $("#user_register_form").validate({
            rules: {
                username: "required",
                name: "required",
                email: {
                required: true,
                email: true
                }                                                               
            },
            submitHandler:function(form){
               // Create a new element input, this will be out hashed password field.
               var p = document.createElement("input");
               // Add the new element to our form.
               form.appendChild(p);
               p.name = "p";
               p.type = "hidden"
               p.value = hex_sha512($('#password').val());
               // Make sure the plaintext password doesn't get sent.
               password.value = "";
               return true; //this tells validate to submit the form
            }                
        });