Question

您好我使用jQuery的验证（awesome）脚本来验证一个小表单。它只是一个电子邮件注册，它周围没有很多空间来显示错误消息。我可以通过成功的AJAX提交将输入值更改为“Thank You”，但是如果它无效，我想更改它以显示正确的错误消息。

HTML

<div id="emailBox">
    <form id="email" action="/PHP/email-cURL.php" method="post">
    <input type="text" id="e" name="email1" value="Email Sign Up" class="swap_value signup" />
    <input type="submit" value="" id="signUp" />
    </form>
</div>

和JS

$("#email").validate ({
        errorElement: "//what do I wrap error msg in to populate value?",
            errorPlacement: function(error, element) {
                error.appendTo( element.parent("div"));
            },

            submitHandler: function(form) {
            var dataString = $(form).serialize();
                $.ajax({
                    type: $(form).attr('method'),
                    url: form.action,
                    data: dataString,
                    clearForm: true,
                    success: function(data) {
                        if (data=="Error") {
                            $("#e").val('Error');
                        } else {
                            $("#e").val('Thank You');
                            }
                    }
                });
            return false;

           },
                       //rules,
                       //messages

有一种简单的方法吗？我不需要大量的代码，因为它只是一个简单的表单输入。

谢谢！

Answer 1

尝试返回JSON。这个PHP代码：

echo json_encode(array('success'=>false,'errorMsg'=>'Failed to set x');

输出此JSON：

{"success":false,"errorMsg":"Failed to set x"}

调整代码以处理JSON

    var dataString = $(form).serialize();
            $.ajax({
                type: $(form).attr('method'),
                url: form.action,
                data: json,
                clearForm: true,
                success: function(data) {
                    if (undefined !== data && true === data.success) {
                        $("#e").val('Thank you');  
                    } else {
                        var error = undefined === data.errorMsg ? 'Unknown error' : data.errorMsg;
                        $("#e").val(error);                                                        }
                }

Answer 2

将JSON发送回客户端，例如：

{ "status" : "error", "message" : "Email address already exists" }

在客户端上，将$ .ajax的dataType选项设置为'json'，并访问返回对象的属性：

success: function(json) {
             if (json.status == "error") {
                 $("#e").val(json.message);
             } else {
                 $("#e").val('Thank You');
             }
         }

如果无效，请更改文本输入的值

2 个答案: