jQuery验证程序：表单拒绝验证

Question

I have a simple Javascript file that needs to run. I know it is rendered fine, as the input masking portion works perfectly. However, the form will not validate when I input information. If I for example put in a phone number 4 digits log, then check for validation, it returns 'true'. It does not use unobtrusive validation. The project is a simple ASP.NEt MVC website written on a Visual Studio Enterprise 2015 platform. The page in question on the website is the EditInfo page, for your reference. There must be some variable I need to set to get this working, but I do not know what it is. Thanks for your help and have a great day.

First, here is the BundleConfig.cs file. This portion (not the whole file) is the jquery.validate plug-in.

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"));

The bundle is rendered in the layout page.

@Scripts.Render("~/bundles/jqueryval")

The app.js file contains functions used in error placement as well as the jquery.validator default settings.

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

Here is the EditInfo.cshtml file script section.

@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>
}

The section scripts is rendered in the layout file.

@RenderSection("scripts", required: false)

Next, the EditInfo.cshtml page. Here is a sample, with the first item, in this case a text box. The form tag is closed at the end, with no inputs being left out. The javascript file does use the names and not id's for elements.

<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>

Finally, here is the actual javascript file, 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");
});

EDIT: Removed unnecessary code regarding submit function.

Answer 1

I fixed it. TL;DR The js file wasn't correctly added in BundleConfig.cs

After a lot of research, I put the code into jsfiddle, and it worked. So I went back and made sure I had updated JS files and such. Eventually I found the problem, which was in the BundleConfig file. The bundle that included the jquery-validate.js file was named incorrectly. That is not to say that it was the only issue, Sparky helped me with my rules (not writing my own regex), not using method.min.js file when I was also using method.js . I figured I should post the answer just to set the record straight.