【发布时间】：2021-12-21 00:43:55
【问题描述】：
我似乎无法访问我的引导箱中的任何元素。我已经尝试重命名所有字段，但它不会验证并且不会给我一个值：
我的 BootBox 代码，包括一些调试尝试：
$(document).on("click", "#btnNew", function () {
//$("#btnNew").click(function () {
var form = $("#newSubjectCard").html();
bootbox.dialog({
message: form,
title: "Add New Subject",
buttons: {
close: {
label: 'Cancel',
className: "btn btn-sm btn-danger",
callback: function () { }
},
success: {
label: "Add Subject",
className: "btn btn-sm btn-primary",
callback: function () {
if ($("#newSubjectName").val() == "" || $("#newSubjectEmail").val() == "") {
console.log($("#newSubjectName").val());
console.log($("#newSubjectEmail").val());
console.log("Fail");
return false; // keeps dialog open
} else {
//addCustomer();
console.log($("#newSubjectName").val());
console.log($("#newSubjectEmail").val());
//console.log("tried to submit");
}
}
}
}
});
$("#addCustomer").validate({
// Specify validation rules
rules: {
newSubjectName: "required",
newSubjectEmail: {
required: true,
email: true
}
},
messages: {
newSubjectName: "Please enter a name",
newSubjectEmail: "Please enter a valid email address"
},
submitHandler: function (form) {
console.log("submitted");
}
});
//});
})
我的表格：
<div id="newSubjectCard" class="d-none">
<form id="addCustomer">
<div class="form-row">
<div class="col-auto">
Name:
<input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
</div>
</div>
<div class="form-row">
<div class="col-auto">
Email:
<input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
</div>
</div>
<div class="form-row">
<div class="col-auto">
Group:
<input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
</div>
</div>
</form>
</div>
我一直盯着这个屏幕很久了，我觉得我的眼睛要跳出来了。提前致谢！
**** 编辑 **** 为了解决这个问题，我将表单代码直接移到了 JS 中，这样就不会重复了。谢谢大家的帮助！：
var form = `<div id="newSubjectCard">
<form id="addCustomer">
<div class="form-row">
<div class="col-auto">
Name:
<input type="text" id="newSubjectName" name="newSubjectName" class="form-control" placeholder="JANE DOE">
</div>
</div>
<div class="form-row">
<div class="col-auto">
Email:
<input type="text" id="newSubjectEmail" name="newSubjectEmail" class="form-control" placeholder="JANE.DOE@GMAIL.COM">
</div>
</div>
<div class="form-row">
<div class="col-auto">
Group:
<input type="text" id="newSubjectGroup" name="newSubjectGroup" class="form-control" placeholder="MR. JOHNS CLASS">
</div>
</div>
</form>
</div>`;
bootbox.dialog({
message: form,
title: "Add New Subject",
buttons: {
close: {
label: 'Cancel',
className: "btn btn-sm btn-danger",
callback: function () { }
},
success: {
label: "Add Subject",
className: "btn btn-sm btn-primary",
callback: function () {
if ($("#newSubjectName").val() == "" || $("#newSubjectEmail").val() == "") {
console.log($("#newSubjectName").val());
console.log($("#newSubjectEmail").val());
console.log("Fail");
$("#addCustomer").valid;
return false; // keeps dialog open
} else {
//addCustomer();
console.log($("#newSubjectName").val());
console.log($("#newSubjectEmail").val());
//console.log("tried to submit");
}
}
}
}
【问题讨论】：
-
我相信，由于您使用引导箱的方式，您有重复的元素。您在 html 中拥有的模板中的那些，然后是您制作的副本中的那些传递到引导箱以显示在对话框中。重复的 ID 会破坏事物，或者值来自模板而不是对话框。
-
@Ouroborus - 你是对的。让我大吃一惊的是，我从我的应用程序的另一部分复制了大部分代码，并且可以在那里找到。我将 HTML 粘贴在 2 个反引号之间，并将其直接分配给表单 var。现在工作。谢谢！
-
.. 啊，我的原始代码有效，因为表单 ID 是动态的。
标签： jquery bootstrap-4 bootbox