While trying to buy Luke Wroblewski’s book at Rosenfeld Media I had to create a new account. I filled out the form and submitted it but it didn’t go through. The message it gave was:
You did not complete all of the required fields before submitting information. Fields missing data are highlighted. Please try again.
The thing is none of the fields were highlighted. This means that after scanning the form I just resubmitted it and of course I got the error message again. After the second try I went through the form field by field and found out that I have to select “Not Applicable” for the “State” field if I’m not in US or Canada. Why is empty different from “Not Applicable”?
By the way — the book I was buying is called Web Form Design: Filling in the Blanks :)
Fair enough criticism (I should mention that I’m the publisher of Luke’s book). We actually tried to remove “Not Applicable” as an option, and just leave it blank, as it sounds like you would have expected. But we ran into some difficult problems, namely that the shopping cart application developer hard-coded this behavior in a way that we couldn’t override.
In any case, we’ll take another look at this problem (though it’s the first time it’s come up–at least publicly!). Thanks for noting it, and despite our own form design issues, I hope you enjoy Luke’s book!
I hope I will too – I just bought it and am eagerly waiting for it to be delivered.
What I suggest is that you at least make the select field highlighted – that way when scanning the form I’d see what’s missing. It’s not the ultimate solution but it’s better than what you have now.
Agreed; it’s on our to-do list! Thanks Marko.
Let me help you with that.
In /css/section-cart.css you need to change line 186 from
table.col-one label .khxc_formfield {to
table.col-one label .khxc_formfield, table.col-one label .khxc_formfield_rnc {and line 193 from
* html table.col-one label .khxc_formfield {to
* html table.col-one label .khxc_formfield, * html table.col-one label .khxc_formfield_rnc {This is to make sure the form doesn’t fall apart when a requested field is missing.
Now to highlight the missing fields you should add the following lines to the same file, preferably on line 196 and add styles that will highlight the fields:
table.col-one label .khxc_formfield_rnc {border: 1px solid #107B84;
padding: 1px;
}
The example will turn the border link green. Done and tested in Firefox on a Vista machine.
Wow! Outstanding, Marko; let me point our developer this way and see if he can make this work. Will keep you posted…
…and now it’s implemented. Thanks so much Marko! To repay your generosity, I’d be glad to send some free books, though you’ve already purchased both. How about a discount code for future use or for your friends/blog readers?