jQuery验证器:表单拒绝验证

Question

我有一个简单的Javascript文件，需要运行。我知道它呈现得很好，因为输入掩蔽部分工作得很好。但是，当我输入信息时，表单将不会生效。例如，如果我输入一个电话号码为4位数的日志，然后检查验证，它将返回“true”。它不使用不显眼的验证。该项目是在VisualStudioEnterprise2015平台上编写的一个简单的ASP.NEt MVC网站。网站上有问题的页面是EditInfo页面，供您参考。我必须设置一些变量才能使其工作，但我不知道它是什么。谢谢你的帮助，祝你今天愉快。

首先，这是BundleConfig.cs文件。这个部分(不是整个文件)是jquery.validate插件。

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文件脚本部分。

@section scripts {   
@Scripts.Render("~/bundles/jqueryval")
<script src="@Url.Content("~/Scripts/EditInfo.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script>
}

scripts部分在布局文件中呈现。

@RenderSection("scripts", required: false)

接下来是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>

最后，这里是实际的javascript文件，EditInfo.js

$(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");
});

编辑:删除有关提交函数的不必要代码。

Answer 1

我修好了。在BundleConfig.cs中没有正确地添加js文件

经过大量的研究后，我把代码放进了“小提琴”里，它起了作用。所以我回去确认我更新了JS文件等等。最后，我发现了BundleConfig文件中的问题。包含jquery-validate.js文件的包命名错误。这并不是说这是唯一的问题，Sparky帮助我制定了我的规则(没有编写我自己的regex)，在我也使用method.min.js时没有使用method.js文件。我想我应该贴出答案来澄清真相。