Javascript 使用jquery进行引导表单验证

我正在尝试使用jquery验证表单，因为我只需要在插入第二个表单后调用控制器方法。以前我有一个类型为submit的输入，当我单击它时，结果是以下警报：

现在，我将输入更改为显示模式的按钮类型，并希望在单击按钮时显示相同的警报，我尝试了以下操作，但无效：

$('#formContratto').validate({
            rules: {
                NumeroAutobus: {
                    required: true
                },
                Descrizione: {
                    required: true
                },
                DocContratto: {
                    required: true
                },
                NumeroAutorizzazione: {
                    required: true
                },
                DataScadenza: {
                    required: true
                },
                idAbbonamento: {
                    required: true
                }
            },
            highlight: function (element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function (element) {
                element.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error').addClass('Done');
            }   
        });

这是输入按钮：

<div class="col-sm-2"><input type="button" value="@Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" onclick="submitform();" /></div>

这就是页面的脚本：

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();

            $('#formContratto').validate({
                rules: {
                    NumeroAutobus: {
                        required: true
                    },
                    Descrizione: {
                        required: true
                    },
                    DocContratto: {
                        required: true
                    },
                    NumeroAutorizzazione: {
                        required: true
                    },
                    DataScadenza: {
                        required: true
                    },
                    idAbbonamento: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function (element) {
                    element.text('OK!').addClass('valid')
                        .closest('.control-group').removeClass('error').addClass('Done');
                }   
            });
        });

        $('#modalLoginForm').on('show.bs.modal', function (e) {
            var button = e.relatedTarget;
            if ($("#NumeroAutobus").val().length == 0
                || $("#Descrizione").val().length == 0
                || $("#DocContratto").val().length == 0
                || $("#NumeroAutorizzazione").val().length == 0
                || $("#DataScadenza").val().length == 0
                || $("#idAbbonamento").val().length == 0) {
                e.stopPropegation();
            }
        });

        function submitform() {
            debugger;
            var f = document.getElementsByTagName('form')[0];
            if (f.checkValidity()) {
                f.submit();
            }
        }
    </script>

$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
$（'#formcontatto'）。验证({
规则：{
NumeroAutobus：{
必填项：true
},
描述：{
必填项：true
},
DocContratto：{
必填项：true
},
数字地址：{
必填项：true
},
数据段：{
必填项：true
},
伊达博纳门托：{
必填项：true
}
},
亮点：功能（元素）{
$（元素）。最近的（'.control group'）。removeClass（'success'）。addClass（'error'）；
},
成功：功能（元素）{
element.text（'OK！'）.addClass（'valid'）
.closest（'.control group'）.removeClass（'error'）.addClass（'Done'）；
}   
});
});
$on（'show.bs.modal'，函数（e）{
var按钮=e.相关目标；
if（$（“#numerautobus”）.val（）.length==0
||$（“#descripione”）.val（）.length==0
||$（“#doccontatto”）.val（）。长度==0
||$（“#numerioautorizzazione”）.val（）.length==0
||$（“#DataScadenza”）.val（）.length==0
||$（“#idAbbonamento”）.val（）.length==0）{
e、 停滞不前（）；
}
});
函数submitform（）{
调试器；
var f=document.getElementsByTagName（'form'）[0]；
如果（f.checkValidity（））{
f、 提交（）；
}
}

有什么想法吗

---

非常感谢。

为了实现这一点：

您的按钮需要设置为type=“submit”

提交按钮应该出现在表单标签中

找到下面的工作小提琴。如果你不想把表格放到模态中，你可以把表格拿出来

我已经编辑了小提琴。您可以使用

submitHandler

方法通过使用

e.preventDefault（）来阻止窗体的默认操作并处理您的下一个操作


$（函数（）{
$（“#formContratto”）。验证({
规则：{
NumeroAutobus：{
必填项：true
},
描述：{
必填项：true
}
},
信息：{
NumeroAutobus：{
必填：“请输入一些数据”
},
描述：{
必填：“请提供一些数据”
}
},
submitHandler:函数（表单，e）{
e、 预防默认值（）；
警报（“提交的表格”）；
返回false；
}
});
});

开放模态
&时代；
添加内容
第一个字段：
第二个字段：
拯救
接近
为了实现这一点：

您的按钮需要设置为type=“submit”
提交按钮应该出现在表单标签中
找到下面的工作小提琴。如果你不想把表格放到模态中，你可以把表格拿出来

我已经编辑了小提琴。您可以使用
submitHandler
方法通过使用
e.preventDefault（）来阻止窗体的默认操作并处理您的下一个操作


$（函数（）{
$（“#formContratto”）。验证({
规则：{
NumeroAutobus：{
必填项：true
},
描述：{
必填项：true
}
},
信息：{
NumeroAutobus：{
必填：“请输入一些数据”
},
描述：{
必填：“请提供一些数据”
}
},
submitHandler:函数（表单，e）{
e、 预防默认值（）；
警报（“提交的表格”）；
返回false；
}
});
});

开放模态
&时代；
添加内容
第一个字段：
第二个字段：
拯救
接近
我解决了这个问题

在显示模态的方法上，我添加了else语句，如下所示：

 $('#modalLoginForm').on('show.bs.modal', function (e) {
    var button = e.relatedTarget;
    if ($("#NumeroAutobus").val().length == 0
        || $("#Descrizione").val().length == 0
        || $("#DocContratto").val().length == 0
        || $("#NumeroAutorizzazione").val().length == 0
        || $("#DataScadenza").val().length == 0
        || $("#idAbbonamento").val().length == 0) {
        e.stopPropegation();
    }
    else {
        event.preventDefault();
    }
});

使用preventDefault，我避免了对服务器的调用，并且正确地打开了模式。希望它能帮助别人。
我解决了这个问题

在显示模态的方法上，我添加了else语句，如下所示：

 $('#modalLoginForm').on('show.bs.modal', function (e) {
    var button = e.relatedTarget;
    if ($("#NumeroAutobus").val().length == 0
        || $("#Descrizione").val().length == 0
        || $("#DocContratto").val().length == 0
        || $("#NumeroAutorizzazione").val().length == 0
        || $("#DataScadenza").val().length == 0
        || $("#idAbbonamento").val().length == 0) {
        e.stopPropegation();
    }
    else {
        event.preventDefault();
    }
});

使用preventDefault，我避免了对服务器的调用，并且正确地打开了模式。希望它能帮助别人。
那么，它是否有效，但消息的外观和感觉是不同的？或者它完全不起作用？它根本不起作用？您的表单是在页面加载时默认创建的还是在某些事件后动态添加的？我使用页面的脚本部分和按钮代码编辑帖子。您的表单是在哪里创建的？那么，它起作用了吗？但是消息的外观和感觉是不同的？还是它