Javascript jQuery验证程序:表单拒绝验证
我有一个简单的Javascript文件需要运行。我知道它被渲染得很好,因为输入屏蔽部分工作得很好。但是,当我输入信息时,表单将不会验证。例如,如果我输入一个电话号码4位数的日志,然后检查验证,它会返回“true”。它不使用不引人注目的验证。该项目是在Visual Studio Enterprise 2015平台上编写的一个简单的ASP.NEt MVC网站。网站上有问题的页面是EditInfo页面,供您参考。一定有一些变量我需要设置,以使其工作,但我不知道它是什么。谢谢你的帮助,祝你度过愉快的一天 首先,这里是BundleConfig.cs文件。这部分(不是整个文件)是jquery.validate插件Javascript jQuery验证程序:表单拒绝验证,javascript,jquery,asp.net,forms,jquery-validate,Javascript,Jquery,Asp.net,Forms,Jquery Validate,我有一个简单的Javascript文件需要运行。我知道它被渲染得很好,因为输入屏蔽部分工作得很好。但是,当我输入信息时,表单将不会验证。例如,如果我输入一个电话号码4位数的日志,然后检查验证,它会返回“true”。它不使用不引人注目的验证。该项目是在Visual Studio Enterprise 2015平台上编写的一个简单的ASP.NEt MVC网站。网站上有问题的页面是EditInfo页面,供您参考。一定有一些变量我需要设置,以使其工作,但我不知道它是什么。谢谢你的帮助,祝你度过愉快的一天
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*",
"~/Scripts/additional-methods.js",
"~/Scripts/additional-methods.min.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.selectric.js",
"~/Scripts/jquery.validate.min.js"));
捆绑包在布局页面中呈现
@Scripts.Render("~/bundles/jqueryval")
app.js文件包含错误放置中使用的函数以及jquery.validator默认设置
if ($.validator) {
jQuery.validator.setDefaults({
invalidHandler: function (form, validator) {
if (!validator.numberOfInvalids())
return;
$('html, body').animate({
scrollTop: $(validator.errorList[0].element).offset().top - 150
}, 'fast');
$(validator.errorList[0].element).focus();
},
onkeyup: false
});
}
//
// Name: errorPlacementValidator
// Description: Used by the validator.
//
function errorPlacementValidator(error, element) {
if (element.is(":radio")) {
error.appendTo(element.closest("[class*='col-sm-']"));
}
else if (element.parents('.selectric-wrapper').size() > 0) {
console.log('selectric error');
error.appendTo(element.closest('[class*="col-sm-"]'));
}
else {
error.appendTo(element.parent());
}
}
//
// Name: highlight
// Description: Used by the validator to show the error messages.
//
function highlightValidator(element, errorClass, validClass, counter) {
var $parent = $(element).parent();
// remove icon and success spans if any
$parent.find("span.form-control-feedback, span.sr-only").remove();
// add ".error" class to input element
$(element).addClass(errorClass).removeClass(validClass);
// add Bootstrap ".has-error" class to parent div.form-group element
$(element).closest(".form-group").removeClass("has-success").addClass("has-error has-feedback");
// need to have it check to see if span already added
// only add for non radio or non select input elements
if (!$(element).is(":radio, select, textarea, :checkbox, .btn") && !$(element).hasClass("datepicker")) {
counter++;
var $spans = $parent.find("span");
// check to make sure error spans are not already in form-group before attempting to append after input
if ($spans.length == 0) {
// add span element with ".glyphicon" ".glyphicon-remove" ".form-control-feedback" classes after input
$(element).after("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>");
$(element).after("<span id='inputError" + counter + "Status'" + " class='sr-only'>(error)</span>");
}
}
}
//
// Name: unhighlightValidator
// Description: Used by the validator to hide the error messages.
//
function unhighlightValidator(element, errorClass, validClass, counter) {
var $parent = $(element).parent();
// remove icon and success spans if any
$parent.find("span.form-control-feedback, span.sr-only").remove();
// remove ".error" class from input element
$(element).removeClass(errorClass).addClass(validClass);
if (!$(element).is(":radio, select, textarea, :checkbox, .btn") && !$(element).hasClass("datepicker")) {
// // remove Bootstrap ".has-error" class from parent div.form-group element
$(element).closest(".form-group").removeClass("has-error").addClass("has-success has-feedback");
var $spans = $parent.find("span");
if ($spans.length == 0 && !$(element).is("select")) {
$(element).after("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>");
$(element).after("<span id='inputSuccess" + counter + "Status'" + " class='sr-only'>(error)</span>");
}
} else if ($(element).parents('.selectric-wrapper').size() > 0) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-success has-feedback");
}
}
接下来是EditInfo.cshtml页面。这是一个示例,第一项是文本框。表单标记在末尾关闭,没有遗漏任何输入。javascript文件使用元素的名称而不是id
<div class="frontpage">
<form class="form-horizontal" id="frmEditInfo" name="frmEditInfo">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="workCell" class="col-sm-4 control-label">Work Cellphone</label>
<div class="col-sm-6">
<input type="tel" name="workCell" id="workCell" class="form-control" placeholder="Work Cellphone">
</div>
</div>
</div>
编辑:删除了有关提交功能的不必要代码。我修复了它。
TL;DR js文件未正确添加到BundleConfig.cs
经过大量的研究,我将代码放入JSFIDLE,它成功了。所以我回去确认我已经更新了JS文件等等。最终我发现了BundleConfig文件中的问题。包含
jquery validate.js
文件的捆绑包命名不正确。这并不是说这是唯一的问题,Sparky帮我制定了规则(没有编写自己的正则表达式),没有使用method.min.js
文件,而我当时也在使用method.js
。我想我应该发布答案,只是为了澄清事实。你不需要所有内容的完整版和缩小版。挑一个或另一个。包含同一脚本的两个版本将破坏一切。您是否使用不引人注目的验证插件?无论哪种方式提到这一点都可能是个好主意。@Sparky我没有使用完整的正则表达式。我只是不想删除和丢失它。不,没有。我不知道这是一件事,我的错。“没有使用完整的正则表达式”~这和我的评论有什么关系?@Sparky,对不起,你是对的。我以为你以为我在使用我在验证规则中编写的快捷方式(phoneUS)和正则表达式。通过“完整和缩小”,你指的是stuff.js和stuff.min.js,对吗?我在哪里使用它,如何才能更正它?
@RenderSection("scripts", required: false)
<div class="frontpage">
<form class="form-horizontal" id="frmEditInfo" name="frmEditInfo">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="workCell" class="col-sm-4 control-label">Work Cellphone</label>
<div class="col-sm-6">
<input type="tel" name="workCell" id="workCell" class="form-control" placeholder="Work Cellphone">
</div>
</div>
</div>
$(document).ready(function () {
var counter = 0;
$("#frmEditInfo").validate({
ignore: [],
rules: {
personalEmail:{
email: true
//pattern: /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,15}|[0-9]{1,3})(\]?)$/i
},
otherEmail: {
email: true
//pattern: /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,15}|[0-9]{1,3})(\]?)$/i
},
workCell: {
required: true,
phoneUS: true
//pattern: /^\(?\d{3}\)?\s?-?\d{3}\s?-?\d{4}$/
},
personalCell: {
phoneUS: true
//pattern: /^\(?\d{3}\)?\s?-?\d{3}\s?-?\d{4}$/
},
otherPhone: {
phoneUS: true
//pattern: /^\(?\d{3}\)?\s?-?\d{3}\s?-?\d{4}$/
}
},
messages: {
personalEmail: {
email: "Invalid Email"
},
otherEmail: {
email: "Invalid Email"
},
workCell: {
phoneUS: "Invalid Phone Number"
},
personalCell: {
phoneUS: "Invalid Phone Number"
},
otherPhone: {
phoneUS: "Invalid Phone Number"
}
},
errorPlacement: function (error, element) {
errorPlacementValidator(error, element);
},
highlight: function (element, errorClass, validClass) {
counter++;
highlightValidator(element, errorClass, validClass, counter);
},
unhighlight: function (element, errorClass, validClass) {
counter++;
unhighlightValidator(element, errorClass, validClass, counter);
}
});
$('#workCell').inputmask("(999) 999-9999");
$('#personalCell').inputmask("(999) 999-9999");
$('#otherPhone').inputmask("(999) 999-9999");
});