Jun 16, 2009
Forcing Letter Case with CSS and jQuery
Try this two forms. Both force letter case, but only one of them will send to the server exactly what you see (in terms of lower and upper case).
See? Now, let me explain what just happen and how to avoid the first situation.
Explanation
In each form we just force letter casing by using CSS. In this case, inputs with the “upper” class will be upper cased and those with the “lower” class will be lower cased.
text-transform:uppercase;
}
.lower {
text-transform:lowercase;
}
The problem is that we get only the impression of lower and/or upper case, but we will actually send data cased as the user has entered. This means that even when you see “ABCD” you could actually receive “aBCd” at the server. I know, is not a big deal since you can (and should) force casing at server side, but sometimes you just want to be sure that your data is sent with the propper format.
A solution
So, how to solve this? jQuery (jQuery makes this easier, but you can use plain JavaScript too). You just need to add this code (plus the previous CSS one) to intercept any form submit, force propper and effective data casing and then continue with the sumbit process.
$(document).ready(function(){
$("form").submit(function(){
$(this).find(".upper").each(function(){
$(this).val(String($(this).val()).toUpperCase());
});
$(this).find(".lower").each(function(){
$(this).val(String($(this).val()).toLowerCase());
});
});
});
</script>
Simple, but useful in case you are working with casing.
this is exactly what I need to know… however, I’m neither sure WHERE to add either of the codes above, nor how to “connect” them. My web form is being entered only in upper case, thereby not allowing user to enter in their password.
web form under can be found at “Age Less Affiliates” at http://www.livelongnaturally.com
spoke with software “people,” but they state it is a Wordpress problem… please advise
@Carmen,
the form at your site is forcing upper case, but you don’t want to force any casing, right?
The best you can do is to talk with the “software people” and ask them for remove that case transformation or to assure you that every letter will be upper cased, so you can add a nice “* Remember: username and password must be upper case” at the login page (I prefer the idea of removing case transforamtion though).
Hope this help
Hello,
Thx for the article, it really heped me. I`ve altered the code a little to suit my needs:
$(this).keyup(function(event){
$(this).val(String($(this).val()).toUpperCase());
});
$(this).change(function(event){
$(this).val(String($(this).val()).toUpperCase());
});
});
This will change the case as the user types. Also is binded to chande event, in case user selects the contents of input form browser suggestion box.
This is usefull if you need the contents uppercased before the submit (in my case, multiple validations).
Hope this help someone.
While I appreciate the use of jQuery as well, jQuery is overkill for what you’re trying to achieve.
document.getElementById(”id_name”).value = document.getElementById(”id_name”).value.toUpperCase();
If you use jQuery, you have to preload the whole library just for this.