Question

到目前为止，这是我的代码：

$(function () {
    $('.contact-form').submit(function (event) {
        $(this).find("input , textarea").each(function () {
            var input = $(this);
            if (input.val() == "") {
                event.preventDefault();
                $("label, p").addClass("error");
                input.addClass("error").one("keydown", function () {
                    $("label").removeClass("error");
                    self.removeClass("error");
                });
            }
        });
    });
});

它的作用： 它可以防止表单重定向到php脚本，如果没有填充，它会将所有字段变为红色（错误类），并为标签提供错误类。

我需要帮助： 修复所以，如果一个字段被填充，则删除错误类，因为它现在还没有。

修复，以便在填充时在特定字段上删除标签错误类（现在它将删除所有字段上所有标签上的类）

在验证每个字段/ textarea被填充时运行此代码：

var form = $(this);
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()
}).done(function () {
    // Optionally alert the user of success here...
    console.log("jag lyckades!");
}).fail(function () {
    // Optionally alert the user of an error here...
    console.log("jag lyckades INTE");
});
event.preventDefault(); // Prevent the form from submitting via the browser.

我的HTML

<form class="contact-form" action="<?= path(" postform.php "); ?>" method="post" validate>
    <div class="row">
        <div class="col-sm-6">
            <label for="firstname">Förnamn*</label>
            <input type="text" class="required" name="firstname" />
        </div>
        <div class="col-sm-6">
            <label for="lastname">Efternamn</label>
            <input type="text" name="lastname" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <label for="email">E-post*</label>
            <input type="text" name="email" />
        </div>
        <div class="col-sm-6">
            <label for="number">Telefon*</label>
            <input type="text" name="number" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <label for="message">Meddelande*</label>
            <textarea name="message"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <p>Fält markerade med * är obligatoriska</p>
            <input class="btn-form" type="submit" value="Skicka">
        </div>
    </div>
</form>

谢谢......我真的很感谢你的时间

编辑：这是我目前的代码： http://jsfiddle.net/dmyhd90d/

我现在的问题：在没有更多表单错误的情况下运行ajax调用（即使现在没有填充它也会运行）

标签错误类正在填写字段时立即删除错误类，但字段会保持错误分类，直到我点击发送按钮，然后重新验证。

Answer 1

让我们把它全部发布在一个地方，因为评论不再是这个地方了

第一：通过表单提交，您可以经常在重新验证时通过添加

来清除错误字段

$('.contact-form').submit(function (event) {
    $('.error').removeClass("error"); // This

您可以清除错误并从头开始重新验证整个表单。

第二，你正在尝试绑定一个事件，这样当你编辑输入时，它会清除该输入的错误及其标签，但是现在你正在清除所有标签错误，所以你可以像这样更改它

 if (input.val() == "") {
            event.preventDefault();
            $("label, p").addClass("error");
            input.addClass("error").one("keydown", function () {
                // $("label").removeClass("error");
                $("label[for='" + $(this).attr('name') + "']").removeClass("error"); // becomes this
                self.removeClass("error");
            });
        }

将您正在查看的输入与其标签相关联。 BTW只是让你知道把输入id =“something”和标签为“”某事物“很好，因为当你点击标签时，它会将标签链接到html中的输入。请记住保留您的姓名以便提交。

另外我认为

 $("label, p").addClass("error");

会立即为所有标签添加错误。您可能还想更改它以仅将错误添加到有错误的字段

$("label[for='" + $(this).attr('name') + "'], p").addClass("error");

编辑以回答评论

 $('.contact-form').submit(function (event) {
    $('.error').removeClass("error"); // This
    $(this).find("input , textarea").each(function () {
        var input = $(this);
        if (input.val() == "") {
            event.preventDefault();
            $("label[for='" + $(this).attr('name') + "'], p").addClass("error"); 
            input.addClass("error").one("keydown", function () {
                $("label[for='" + $(this).attr('name') + "']").removeClass("error");
                self.removeClass("error");
            });
        }
    });
    if ($(".errors").length <= 0) { // If there are no more error classes
        // Do $.ajax() here
        // http://api.jquery.com/jquery.ajax/ <- you need to read this and other similar SO posts about ajax
    }
});

javascript ajax发布表格功能和验证

1 个答案: