Question

我对ajax有一个小问题。我们来描述一下情况：

我有一个带有submit = javascript：function（）
函数会调用带有一些值的AJAX，并且在成功时我想要向现有表单添加一些带有'required'输入的内容。

我尝试了很多东西，大多数来自：How to set HTML5 required attribute in Javascript?，但仍然无法达到它。

示例代码：

<form id="myFormID" action="javascript:mycustomsubmit()">
    <input type="text" id="add" style="margin:2px;" required>
    <input type="submit" name="add" value="Add" class="btn btn-primary">
    <textarea rows="5"  id="custom_add"></textarea>

（...）关于ajax成功清除表单值并插入新的必需输入：

$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');

所以在这之后我的html代码看起来像这样：

<form id="myFormID" action="javascript:mycustomsubmit()">
        <input type="text" id="add" style="margin:2px;" required>
        <input name="anotherinput" type="text" required="">
        <input type="submit" name="add" value="Add" class="btn btn-primary">
        <textarea rows="5"  id="custom_add"></textarea>
</form>

实际上它是（有这个区别，新输入需要=“”），但这个新输入根本不需要 - 即使此输入为空，我也可以发送表单。我试图通过append required，required =“required”，required = true，required =“true”，通过只添加输入然后jQuery .prop或/和.attr，通过链接的JS示例来实现它 - 但它是还是行不通。

第二个问题：在ajax附加内容和清除值后，我在所需的输入字段周围有红色边框 - 是否有任何简单的方法可以删除它（但是如果用户将尝试使用此输入发送表单，则显示此边框和信息在FF，Chrome，IE？

首先发布在这里......

提前感谢任何建议！

编辑：有趣的是：当我提交我的表单几次（所以我的输入字段很少）并执行$("input").attr('required',true).prop('required', false);时，显然表单没有任何必要的输入。然而，当我用prop“true”执行它时，真的只需要原始输入，所有添加的append仍然可以为空......

Answer 1

试试这个，

$("input").attr('required',true);

或

$("#name_add").attr('required',true);

Answer 2

这是一个由多个问题组成的问题。所以我会尝试分别识别和回答它们。

如何在提交表单时在ID为“add”的输入字段后附加新的输入字段？

试试这个（你的选择器错了）：

$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');

如何摆脱红色边框？

我建议您使用jQuery来处理表单提交（未测试）：

    $('#myFormID').submit(function(e) {
    // Checking if all required fields are filled out.
    if (!e.target.checkValidity()) {
        // TODO: Not all required fields are filled out. Do something e.g. adding your new input field?

        // Preventing form submit to continue. I think this should prevent the red border. Not tested though...
        e.preventDefault();
    }
    else {
        // Everything is OK. Do whatever is needed.
    }
});

我不确定我是否有你的问题，但我希望它有所帮助。

将所需的输入附加到现有表格中

2 个答案: