Question

I would like to create a UIView has multiple UITextFields validates each one as the user is done editing it. The view controller is the delegate for each of the UITextFields. When a user changes a value in one of those UITextFields and either touches “done” on the keyboard or touches on another one of the textfields in the view, I save and validate the change. The idea here is to give the user immediate feedback, and not allow him/her to proceed any further if there an invalid attribute value has been entered.

I have read the Text Programming Guide on Apple’s support docs, which suggested that I put the save/validation logic in textFieldShouldEndEditing::

The best delegation methods for validating entered strings are textFieldShouldEndEditing: for text fields and textViewShouldEndEditing: for text views. These methods are called just before the text field or text view resigns first responder status. Returning NO prevents that from happening, and consequently the text object remains the focus of editing. If an entered string is invalid, you should also display an alert to inform the user of the error.

So to test this out, I created a simple project with one UIView and two UITextFields. Per the docs, all I do in this test project is display a UIAlertView and return NO. Here is the method:

- (BOOL)textFieldShouldEndEditing:(UITextField *)textField {
    // return YES to allow editing to stop and to resign first responder status. NO to disallow the editing session to end
    NSLog(@"In function: textFieldShouldEndEditing:(UITextField *)textField (tag=%i)", textField.tag);
    [self logFirstResponder];

    // PRETEND THAT THERE IS AN ISSUE THAT FAILS VALIDATION AND DISPLAY
    // A UIALERTVIEW.
    UIAlertView *errorAlert = [[UIAlertView alloc] initWithTitle:NSLocalizedString(@"Uh Oh!",@"")
                                                         message:@"This is a test error"
                                                        delegate:self
                                               cancelButtonTitle:NSLocalizedString(@"OK",@"")
                                               otherButtonTitles:nil];
    [errorAlert show];
    [errorAlert release];
    NSLog(@"Displaying Error UIAlertView!!!");

    // SINCE THE VALIDATION FAILED, RETURN NO TO HOLD THE USER IN THE
    // UITEXTFIELD.
    return NO;
}

And here’s the problem: If the user clicks from one UITextField onto the other, this method is called 3 times and as a result the UIAlertView is displayed 3 times. Here is the console log from my testing:

-- Field One tag = 100, Field Two tag = 200 --

2010-07-02 09:52:57.971 test project[22866:207] In function: textFieldShouldBeginEditing:(UITextField *)textField (tag=100)
2010-07-02 09:52:57.977 test project[22866:207] In function: textFieldDidBeginEditing:(UITextField *)textField (tag=100)
2010-07-02 09:52:57.977 test project[22866:207] Field One is the First Responder.

-- now i'm going to click from Field One into Field Two --

2010-07-02 09:53:18.771 test project[22866:207] In function: textFieldShouldBeginEditing:(UITextField *)textField (tag=200)
2010-07-02 09:53:18.772 test project[22866:207] Field One is the First Responder.
2010-07-02 09:53:18.774 test project[22866:207] In function: textFieldShouldEndEditing:(UITextField *)textField (tag=100)
2010-07-02 09:53:18.774 test project[22866:207] Field One is the First Responder.
2010-07-02 09:53:18.778 test project[22866:207] Displaying Error UIAlertView!!!
2010-07-02 09:53:18.780 test project[22866:207] In function: textFieldShouldBeginEditing:(UITextField *)textField (tag=200)
2010-07-02 09:53:18.781 test project[22866:207] Field One is the First Responder.
2010-07-02 09:53:18.781 test project[22866:207] In function: textFieldShouldEndEditing:(UITextField *)textField (tag=100)
2010-07-02 09:53:18.782 test project[22866:207] Field One is the First Responder.
2010-07-02 09:53:18.783 test project[22866:207] Displaying Error UIAlertView!!!

So what’s the deal? It seems that I am missing something… How do you validate a UITextField and display an error properly?

Answer 1

Instead of displaying a UIAlert you could instead show an error icon on the right side of the text field. This way if it does happen 3 times it does not cause the alert to come up and the user will not know that this icon is set 3 times. What I have done is set the right view with a button that has an image indicating the error. I associate the button with an action which shows an alert that tells the user what is wrong. I created a helper function which adds the image button to the right view with an action.

- (void)setErrorForTextField:(UITextField *)textField target:(id)target action:(SEL)selector
{
    CGRect frame = CGRectMake(0.0, 0.0, 15.0, 28.0);
    UIImage *image = [UIImage imageNamed:@"ErrorIcon.png"];
    UIButton *button = [[[UIButton alloc] initWithFrame:frame] autorelease];
    [button setImage:image forState:UIControlStateNormal];
    button.backgroundColor = [UIColor clearColor];

    [button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
    textField.rightView = button;
    textField.rightViewMode = UITextFieldViewModeAlways;
}

My ErrorIcon.png happens to be 15×28 so I make the button that size. I make sure the button and image fit the text field, although the right view will scale it down if it is too big. I set the it to a proper size does it does not have to do any scaling.

You can hide and show the right view using the mode that is shown in the above code. One mode is always and another is always. There are other modes that you may want to explore.

Now you can evaluate each field as a user finishes editing a text field and set the error as needed. I also have another set of matching validations which fire when the form is to be processed. I’d like to work it so that the same code is run for validation but I have not gone that far yet.