Question

我有一个注册表单，由CodeIgniter的验证助手处理。如果表单验证返回false，它将作为JSON对象返回错误。

到目前为止，代码工作正常，但每次我尝试重新提交具有不同细节的表单时，它只是不断添加相同的错误，并且如果我已经不会删除这些错误消息键入输入字段的正确值。

我需要做的是，每次按下提交按钮时，实际上都会重新验证表单。

这就是我现在所拥有的。

AJAX部分：

$(document).ready(function() {

    $("form#signup").on('submit', function(e) {
        var from = $(this);

        $.ajax({
            url: from.attr('action'),
            type: from.attr('method'),
            data: $(from).serialize(),
            dataType: 'json',
            success: function(data) {
                if(data.st == 0) {
                    for(var key in data.msg) {
                        // Add class and label with error message after input field 
                        $("form#signup input#" + key).addClass("input-error");
                        $("form#signup input#" + key).after("<label class='error'>" + data.msg[key] +"</label>");
                    }   
                    // Shake the register button
                    $("input#register").shake_it();
                } else {
                    alert("It works!");
                }
            }
        });
        e.preventDefault();
    });
});

来自我的注册管理员的片段：

if($this->form_validation->run() == FALSE) {    
    // If validation returns false, return errors as JSON
    $this->output->set_content_type('application_json');
    $this->output->set_output(json_encode(array('st' => 0, 'msg' => $this->form_validation->error_array())));
    return false;
} else {
    // Continue register process
}

Answer 1

您可以在函数开头删除错误消息：

$("form#signup").on('submit', function(e) {
    var from = $(this);

    $("form#signup input.input-error").removeClass("input-error")
                                      .nextAll(".error")
                                      .remove();

    //Ajax call
});

Answer 2

在添加新课程之前，您应该删除上一课程。所以添加

$("form#signup input#" + key).removeClass("input-error");

前

$("form#signup input#" + key).addClass("input-error");

这消除了旧错误＆amp;为每次提交添加新的错误消息（如果有）。

Answer 3

$("form#signup").on('submit', function(e) {
    $("form#signup input").removeClass('input-error'); // REMOVES input-error class from input fields
    $(".error").remove(); // Removes all error-spans from form.
    var from = $(this);
    ...
    ...

此处的第2行和第3行将删除先前验证中的错误，然后再次运行验证。

重新提交后，AJAX会再次验证所有字段

3 个答案: