JQuery Ajax 使用所需的 textarea 完成

Posted 2023-05-07

【中文标题】JQuery Ajax 使用所需的 textarea 完成

【英文标题】：JQuery Ajax Done with required textarea

【发布时间】：2017-08-23 06:54:47

【问题描述】：

每个人。我有一个（一组）表格，里面有一个文本区域。此文本区域具有属性required。它按预期工作。如果用户尝试在未填写文本区域的情况下提交表单，浏览器会突出显示它并通知用户。

我的问题是我拦截了使用 JQuery AJAX 提交的表单，所以我可以在不重新加载页面的情况下通知用户。代码如下：

$(function () 
$('form').each(function (id, el) 
    $(el).submit(function (event) 
        event.preventDefault();
        var _data = $(el).serialize();
        alert(_data);
        $.ajax(
                type: 'POST',
                url: $(el).attr('action'),
                data: _data
        )
        .done(function(response) 
            $("#notify-modal").find('.modal-body').removeClass('alert-danger');
            $("#notify-modal").find('.modal-body').addClass('alert-success');
            $("#notify-modal").find('.modal-body').text('Já recebemos sua história! Obrigado por compartilhá-la conosco!');
            $("#notify-modal").modal('show');
            $(el).find('textarea').val('');
        )
        .fail(function(data) 
            $("#notify-modal").find('.modal-body').removeClass('alert-success');
            $("#notify-modal").find('.modal-body').addClass('alert-danger');
            $("#notify-modal").find('.modal-body').text("Erro ao enviar história! Contate os administradores do site! " + data.responseText);
            $("#notify-modal").modal('show');
        );
    );
);

);

当用户提交有效信息时，AJAX 函数按预期工作，发布到我的 php 脚本并显示通知用户的模式。但请注意，在.done() 函数中有一条语句在提交数据后清除文本区域（$(el).find('textarea').val('');）。我的问题是，当我清除 textarea 时，它会突出显示，即使数据已正确提交，就像 在提交之前已被清除一样。如何防止这种行为？

【问题讨论】：

当你说突出显示时，你的意思是它是集中的吗？如果是这样，您可以使用 jQuery 的 .focus() 方法将焦点设置到您想要的任何元素。

在 Firefox 中，它不仅获得焦点。这对我来说没有问题。但是 textarea 也会发出红光，表示“有问题”。你可以在这里看到它：imgur.com/gallery/nO4ed我的通知模式出现了，而且文本区域也被突出显示。

啊，我明白了。那是因为它是必需的，无论用户是否提交了任何东西。查看this answer 了解如何继续。另一个选择是将文本区域的值设置为空格 ' ' 而不是空 ''。

@JoeLissner 您的' ' 解决方案似乎是一个不错的解决方案，虽然有点 gambiarra (kludge)。无论如何，关于您的声明，it is required, regardless of whether or not the user has submitted anything，请注意图像中的第二个表单没有发光，因为没有提交任何数据。

对，但是第二个表单也没有交互。仅当存在值然后将其删除时，它才会将其标记为错误。如果某个值从未存在，那么它只会在用户尝试通过表单提交按钮或未阻止默认事件的输入提交表单时进行标记。

【参考方案1】：

那是因为它是必需的，无论用户是否提交了任何东西。查看this answer 了解如何继续。另一个选择是将文本区域的值设置为空格 ' ' 而不是空 ''。

Image of error provided by Mateus Felipe

第二个表单没有被交互，这就是它没有显示错误的原因。仅当存在值然后将其删除时，它才会将其标记为错误。如果某个值从不存在，那么它只会在用户尝试通过表单提交按钮或未阻止默认事件的输入提交表单时进行标记。