Silverlight validation red outline stays around element whose data has passed validation, until focused and blurred

Question

I have a class as follows:

public class Guardian : ModelBase, IDataErrorInfo
    {

        internal Guardian()
        {

        }

        [Required]
        [StringLength(50)]
        [Display(Name = "Guardian's First Name")]
        public string FirstName
        {
            get { return GetValue(() => FirstName); }
            set { SetValue(() => FirstName, value); }
        }

        [Required]
        [StringLength(50)]
        [Display(Name = "Guardian's Last Name")]
        public string LastName
        {
            get { return GetValue(() => LastName); }
            set { SetValue(() => LastName, value); }
        }

        [USPhoneNumber]
        [Display(Name = "Home Phone Number")]
        public string HomePhone
        {
            get { return GetValue(() => HomePhone); }
            set { SetValue(() => HomePhone, value.NormalizeNANPPhoneNumber()); }
        }

        [USPhoneNumber]
        [Display(Name = "Personal Cell")]
        public string PersonalCell
        {
            get { return GetValue(() => PersonalCell); }
            set { SetValue(() => PersonalCell, value.NormalizeNANPPhoneNumber()); }
        }

        [Required]
        [StringLength(100)]
        [Display(Name = "Address")]
        public string Address1
        {
            get { return GetValue(() => Address1); }
            set { SetValue(() => Address1, value); }
        }

        [StringLength(100)]
        public string Address2
        {
            get { return GetValue(() => Address2); }
            set { SetValue(() => Address2, value); }
        }

        [Required]
        [StringLength(100)]
        public string City
        {
            get { return GetValue(() => City); }
            set { SetValue(() => City, value); }
        }

        [Required]
        [StringLength(100)]
        public string State
        {
            get { return GetValue(() => State); }
            set { SetValue(() => State, value); }
        }

        [Required]
        [StringLength(20)]
        [USPostalCode]
        [Display(Name = "ZIP Code")]
        public string Zip
        {
            get { return GetValue(() => Zip); }
            set { SetValue(() => Zip, value); }
        }

        [Required]
        [Display(Name = "Relationship to Children")]
        public FamilyRole Relationship
        {
            get { return GetValue(() => Relationship); }
            set { SetValue(() => Relationship, value); }
        }

        internal bool IsEmpty()
        {
            return
                string.IsNullOrWhiteSpace(FirstName)
                && string.IsNullOrWhiteSpace(LastName)
                && string.IsNullOrWhiteSpace(HomePhone)
                && string.IsNullOrWhiteSpace(PersonalCell)
                && string.IsNullOrWhiteSpace(Address1)
                && string.IsNullOrWhiteSpace(Address2)
                && string.IsNullOrWhiteSpace(City)
                && string.IsNullOrWhiteSpace(State)
                && string.IsNullOrWhiteSpace(Zip)
                && Relationship == null
                ;
        }

        /// 
        /// Provides support for cross-cutting concerns without having to write
        /// an attribute in Silverlight.
        /// When time allows, convert to an Attribute. The code produced then
        /// can be reused in other projects.
        /// 
        /// 
        private void CustomValidation(List listToAddTo)
        {
            if (listToAddTo == null)
                throw new ArgumentNullException("listToAddTo");
            if (string.IsNullOrWhiteSpace(HomePhone) && string.IsNullOrWhiteSpace(PersonalCell))
                listToAddTo.Add(new ValidationResult("At least one phone number must be filled in.", new string[] { "HomePhone" }));
        }

        #region IDataErrorInfo Members

        public string Error
        {
            get
            {
                List results = new List();
                this.IsValidObject(results);
                CustomValidation(results);
                if (results.Count > 0)
                    return results[0].ErrorMessage;
                else
                    return null;
            }
        }

        public string this[string columnName]
        {
            get
            {
                List results = new List();
                this.IsValidObject(results);
                CustomValidation(results);
                var resultByColumn = results.Where(r => r.MemberNames.Contains(columnName)).ToList();
                if (resultByColumn.Count > 0)
                    return resultByColumn[0].ErrorMessage;
                else
                    return null;
            }
        }

        #endregion
    }

I implement IDataErrorInfo for this class. Everything works fine, my problem is really an annoyance, but one big enough that the Guy Who Pays The Bills says needs to be fixed. I have a separate void that does extra validation, which is called by the IDataErrorInfo members. It checks to see if at least one phone number is filled in.

An instance of this class is on my model, called CurrentGuardian, and the model is the DataContext for the following popup:

One phone number is required. You can enter both, but at least one is required. When the form binds to the empty CurrentGuardian, the first phone number field, Home Phone, is highlighted in red. It stays red after focusing and blurring that field, when both numbers have no data. If I enter a phone number, the field turns to black. Deleting the number turns it red. So far, so good - this is expected behavior. Now, if I do not enter a number for Home Phone, but then I enter a phone number for personal cell, when I tab off Personal Cell the Home Phone number stays highlighted in red until I tab to it. Once I tab to it, the red outline disappears. How do I make the field validate? I currently have the following code in the blur event for both fields:

    private void PhoneNumber_LostFocus(object sender, RoutedEventArgs e)
    {
        KioskCheckIn2 model = (KioskCheckIn2)this.DataContext;
        model.CurrentGuardian.IsValidObject(); // revalidate
        txtHomePhone.GetBindingExpression(TextBox.TextProperty).UpdateSource();
        txtCellPhone.GetBindingExpression(TextBox.TextProperty).UpdateSource();
    }

I have the ValidationResult for checking both numbers only returning the HomePhone field as the offending control since I could not figure out how to force re-validation of the controls so both red outlines would disappear.

Thanks in advance!

Derreck Dean · Accepted Answer

Implementing INotifyDataErrorInfo, rather than IDataErrorInfo, seemed to do the trick. IDataErrorInfo is nice but lacks the ability to let the UI know when other properties have changed besides the current one. I tried allowing both implementations but it got a bit weird, so I changed it so it only implemented INotifyDataErrorInfo.

    public class Guardian : ModelBase, /*IDataErrorInfo,*/ INotifyDataErrorInfo
    {

        internal Guardian()
        {

        }

        [Required]
        [StringLength(50)]
        [Display(Name = "Guardian's First Name")]
        public string FirstName
        {
            get { return GetValue(() => FirstName); }
            set { SetValue(() => FirstName, value); }
        }

        [Required]
        [StringLength(50)]
        [Display(Name = "Guardian's Last Name")]
        public string LastName
        {
            get { return GetValue(() => LastName); }
            set { SetValue(() => LastName, value); }
        }

        [USPhoneNumber]
        [Display(Name = "Home Phone Number")]
        public string HomePhone
        {
            get { return GetValue(() => HomePhone); }
            set { SetValue(() => HomePhone, value.NormalizeNANPPhoneNumber()); }
        }

        [USPhoneNumber]
        [Display(Name = "Personal Cell")]
        public string PersonalCell
        {
            get { return GetValue(() => PersonalCell); }
            set { SetValue(() => PersonalCell, value.NormalizeNANPPhoneNumber()); }
        }

        [Required]
        [StringLength(100)]
        [Display(Name = "Address")]
        public string Address1
        {
            get { return GetValue(() => Address1); }
            set { SetValue(() => Address1, value); }
        }

        [StringLength(100)]
        public string Address2
        {
            get { return GetValue(() => Address2); }
            set { SetValue(() => Address2, value); }
        }

        [Required]
        [StringLength(100)]
        public string City
        {
            get { return GetValue(() => City); }
            set { SetValue(() => City, value); }
        }

        [Required]
        [StringLength(100)]
        public string State
        {
            get { return GetValue(() => State); }
            set { SetValue(() => State, value); }
        }

        [Required]
        [StringLength(20)]
        [USPostalCode]
        [Display(Name = "ZIP Code")]
        public string Zip
        {
            get { return GetValue(() => Zip); }
            set { SetValue(() => Zip, value); }
        }

        [Required]
        [Display(Name = "Relationship to Children")]
        public FamilyRole Relationship
        {
            get { return GetValue(() => Relationship); }
            set { SetValue(() => Relationship, value); }
        }

        internal bool IsEmpty()
        {
            return
                string.IsNullOrWhiteSpace(FirstName)
                && string.IsNullOrWhiteSpace(LastName)
                && string.IsNullOrWhiteSpace(HomePhone)
                && string.IsNullOrWhiteSpace(PersonalCell)
                && string.IsNullOrWhiteSpace(Address1)
                && string.IsNullOrWhiteSpace(Address2)
                && string.IsNullOrWhiteSpace(City)
                && string.IsNullOrWhiteSpace(State)
                && string.IsNullOrWhiteSpace(Zip)
                && Relationship == null
                ;
        }

        protected override void PropertyHasChanged(string propertyName)
        {
            base.PropertyHasChanged(propertyName);
            if (ErrorsChanged != null)
                this.GetType().GetProperties().ToList().ForEach(p => ErrorsChanged(this, new DataErrorsChangedEventArgs(p.Name)));
        }

        /// 
        /// Provides support for cross-cutting concerns without having to write
        /// an attribute in Silverlight.
        /// When time allows, convert to an Attribute. The code produced then
        /// can be reused in other projects.
        /// 
        /// 
        private void CustomValidation(List listToAddTo)
        {
            if (listToAddTo == null)
                throw new ArgumentNullException("listToAddTo");
            if (string.IsNullOrWhiteSpace(HomePhone) && string.IsNullOrWhiteSpace(PersonalCell))
                listToAddTo.Add(new ValidationResult("At least one phone number must be filled in.", new string[] { "HomePhone", "PersonalCell" }));
        }

        List getErrorList()
        {
            List results = new List();
            this.IsValidObject(results);
            CustomValidation(results);
            return results;
        }

        /*
        #region IDataErrorInfo Members

        public string Error
        {
            get
            {
                List results = getErrorList();
                if (results.Count > 0)
                    return results[0].ErrorMessage;
                else
                    return null;
            }
        }

        public string this[string columnName]
        {
            get
            {
                List results = getErrorList();
                var resultByColumn = results.Where(r => r.MemberNames.Contains(columnName)).ToList();
                if (resultByColumn.Count > 0)
                    return resultByColumn[0].ErrorMessage;
                else
                    return null;
            }
        }

        #endregion
         */

        #region INotifyDataErrorInfo Members

        public event EventHandler ErrorsChanged;

        public System.Collections.IEnumerable GetErrors(string propertyName)
        {
            List results = getErrorList();
            return results.Where(e => e.MemberNames.Contains(propertyName));
        }

        public bool HasErrors
        {
            get 
            {
                List results = getErrorList();
                return results.Count > 0;
            }
        }

        #endregion
    }

Now, when I first go to the screen, both phone fields are highlighted. Entering a valid phone number in one field makes both phone number fields pass validation and the red line surrounding each disappears. Note that I put the second field back in under CustomValidation,

listToAddTo.Add(new ValidationResult("At least one phone number must be filled in.", new string[] { "HomePhone", "PersonalCell" }));

...so that both properties can show the red lines around them if the input is not in a correct format.

Here's some code I made to handle validation for both IDataErrorInfo and INotifyDataErrorInfo. You'll have to rework it a bit to fit your base class (if you have one) but I hope this helps someone out:

namespace CLARIA.Infrastructure
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    /// 
    /// Builds upon ModelBase with built-in validation.
    /// 
    public abstract class ValidatableModelBase : ModelBase,
    #if SILVERLIGHT
        INotifyDataErrorInfo
    #else
        IDataErrorInfo
    #endif

    {

        private List GetErrorList()
        {
            List results = new List();
            this.IsValidObject(results);
            CustomValidation(results);
            return results;
        }

        /// 
        /// Allows the derived class to override and add custom validation.
        /// The validation results generated from this method should be added
        /// to the collection .
        /// 
        /// 
        protected virtual void CustomValidation(List addResultsToThisList) {}

    #if SILVERLIGHT

        #region INotifyDataErrorInfo Members

        protected override void PropertyHasChanged(string propertyName)
        {
            base.PropertyHasChanged(propertyName);
            // Force re-validation of every property.
            if (ErrorsChanged != null)
                this.GetType().GetProperties().ToList().ForEach(p => ErrorsChanged(this, new DataErrorsChangedEventArgs(p.Name)));
        }

        public event EventHandler ErrorsChanged;

        public System.Collections.IEnumerable GetErrors(string propertyName)
        {
            List results = GetErrorList();
            return results.Where(e => e.MemberNames.Contains(propertyName));
        }

        public bool HasErrors
        {
            get
            {
                List results = GetErrorList();
                return results.Count > 0;
            }
        }

        #endregion

    #else

        #region IDataErrorInfo Members

        public string Error
        {
            get
            {
                List results = GetErrorList();
                if (results.Count > 0)
                    return results[0].ErrorMessage;
                else
                    return null;
            }
        }

        public string this[string columnName]
        {
            get
            {
                List results = GetErrorList();
                var resultByColumn = results.Where(r => r.MemberNames.Contains(columnName)).ToList();
                if (resultByColumn.Count > 0)
                    return resultByColumn[0].ErrorMessage;
                else
                    return null;
            }
        }

        #endregion

    #endif


    }

    }

Silverlight validation red outline stays around element whose data has passed validation, until focused and blurred

Answers (2)

Related Questions