jQuery validation CSS to change font & text box colors stopped working

Question

There may be a better forum for this, but here's my problem:

I'm using several different CDN sites for CSS, jQuery, jQuery Mobile, jQuery.validate, etc. Sometime in the very recent past (last few days) the CSS that jQuery validate uses stopped highlighting the affected text boxes in red, and changing the messages to a red font.

I initially thought it was the addition of blockUI.js & css, but then I noticed that all of my fiddles I created to make the bits & pieces of this project had been affected as well, and none of them had ever had blockUI added to them, so that wasn't it.

Then I thought maybe something had changed in Chrome, so I tried in Firefox, same thing. I have a remote server where I upload test code, and it was still working normally, until I reloaded the page, then the same thing. That tells me that the change occurred in one of the CDN based files.

My question is, since I don't have downloaded versions of each of the .js & .css files, how can I determine what the change was? Is it possible to download the previous version (the version numbers in my references hasn't changed, so there's no way to tell from them.

I know I can simply go create my own .css for the highlighting & font issues, but it seems like whoever hosts these various CDN's shouldn't change them underneath you? FWIW, my primary suspect is: http://jquery.bassistance.de/validate/demo/css/screen.css, especially since it hasn't been versioned. I haven't had a chance to try to verify this yet.

For reference I'm using this array of CDN locations for my current project:

<link href="http://malsup.com/jquery/block/block.css?v3" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.js"></script>
<script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
<script type="text/javascript" src="pcbclient.js"></script>

There is NO CSS file as part of the jQuery Validate plugin. The problem is that you are hot-linking to another website's CSS file at jquery.bassistance.de/validate/demo/css/screen.css and they decided to take it down. — Sparky
– Sparky, Commented Jun 30, 2014 at 21:49

Sparky · Accepted Answer · 2014-07-01 17:09:46Z

1

There is no CSS file as part of jQuery Validate. This plugin simply toggles two class names and those have always been .valid and .error.

The root of your problem is right here...

<link href="http://jquery.bassistance.de/validate/demo/css/screen.css" rel="stylesheet">

That's not a CDN link, nor is that CSS file part of the plugin. It's the CSS file used solely for the online demo page.

Everything broke for you because that URL no longer points to a CSS file. However, you should not have been hot-linking to another website's CSS file in the first place. (If it's not a URL from a CDN, it could be considered as stealing the other website's bandwidth.)

If you liked how that online demo page looked, you could have easily examined and copied its CSS properties into your own CSS file, provided that the copyright license allows it.

You might want to carefully review the rest of your file includes' URL's to make sure those are all part of an official CDN and not just hosted on these developers' websites.

edited Jul 1, 2014 at 17:09

answered Jun 30, 2014 at 21:46

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

delliottg Over a year ago

You're quite correct regarding the non-CDN status of the (now dysfunctional link). The only suspect links now are for blockUI (which I may or may not end up using), but I'll download from their download page just in case). Thanks for the help and education.

Sparky Over a year ago

@delliottg, Glad I could help. Only took me a few days to notice what was going on here. lol.

delliottg · Accepted Answer · 2014-06-30 15:25:45Z

0

It appears I was correct in surmising that the problem laid with the CSS at: http://jquery.bassistance.de/validate/demo/css/screen.css.

I still don't know what changed, but I downloaded the source from: http://jqueryvalidation.org/ (as I should have after deciding to use it), added it to my ASP.NET project and the problem has been resolved.

answered Jun 30, 2014 at 15:25

delliottg

4,2104 gold badges41 silver badges54 bronze badges

1 Comment

Sparky Over a year ago

That CSS file would not be part of the plugin, nor is that a CDN link. It's simply the CSS for the online demo page. What changed is that the other website decided to take that file down... click on it to see for yourself.

Collectives™ on Stack Overflow

jQuery validation CSS to change font & text box colors stopped working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related