Jquery code not working when deployed on servers

Question

0.00/5 (No votes)

See more:

There are different sections on the page(ASP.net MVC) with same controls(ex:phone,email). I want the following validation message to be displayed differently in Validation Summary(with section name) and beside individual text boxes(w/o section name)

This is the validation message specified in the model

C#

[Required(ErrorMessage = "Chief Executive - |Name is required")] 
[Required(ErrorMessage = "Medical Director - |Name is required")]

The code to replace the '|' symbol in jquery.validate.unobtrusive.js is

JavaScript

function onError(error, inputElement) { // 'this' is the form element
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replaceAttrValue = container.attr("data-valmsg-replace"),
        replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }

    error.text(error.text().substr(error.text().indexOf("|") + 1));
}

function onErrors(event, validator) { // 'this' is the form element
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message.replace('|', '')).appendTo(list);
        });
    }
}

The pipe symbol is replaced with space and displayed as desired in local host. But when the code is deployed to servers, I am getting the same validation message (with section names) displayed in both validation summary and beside the text boxes also.

I am ready to provide other code also.

I also have this in web.config

XML

<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

What I have tried:

jquery code not working when deployed on servers

Posted 5-Feb-20 8:56am

Member 10549164

Updated 6-Feb-20 6:36am

Richard Deeming

v3

Add a Solution

Comments

MadMyche 5-Feb-20 15:28pm

What does "not working when deployed" mean? Is it doing anything? Throwing an error? What does the browsers developer console show?

Member 10549164 5-Feb-20 15:56pm

Its not throwing any error. But the jquery code above, to replace the '|' char to ' ' is not working. The message "Chief Executive - |Name is required" is displayed in validation summary as well as beside textbox.

ZurdoDev 6-Feb-20 8:49am

Check the console in your browser for errors. Also check to make sure that jquery.js is loaded.

Richard Deeming 6-Feb-20 6:32am

It looks like some of your code has been lost when you pasted it. For example, this line is totally mangled:

var container = $(this).find(".name) + "']"),

There's a selector missing on the line:

var container = $(this).find("")

And another missing on the line:

$("").html(this.message.replace('|', '')).appendTo(list);

Member 10549164 6-Feb-20 10:21am

Hi Richard,

Please find code in jquery.validate.unobtrusive.js file.

\\\
(function ($) {
var $jQval = $.validator,
adapters,
data_validation = "unobtrusiveValidation";

function setValidationValues(options, ruleName, value) {
options.rules[ruleName] = value;
if (options.message) {
options.messages[ruleName] = options.message;
}
}

function splitAndTrim(value) {
return value.replace(/^\s+|\s+$/g, "").split(/\s*,\s*/g);
}

function escapeAttributeValue(value) {
// As mentioned on http://api.jquery.com/category/selectors/
return value.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
}

function getModelPrefix(fieldName) {
return fieldName.substr(0, fieldName.lastIndexOf(".") + 1);
}

function appendModelPrefix(value, prefix) {
if (value.indexOf("*.") === 0) {
value = value.replace("*.", prefix);
}
return value;
}

function onError(error, inputElement) { // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

container.removeClass("field-validation-valid").addClass("field-validation-error");
error.data("unobtrusiveContainer", container);

if (replace) {
container.empty();
error.removeClass("input-validation-error").appendTo(container);
}
else {
error.hide();
}

error.text(error.text().substr(error.text().indexOf("|") + 1));
}

function onErrors(event, validator) { // 'this' is the form element
var container = $(this).find("[data-valmsg-summary=true]"),
list = container.find("ul");

if (list && list.length && validator.errorList.length) {
list.empty();
container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

$.each(validator.errorList, function () {
$("").html(this.message.replace('|', '')).appendTo(list);
});
}
}

function onSuccess(error) { // 'this' is the form element
var container = error.data("unobtrusiveContainer"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;

if (container) {
container.addClass("field-validation-valid").removeClass("field-validation-error");
error.removeData("unobtrusiveContainer");

if (replace) {
container.empty();
}
}
}
\\\

Richard Deeming 6-Feb-20 10:28am

The site's still managed to swallow the selector on the line:

$("").html(this.message.replace('|', '')).appendTo(list);

I've assumed it matches the original selector: $("<li />")

Member 10549164 6-Feb-20 10:45am

Yes. thanks what you have assumed is correct.. Iam trying to paste the line again down here

$("").html(this.message.replace('|', '')).appendTo(list);

Richard Deeming 6-Feb-20 10:49am

It's happened again. :)

You either have to HTML-encode the text (< instead of <, > instead of >), or put <pre>...</pre> tags around it.

Member 10549164 6-Feb-20 10:49am

The tag is disappearing in the line for some reason.
My question again..can you please let me know why the '|' symbol ()in the validation message) is not being replaced when deployed on servers. It is replaced correctly when run in local host.

Richard Deeming 6-Feb-20 10:59am

My guess would be that either you haven't updated jquery.validate.unobtrusive.js on the server, or that the version on the server is actually loading jquery.validate.unobtrusive.min.js, or a version of the script from a CDN.

If it's using a CDN, then you're not going to be able to change it.

If it's loading jquery.validate.unobtrusive.min.js, then you need to minify your updated version of the file.

Member 10549164 6-Feb-20 11:21am

Thank You. I will check on server and update which version of script is loaded on server.

Member 10549164 6-Feb-20 11:54am

Thanks a ton Richard, The min file was not having the update.
I want to let you know what's happening on server.
The build pushed both files out to the server. By default it attempted to load the min file which didnt have the modification. When I removed the min file from the solution on Dev the code is working perfectly. I am surprised that locally our machine is taking the regular file over the min file.

So locally it was taking regular file and on server its loading from min.js..

Thanks a lot again. I will update the min file.

Member 10549164 6-Feb-20 12:05pm

Hi Richard,
Can I please get the min.js code of following jquery.validate.unobtrusive.js code

1) error.text(error.text().substr(error.text().indexOf("|") + 1));

because I am not finding the equivalent function to .text in the intellisense in min.js file.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2020-02-06T06:36:00

As discussed in the comments, the local version of the site is using your modified jquery.validation.unobtrusive.js file, but the published version of your site is using the minified jquery.validation.unobtrusive.min.js file, which hasn't been modified.

The simplest way to update the minified file is to use Mads Kristensen's "Bundler & Minifier" extension:
Bundler & Minifier - Visual Studio Marketplace[^]

Once you have the extension installed, right-click on the jquery.validation.unobtrusive.js file in the solution explorer, and select Bundler & Minifier ⇒ Minify File.

Once you've done that, any future changes to the jquery.validation.unobtrusive.js file should automatically update the jquery.validation.unobtrusive.min.js file as well.