jQuery验证器：表单拒绝验证

Posted 2023-05-09

【中文标题】jQuery验证器：表单拒绝验证

【英文标题】：jQuery validator: Form refuses to validate

【发布时间】：2018-09-27 19:47:23

【问题描述】：

我有一个需要运行的简单 javascript 文件。我知道它渲染得很好，因为输入屏蔽部分工作得很好。但是，当我输入信息时，表单不会验证。例如，如果我输入一个 4 位数的电话号码日志，然后检查验证，它会返回“真”。它不使用不显眼的验证。该项目是一个在 Visual Studio Enterprise 2015 平台上编写的简单 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"));

bundle 在布局页面中呈现。

@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: /^\(?\d3\)?\s?-?\d3\s?-?\d4$/
        ,
        personalCell: 
            phoneUS: true
            //pattern: /^\(?\d3\)?\s?-?\d3\s?-?\d4$/
        ,
        otherPhone: 
            phoneUS: true
            //pattern: /^\(?\d3\)?\s?-?\d3\s?-?\d4$/
        
    ,
    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("[phone]");
$('#personalCell').inputmask("[phone]");
$('#otherPhone').inputmask("[phone]");
);

编辑：删除了关于提交功能的不必要代码。

【问题讨论】：

您不需要所有内容的完整版本和缩小版本。选择一个或另一个。包含同一脚本的两个版本会破坏事情。

你在使用 Unobtrusive-Validation 插件吗？无论哪种方式都可能是个好主意。

@Sparky 我没有使用完整的正则表达式。我只是不想删除和丢失它。不，它没有。我不知道这是一件事，我的错。

“没有使用完整的正则表达式” ~ 这和我的两个 cmets 有什么关系？

@Sparky，我很抱歉，你是对的。我曾以为您的印象是我同时使用了我在验证规则中编写的快捷方式 (phoneUS) 和正则表达式。通过“完整和缩小”，我是否正确您指的是 stuff.js 和 stuff.min.js？我在哪里使用它，我该如何纠正它？

【参考方案1】：

我修好了。 TL;DR BundleConfig.cs 中未正确添加 js 文件

经过大量研究，我将代码放入 jsfiddle 中，并且可以正常工作。所以我回去确保我已经更新了 JS 文件等。最终我发现问题出在 BundleConfig 文件中。包含 jquery-validate.js 文件的包的名称不正确。这并不是说这是唯一的问题，Sparky 帮助我制定了规则（不是编写我自己的正则表达式），当我也在使用 method.js 时没有使用 method.min.js 文件。我想我应该发布答案只是为了澄清事实。