Both those classes would have the same specificity and one would take over the other, depending on the order they were written. In a complex setup, this can get very messy, especially if you’re fiddling with a background image and its position.

Turns out, you can actually combine classes, in other words, define a multi-class union.

You can do that like so:

1
2
3
4
5
6
7

.custom-class-1.current-menu-item a {color:#f00;}.custom-class-1.current-menu-item a {color:#00f;}

I’ve been using clearfix to clear floats for years now, and I always knew that it left a little bit of space after the HTML container that is was applied to. Most of the time I sort of worked around it, but I was curious whether there was a better solution.

The period is appended and hence there is a bit of a padding. The way to work around that is to simply change the period into a space, which isn’t rendered by the browser, and hence there’s nothing added to the end of your HTML container.

What’s interesting to note is that you can define a different style for this character, too, so it doesn’t have to match the rest of the list text.

The only caveat is that defining a margin between the character and your text is a bit trickier, since you can’t accomplish that with margin or padding, unless you wrap your list text in another HTML tag.

Unfortunately you can’t use HTML entities in your content either, but you can use Unicode. The Unicode value for space is \0000a0, so if you add that within your content value, you can achieve additional space.

Preface

I’ve built a lot of forms in my day, and to be honest, it’s not one of my favorite things to do. The designing and building aspect is fun, but the validation and error reporting, ehh. We all know that server-side validation is a must, and technically speaking, client-side validation optional, but if you love your users, you’ll do it anyway. The challenge then for you, as the web developer, is to vigorously ensure that the client-side (jQuery) and server-side (PHP) validation are identical, so you don’t have discrepancies that confuse your users. The reason client-side validation makes users happy, is because the errors pop up right away and the page doesn’t need to be reloaded.

What if you could trade the pain of writing a client-side validation script with making server-side validation instantaneous? Yes, AJAX comes to mind, however, the one thing people tend to do with that is display all the errors grouped together, because the AJAX response either updates or adds a div below or above the form, making the user have to figure out which error belongs to which field.

Project

The goal is to validate forms in the most efficient and user-friendly way, without having to compromise speed or security.

Requirements

Completely omit client-side validation

Display errors instantaneously next to corresponding fields

Prevent the page from being refreshed

Solution

The user fills out a form and it gets submitted via jQuery. If the submission takes just a bit longer, a processing message will appear. A separate processing script will validate each field and upon error, store that error in an array using the field’s label as the array item’s key and the error as the array item’s value. At the end of the validation, it will send the form back by calling the form’s function — a user-defined PHP function — with the error array as an argument. jQuery then replaces the existing form on the page with a new form that displays the errors underneath each field. jQuery’s on event handler then ensures that the replaced form is re-submittable.

On line 4 you see the optional argument. The variable is set to false so that PHP doesn’t complain when the function is called without a parameter.

On line 6 I’m using a named constant to display what the user is logging into. You could replace that with static text.

On line 9 I have another custom function called getPostValue() that basically escapes the user’s input before displaying it inside the field.

On line 10 we’re checking to see whether an array item with a key, that matches the field’s label, exists. If it does, we know to display an error, if not, that whole help div container is omitted.

Here is how the rendered form looks like in HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<divclass="init"><formaction="#"name="login"method="post"><h2>Sign in to SME</h2><divclass="field"><labelfor="username">Username</label><inputtype="text"id="username"name="username" autofocus="autofocus"/></div><divclass="field"><labelfor="password">Password</label><inputtype="password"id="password"name="password"/></div><divclass="message"></div><divclass="button"><buttontype="button"name="commit"disabled="disabled">Login</button></div></form></div>

On line 1 we need to wrap the form in a div, so we can later monitor it with jQuery. What happens is that jQuery will replace the entire form with one that shows the errors. Because that new form is a new object to the page, jQuery doesn’t know about it. It needs a fixed element on the page, such as the init div, whose contents it can monitor.

On line 2 you’ll notice that the action attribute is empty. This particular project requires users to have JavaScript turned on, but if you expect users without JavaScript, it’s a good idea to enter the path of the processor,.

On line 12 we will show a message to the user when the button gets clicked, so they know the form is processing.

On line 14 you’ll notice that I used the button tag to render a button as apposed to the classic <input type=”submit”>. I do that simply so I can style my text fields without having to worry that it will affect my buttons. My button is by default disabled and I then enable it with JavaScript, that way if JavaScript is turned off, the form can’t be submitted. Lastly, my button is of type=”button”, which by default doesn’t do anything (I assign an event handler with jQuery later). You’d make it of type=”submit” if you wanted that button to work without JavaScript.

On line 3 I’m calling a function that enables my disabled submit button and assigns a click event to it, so it can submit the form, since my button doesn’t natively do that.

On line 6 we’re using jQuery’s on event handler, which basically monitors the HTML body and looks for changes in a form element. This is important so that the form can be resubmitted. When the form gets replaced, it’s an unknown object on the page, however, since jQuery is monitoring it, it will convert the newly replaced form to a submittable form.

On line 8 I’m disabling the button, so while the form is processing, it can’t be submitted a second time.

On line 9 you’ll notice that we delay the “processing” message slightly, because if it submits right away, there’s no reason to flash it on the screen, but if it takes a bit longer, the user should know that something is happening.

On line 12 is where we actually post the form. I’m sending it to process.php, which contains a switch control structure that receives the form attribute’s name, so that the processor knows which fields to expect and validate.

On line 14 I’m calling initBinding() again, so that the newly replaced form’s submit button will be re-enabled and can submit again.

Conclusion

You get an easily maintainable and secure form for which you don’t have to write any client-side validation. The form is submitted via jQuery, which doesn’t require the page to be reloaded, and the validation appears almost instantaneous to the user, just as if you had used client-side validation.

If you have any questions or suggestions, please feel free to leave comments below.

Project

The goal is to present numerous coupons to the user, who can then freely select which ones they’re interested in and easily print them.

Requirements

Simple and intuitive user interface

Print-out will only contain selected coupons

Solution

We decided to stack all of the coupons, so they could be scrolled through without having to click anything or opening a new window. Each coupon is preceded with a checkbox and the user can click on the checkbox or the coupon itself to mark it for print. Below the coupons is a print button, which uses a specially crafted print stylesheet to strip the entire website and only print the selected coupons.

On line 30 we reference a single image called checksprite.png, which contains the three states of our checkbox: an empty checkbox, a checkbox while the mouse is hovering over it, and a selected checkbox.

On line 69 we declare an internal stylesheet that will be called upon when a user prints our page.

On line 71 we exclude elements from our site by hiding them (display="none"), so that we really only get the coupons on the print-out, not the site header, navigation, etc.

I should note that the page this code was written for primarily uses prototype, which means our jQuery is running in no conflict mode. This is why we didn’t use the normal $ to reference jQuery functions and that’s also why we’re using Event.observe to load our code.

Result

We’re displaying a list of coupons in an unordered list. jQuery is listening for the user to click on any one of the coupons, and upon the user doing so, it adds a CSS class to that coupon, which is how the print stylesheet knows which coupons to hide and which ones to show.

June 13, 2013 Update: Here is a jsFiddle demo and the corresponding code.

December 28, 2013 Update: If you are having trouble with the jQuery code, it’s probably because you’re missing the function that checks to ensure the document is ready before running any code. Here is an example: