Practical prototype and part 20: The information in this book is distributed on an "as is" basis, without warranty Although every pre-caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. | CHAPTER 5 EVENTS 103 We don t need a server round-trip here though. We can just as easily check whether a field is blank on the client side. We want to code defensively catching possible user mistakes as early as possible. We can perform this check when the form is submitted we ve already got a function handling that event. function submitEntryForm event if food_type .value taste .value alert Both fields are required. return var updater new success breakfast_history failure error_log parameters food_type food_type .value taste taste .value Our handler now branches. If the two fields we re looking at are empty we show a message and stop if not we submit the form via Ajax. Either way we want to stop the default action of the form so we move the call to the top of the function see Figure 5-8 . Figure 5-8. The validation message we expected 104 CHAPTER 5 EVENTS This works just like we expected. But let s try something a bit subtler. Imagine that each of the text boxes has a state that s either valid or invalid. At any point in time it s either one or the other. Both text boxes need to be valid before the form is submitted. Let s write a CSS rule for an invalid text box input input border 2px solid 900 So that we aren t too subtle an invalid text box will be shown with a thick red border. When the page loads both text boxes are empty but neither one can be called invalid yet because the user hasn t had a chance to enter text. But we know it s definitely invalid if the text box receives focus then loses focus and is still empty. That s when we should alert the user. There s an event for losing focus it s called blur. So let s use it. function onTextBoxBlur event var textBox if 0 invalid else invalid We use Prototype s Event element method to figure out which element received the event. The .
