如何更正错误未捕获的 typeError 验证器未定义并防止我的表单在错误时发布
Posted
技术标签:
【中文标题】如何更正错误未捕获的 typeError 验证器未定义并防止我的表单在错误时发布【英文标题】：How do I correct the error uncaught typeError validator is undefined and prevent my form from post if error 【发布时间】：2021-06-05 06:31:50 【问题描述】：这是我的情况。
第 1 部分：我按下 Index View.cshtml 上的链接以在调试模式下弹出我的模态 AddContact.cshtml（如下）如果我在文本框中键入任何内容或尝试，jquery 会抛出以下错误“typeError Validator not defined”使用下拉菜单。
请注意，我的索引视图有一个布局 _Layout.cshtml，其中包含脚本包：
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
但是，当我构建部分视图时 AddContact.cshtml ...我不使用布局 _Layout.cshtml，这就是我得到 typeError 验证器的原因吗？
所以，我认为这是一个大问题，我该如何修复 typeError？
第 2 部分，在我意识到第 1 部分中的错误之前，我在下面的 javascript 中添加了 $.validate() 似乎我的表单 $(#contactForm).validate() 在我的表单上总是抛出一个 NOT有效的。我想要发生的是我的模型中定义的错误消息会出现，如果有错误，$.ajax() 帖子会被阻止。
$("#btnSubmit").click(function ()
if ($("#contactForm1").validate())
alert("Form is Valid");
return true;
else
alert("Form is NOT Valid");
return false;
var frm = $('#contactForm1').serialize()
$.ajax(
type: "POST",
url: "/Home/AddContact/",
data: frm,
success: function (ajaxRespond)
if (ajaxRespond.dbUpdateResult == "success")
$("#myModal").modal("hide");
reloadContactLinks()
)
)
我有一个视图模型：设置了必需的注释
public class Contact
public int Contact_ID get; set;
public int Dataset_ID get; set;
public string Booth_UCID get; set;
[Required(ErrorMessage = "First Name is a required field")]
public string First_Name get; set;
[Required(ErrorMessage = "Last Name is a required field")]
public string Last_Name get; set;
public string Title_Role get; set;
public int Contact_Type_ID get; set;
[Required(ErrorMessage = "Email is a required field")]
public string Email get; set;
[Required(ErrorMessage = "Phone Number is a required field")]
public string Phone_Number get; set;
public string Email_2 get; set;
public string Phone_Number_2 get; set;
我的部分视图使用 JQuery Validate 和 Ajax Post
@model ResearchDataInventoryWeb.Models.Contact
@using (Html.BeginForm(new id = "contactForm1" ))
<div class="section_header2">Contact</div>
<div style="padding-top:5px;">
<table>
<tr>
<td>
<span class="display-label">UCID/Booth ID</span>
</td>
<td>
@Html.TextBoxFor(model => model.Booth_UCID, new placeholder = "<Booth/UCID>", @class = "input-box" )
</td>
</tr>
<tr>
<td>
<span class="display-label">Type</span>
</td>
<td>
<select class="input-box" id="contact_type">
<option value="contact_type">Contact Type*</option>
<option value="dataset_admin">Dataset Admin</option>
<option value="dataset_Provider">Dataset Provider</option>
<option value="department">Department</option>
<option value="external_collaborator">External Collaborator</option>
<option value="principal_investigator">Principal Investigator</option>
<option value="research_center">Research Center</option>
<option value="vendor">Vendor</option>
</select>
</td>
</tr>
<tr>
<td>
<span class="display-label">Name</span>
</td>
<td>
@Html.TextBoxFor(model => model.First_Name, new placeholder = "<First Name>", @class = "input-box-modal" )
@Html.ValidationMessageFor(model => model.First_Name, "", new @class = "text-danger" )
@Html.TextBoxFor(model => model.Last_Name, new placeholder = "<Last Name>", @class = "input-box-modal" )
@Html.ValidationMessageFor(model => model.Last_Name, "", new @class = "text-danger" )
</td>
</tr>
<tr>
<td>
<span class="display-label">Email</span>
</td>
<td>
@Html.TextBoxFor(model => model.Email, new placeholder = "<Email 1>", @class = "input-box-modal" )
@Html.ValidationMessageFor(model => model.Email, "", new @class = "text-danger" )
@Html.TextBoxFor(model => model.Email_2, new placeholder = "<Email 2>", @class = "input-box-modal" )
</td>
</tr>
<tr>
<td>
<span class="display-label">Phone</span>
</td>
<td>
@Html.TextBoxFor(model => model.Phone_Number, new placeholder = "<Phone 1>", @class = "input-box-modal" )
@Html.ValidationMessageFor(model => model.Phone_Number, "", new @class = "text-danger" )
@Html.TextBoxFor(model => model.Phone_Number_2, new placeholder = "<Phone 2>", @class = "input-box-modal" )
</td>
</tr>
<tr>
<td>
<span class="display-label">Job Title</span>
</td>
<td>
@Html.TextBoxFor(model => model.Title_Role, new placeholder = "<Job Title>", @class = "input-box" )
</td>
</tr>
<tr>
<td>
<span class="display-label">Organization</span>
</td>
<td>
<input class="input-box" type="text" placeholder="<Organization>" />
</td>
</tr>
</table>
<div style="padding-left:10px; margin-top:10px;">
<textarea rows="3" placeholder="Notes"></textarea>
</div>
</div>
<div class="centerButton" style="margin-top: 30px;">
<div style="margin-left:30px">
<submit id="btnSubmit" class="btn btn-default btn-sm" style="padding:14px"><span class="smallText_red" style="padding:30px">SAVE</span></submit>
</div>
<div style="margin-left:30px">
<submit class="btn btn-default btn-sm" style="padding:14px"><span class="smallText_red" style="padding:30px">REMOVE</span></submit>
</div>
</div>
<script type="text/javascript">
$("#btnSubmit").click(function ()
if ($("#contactForm1").validate())
alert("Form is Valid");
return true;
else
alert("Form is NOT Valid");
return false;
var frm = $('#contactForm1').serialize()
$.ajax(
type: "POST",
url: "/Home/AddContact/",
data: frm,
success: function (ajaxRespond)
if (ajaxRespond.dbUpdateResult == "success")
$("#myModal").modal("hide");
reloadContactLinks()
)
)
</script>
【问题讨论】：
这有用吗？ ***.com/a/53513205/3825777 你能试着做一个这样的可运行的sn-p吗？ ***.com/a/33681460/3825777 或者，像这样的 jsfiddle？ jsfiddle.net/duAkn 还是这个？ jsfiddle.net/Vikrant29/jr346y1u/5 感谢您的回复，但这些都不能解决我的问题。 谢谢你的帮助，但我不知道如何做代码sn-p$(function() ... your code here ... ); 将在 documentReady 上设置您的处理程序，即构建 DOM 模型。可能这会产生问题。
@Reflective 我不明白如何使用 $(function() ... my code ... 这是否意味着将其包裹在我的 $("btnSumbit).click(functio( ) ) 哪个有效，或者您是否建议将我的代码包装在 $(document).ready() 中。不过，谢谢，这个项目充满了开始和停止
【参考方案1】：
如果你想在 DOM 上工作，它应该已经准备好了，所以我建议你这样改变它，我希望它会有所帮助。如果没有，我们应该寻找其他问题。
编辑！！！这是一个非常粗略的示例，可能存在一些问题，但这是您应该使用验证器的方式。验证器捕获onsubmit 表单事件，因此不需要点击处理程序，如果你这样做，我相信第一次点击事件已被处理，它是蝙蝠。
<script type="text/javascript">
$(function()
var validator = $("contactForm1").validate(
submitHandler: function(form)
$(form).find('input[type=submit]').attr('disabled', 'disabled');
var frm =$(form).serialize()
$.ajax(
type: "POST",
url: "/Home/AddContact/",
data: frm,
success: function (ajaxRespond)
if (ajaxRespond.dbUpdateResult == "success")
$("#myModal").modal("hide");
reloadContactLinks()
)
);
);
</script>
【讨论】：
我按照你说的做了，$("#contactForm1).validate() 总是假的。如果我把 $("#contactForm1).validate() 拿出来，表单会运行 $ .ajax 没问题，但我不希望这是表单有错误，这太令人沮丧了，因为除了检查任何其他建议的错误外，它的效果很好。真的非常感谢你的尝试，我没想到会有任何回应 我现在是凌晨 3 点 - 如果仍然没有正确答案，我明天再看看 你不应该使用 '.click` 而是使用带有参数的 $("#contactForm1").validate()。成功提交有一个内部处理程序 哇，你工作到很晚。非常感谢你，如果我发现了什么，我一定会告诉你的。我通常会弄清楚这些事情，但到目前为止我还不是专家。我写了很多系统，但都是反复试验 您还应该在 HTML 中添加您的规则或将它们指定为 validate 中的选项...如果它只是required 并且您有输入，您可以像这样添加它 <input name="somename" value="somevalue" required>。顺便说一句，现代浏览器也将检查此属性（必需），如果字段未完成，即使不使用 jquery 验证器也会发出错误信号，但在这里您有更多选择。以上是关于如何更正错误未捕获的 typeError 验证器未定义并防止我的表单在错误时发布的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的 Promise 错误：TypeError：成员不是函数
如何使用自定义错误消息捕获“TypeError：无法读取未定义的属性（读取'0'）”？
如何修复 PHPUnit 中的“PHP 致命错误：未捕获的 TypeError：getTest() 参数”错误
未捕获的TypeError：googleAuth.then不是函数