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

Question

我遇到了ajax的小问题。 让我们描述一下情况：

1. 我有一个带有Submit = javascript：function（）的表格

2. 函数将使用一些值调用AJAX，并且成功后，我想将带有“必需”输入的某些内容附加到现有表单中。

我尝试了很多事情，其中​​大部分来自： 如何在Javascript中设置HTML5必需属性？ ，但仍然无法达到。

示例代码：

<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>

实际上是（有区别的是，新的输入具有required =“”），但是根本不需要此新的输入-即使此输入为空，我也可以发送表格。 我试图通过附加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

这是一个由多个问题组成的问题。 因此，我将尝试分别识别并回答它们。

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

尝试以下操作（您的选择器错误）：

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

2. 如何摆脱红色边框？

我建议您使用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.
    }
});

我不确定是否收到您的问题，但希望对您有所帮助。