将需要的输入追加到现有表单中

append required input into existing form

本文关键字：表单 追加 输入      更新时间：2023-09-26

我遇到了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>

事实上它是(与此不同的是，新输入需要=")，但这个新输入根本不需要-即使这个输入是空的，我也可以发送表单。我试图通过追加所需，所需="所需"，所需=true，所需="真"，通过追加只是输入，然后jQuery .prop或/和.attr，由JS的例子从链接-但它仍然不起作用。

第二个问题:在ajax附加内容和明确的值之后，我在所需的输入字段周围有红色边框-是否有任何简单的方法来删除它(但要显示此边框和信息，如果用户将尝试发送表单与此输入空)在FF,Chrome,IE ?

在这里的第一个帖子…

提前感谢您的任何建议!

编辑:有趣的是:当我提交了我的表单几次(所以我有几个输入字段)，我执行$("input").attr('required',true).prop('required', false);然后显然表单没有任何必要的输入。然而，当我用prop "true"执行它时，只需要原始输入，所有通过append添加的内容仍然可以为空…

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

  1. 如何在提交表单时添加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.
    }
});

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

    试试这个，

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

    或

    $("#name_add").attr('required',true);
    相关文章：