如何验证表单内的输入和表单外的提交按钮

Question

根据要求，我正在尝试验证表单。

实际上我在引导框模态对话框中传递表单输入元素并在模态对话框中动态传递提交按钮。

当 input type=submit 存在时，它能够验证表单 inputs.But 表单内没有提交按钮，因为我在模态中传递它，它无法验证表单。例如：

<form id="form_id">
Name:<input type="text" required>
<input type="submit" value="Submit">
</form>

$("#form_id").submit(function(e)){
//validation is ok
return false;
}

没关系，但是，现在处于模态：

    var data="<form id="form_id">
    Name:<input type="text" required>
    </form>"; //getting from server

            $.ajax({
            url : 'url',
            type : 'get',
            async : true,
            data : data,
            success : function(data) {
                modalDialog = bootbox.dialog({
                    size : 'large',
                    title : "Title"
                    show : false,
                    message : data,
                    buttons : {
                        success: {
                            label : "Close window",
                            className : "btn-default",
                            callback : function() {
  return false;
        //after clicking submit button it should ask required if no data input,and stay in dialog as what happened previous scenario.But dialog is closed.

                            }
                        }
                    }
                });
                modalDialog.on('shown.bs.modal', function() {
                });

                modalDialog.modal('show');

            }

        });

Answer 1

满足所有条件后使用JavaScript提交表格。

document.getElementById('form_id').submit();

或 jquery

("#'form_id'").submit();

现在这是添加了 "submit" 的代码

    var data="<form id="form_id">
Name:<input type="text" required>
</form>"; //getting from server

        $.ajax({
        url : 'url',
        type : 'get',
        async : true,
        data : data,
        success : function(data) {
            modalDialog = bootbox.dialog({
                size : 'large',
                title : "Title"
                show : false,
                message : data,
                buttons : {
                    success: {
                        label : "Close window",
                        className : "btn-default",
                        callback : function() {

("#'form_id'").submit();
  return false;
        //after clicking submit button it should ask required if no data input,and stay in dialog as what happened previous scenario.But dialog is closed.

                        }
                    }
                }
            });
            modalDialog.on('shown.bs.modal', function() {
            });

            modalDialog.modal('show');

        }

    });

Answer 2

像这样尝试

在 html

中将 required 添加到您的输入类型

 <form id="frmPlate">
    <input type="text" name="Name" required="required" />
</form>
<button type="submit" onclick="CheckValidation();"> Submit</button>

并且您可以在 jquery 中验证，如下面的代码

function CheckValidation(){
    var frmvalid = $("#frmPart").valid();
    if (!frmvalid) {
        return false;
    }
}

如何验证表单内的输入和表单外的提交按钮

How to validate inputs inside form and submit button outside the form

javascript

validation

jquery

bootstrap-modal

bootbox