如何使动态创建的字段作为jquery中的必填字段

Question

我已经动态创建了此字段，但我无法将其设置为必填字段。 您能否建议我在哪里做错了。

var mail = '<label for="title" class="col-xs-12" ><span class="glyphicon glyphicon-star" ></span >Additionals</label>' +
        '<div class="col-xs-6"><input class="form " id="additionalmail" type="email" required /></div>' +
        '<button type="button" class="btn btn-info class="col-xs-6" onclick="remove(' + intTextBox + ')"><span class="glyphicon glyphicon-minus-sign" ></span > Remove </button >';

---

更正了带有双重提示的错误

var mail = '
    <label for="title" class="col-xs-12" >
        <span class="glyphicon glyphicon-star"></span >Additionals
    </label>' + '
    <div class="col-xs-6">
        <input class="form" id="additionalmail" type="email" required />
    </div>' + '
    <button type="button" class="btn btn-info col-xs-6" onclick="remove(' + intTextBox + ')">
        <span class="glyphicon glyphicon-minus-sign" ></span > Remove 
    </button >
';

Answer 1

$("#btn1").click(function(){
   $("#mydiv").append('<label for="title" class="col-xs-12" ><span class="glyphicon glyphicon-star" ></span >Additionals</label><div class="col-xs-6"><input class="form " id="additionalmail" type="email" required /></div><button type="button" class="btn btn-info col-xs-6" onclick="remove(\' + intTextBox + \')"><span class="glyphicon glyphicon-minus-sign" ></span > Remove </button >');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv"></div>

<button id="btn1">TEST APPEND</button>

这是一个有效的附加程序，您不需要仅将onclick连接div，而必须反斜杠单引号。 希望能帮上忙，愉快的铺垫

Answer 2

Schema.json

{
    "title": "Form",
    "description": "info",
    "type": "object",
    "properties": {     

        "mailAddress": {
            "title": "mail Address",
            "required": true
        }
    }
}

Options.json

{
    "fields": {         

        "mailAddress": {
            "label": "mail Address",
            "order": "11",
            "type": "text"
        }
    }
}

View.json

{
    "parent": "bootstrap-create",
    "displayReadonly": true,
    "layout": {
        "template": "./HTML/UI/Template.html",
                    "bindings": {

                        "mailAddress": "#mailAddressLayout"

                    }
    }
}

Template.html

<div class="container">

    <legend class="alpaca-container-label">

        <span data-toggle="collapse" data-target="" style="cursor: pointer;">Form</span>

    </legend>

    <div class="row" id="mailAddressLayoutParent">
        <div class="col-xs-6" id="mailAddressLayout"></div>
        <button type="button" class="btn btn-info" onclick="addField()">
            <span class="glyphicon glyphicon-plus-sign"></span> Extra mail
        </button>
    </div>

</div>

code.js

var intTextBox = 0;
var target = "Content";

function addField() {
    $(document).ready(function () {

        intTextBox = intTextBox + 1;
        var contentID = $('#mailAddressLayoutParent');
        var newTBDiv = document.createElement('div');
        newTBDiv.setAttribute('id', 'fdname' + intTextBox);
        newTBDiv.setAttribute('class', 'row');      

        var mailbox = '<label for="title" class="col-xs-12" ><span class="glyphicon glyphicon-star" ></span >Extra mail Address</label>' +
        '<div class="col-xs-6"><input class="form-control " id="Mail1" type="email" required /></div>' +
        '<button type="button" class="btn btn-info class="col-xs-6" onclick="removeField(' + intTextBox + ')"><span class="glyphicon glyphicon-minus-sign" ></span > Remove mail </button >';
        newTBDiv.innerHTML = mailbox;
        contentID.after(newTBDiv);      

    });
}

function removeField(id) {

    if (intTextBox != 0) {

        $("#fdname" + id).remove();
    }
}

$(function () {

    $("#divNodeTabContent").alpaca({

        "schemaSource": "/json/UI/Schema.json",
        "optionsSource": "/json/UI/Options.json",
        "viewSource": "/json/UI/View.json",
        "options": {
            "fields": {                  



                "Mail1": {
                    "validator": function (callback) {

                        var value = this.getValue();
                        //var re = /^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                        var re = new RegExp(/^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);

                        if (re.test(value)) {

                            callback({
                                "status": true
                            });
                        } else {
                            callback({
                                "status": false,
                                "message": "Invalid Email Address"
                            });
                        }

                    }

                }

            },
            "form": {
                "buttons": {
                    "validate": {
                        "styles": "btn",
                        "title": "Submit",
                        "click": function () {
                            this.refreshValidationState(true);
                            if (this.isValid(true)) {

                                toastr.info("validations of the form looks good.", "Success");
                            } 
                        }
                    }
                }
            }   

        }        


    });

});