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

时间:2014-03-12 11:48:58

标签: javascript php jquery forms validation

我正在尝试使用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();

}

1 个答案:

答案 0 :(得分:0)

当您设置提交按钮以调用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
            }                
        });