jQuery验证，提交处理程序和提交表单

Question

我在执行以下代码时遇到一些问题。

1. 该代码提交了，但是它什么也没做，它返回到同一屏幕，似乎表单的值尚未提交。

    <script type="text/javascript"> $(document).ready(function(){ $("#signin_form").validate({ debug: false, rules: { /// }, messages: { /// }, submitHandler: function(form) { var result; $.post('test.php', $('#signin_form').serialize(), function(data){ result = $.parseJSON(data); if (result.flag == 'false'){ $('#results').show() } }) .success(function(data){ if (result.flag == 'true'){ form.submit(); } }, 'json'); } }); }); </script> 

2. 如果我将代码更改为以下代码，则它可以正常工作，并带我到正确的屏幕，但是我需要验证验证码，我不确定这是否是正确的位置，我尝试使用beforeSubmit，但是则验证码未通过验证。

    <script type="text/javascript"> $(document).ready(function(){ $("#signin_form").validate({ debug: false, rules: { /// }, messages: { /// }, submitHandler: function(form) { form.submit(); } }); }); </script> 

$ .post有一些我不了解的地方...并且不提交信息。

有谁知道这可能是什么？ 谢谢！

Answer 1

您无需更改form提交的方式，在这种情况下，为了验证验证码，请使用jquery.validate remote功能。

围绕jquery.validate的remote使用存在一些问题。 检查是否执行以下操作：

1）确保仅使用jQuery 1.6.1及更高版本。

2）使用“同步”选项进行远程执行（默认为异步），并将async参数设置为false。

---

用法示例：

假设这是我的表格...

HTML：

将id和name属性添加到所有表单元素或仅添加验证码（必须同时具有两者）。

<form id="signin_form" action="save.php" method="POST">
  Enter captcha: O1S2C3A4R
  <br/>
  <input type="text" id="captcha" name="captcha" value=""/>
  <input type="submit" id="save" name="save" value="Save"/>
</form>

jQuery的：

添加type ， async和data参数。 最后一个参数将验证码值传递给check.php文件，这就是为什么该元素需要id属性的原因。 然后，您可以使用此选择器$('#captcha') 。

（对我来说这更好，但您也可以使用其他选择器类型按名称调用元素）

要知道，您还需要为remote定义一条错误消息，在这种情况下，我使用了Invalid captcha 。

$(document).ready(function(){

    $("#signin_form").validate({
        rules: {
            captcha: {
                required: true,
                remote: { 
                    url:"check.php",
                    type:"post",
                    async:false,
                    data: {
                        /* this is the name of the post parameter that PHP will use: $_POST['captcha'] */
                        captcha: function() {
                            return $.trim($("#captcha").val());
                        }
                    }
                }
            }
        },
        messages: {
            captcha: {
                required: "*",
                remote: "Invalid captcha"
            }
        }
    });

});

PHP：check.php

在这一点上，重要的是使用"true"或"false"作为字符串来告知jquery.validation插件（如果验证码有效或无效）。 在这种情况下，如果captcha等于O1S2C3A4R，那么它是有效的，并且在客户端，您将看到submit将处理form到html form action属性中指定的save.php文件。

<?php

    $captcha = $_POST['captcha'];

    if($captcha == "O1S2C3A4R"){
        echo "true";
    } else {
        echo "false";
    }

?>

---

这样做，您可以毫无问题地验证整个form ，还可以在不更改插件功能的情况下远程检查验证码值。

您也可以一起测试所有这些代码，然后看它是否有效:-)

希望这可以帮助。

Answer 2

Javascript：

<script type="text/javascript">
    $(document).ready(function(){
        $("#signin_form").validate({
            rules: {
                captcha: {
                    remote: {
                        url: "remote.php"
                        }
                    }
                }
            },
            messages: {
                captcha: {
                    remote: "Please enter the text in the captcha."
                }
            }
        });
    });
</script>

HTML形式：

<form id="signin_form">
    <input type="text" name="captcha">
    <input type="submit">
</form>

PHP：

$response = $_GET['captcha']; 
$answer  = 'captcha_answer';

if($response==$answer){
    echo 'true'; 
} else {
    echo 'false'; 
}

很抱歉将这一部分纳入答案-我不允许发表评论：

请记住，将'async'参数设置为false会锁定页面，直到得到响应为止，而这可能不是您想要的。 如果验证库正在等待远程验证的响应，则该库应阻止正常表单提交，至少在较新版本中（我使用的是jQuery 1.7.2和Validation 1.10.0）。

IIRC jQuery Validate库会将除精确字符串“ true”以外的任何内容都视为错误。 根据拒绝的原因，它可以用来传递不同的自定义消息。 json_encode添加了额外的引号，导致jQuery Validate将其视为自定义错误消息。