1

I am trying to implement client side validation in MVC 3 over Unobtrusive AJAX form.

    public class PhoneNumberAttribute : RegularExpressionAttribute, IClientValidatable
{
    private const string Message = " must be a valid phone number";
    public PhoneNumberAttribute()
        : base(@"^[\s\d\+\(\)]+$")
    {
        ErrorMessage = "{0}" + Message;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        return new List<ModelClientValidationRule>() {
            new ModelClientValidationRule{
                ValidationType="phonenumber",
                  ErrorMessage= metadata.DisplayName + " " + Message
            } 
        };
    }
}

Model:

 public class MyModel
{
    [DisplayName("Phone Number")]        
    [PhoneNumber]
    public string PhoneNumber{ get; set; }
 }

HTML

 <% using (Ajax.BeginForm("Contact", new AjaxOptions() { UpdateTargetId = "ajaxcontactform", 
     OnBegin = "ShowProcessing", 
     OnComplete = "HideProessing",
     InsertionMode = InsertionMode.Replace
 }))
 {%>
           <%: Html.ValidationSummary()%>

 <%: Html.TextBoxFor(m => m.PhoneNumber, new { Class = "contacttextform" })%>
 <input id="sendBtn" name="send" type="submit" class="contactformbutton" value="Send" />
<%}%>

I have included required .js files and other client side validation works for the fields which have [Required] attribute as well as custom validation attribute.

Please suggest why its not working for PhoneNumber field?

Thanks,

jNet
  • 153
  • 1
  • 1
  • 11

1 Answers1

0

the C# code is only one side of the validation. all your doing there is defining meta data to perform the validation against. You also need to register the validation with unobtrusive JavaScript, in JavaScript, see

Unobtrusive validation of collection

and

http://odetocode.com/Blogs/scott/archive/2011/02/22/custom-data-annotation-validator-part-ii-client-code.aspx

Edit Having looked at it I'm wondering if your over thinking this. I don't see why you need the IClientValidatable at all as all your doing is inheriting from RegularExpressionAttribute, try the below:

public class PhoneNumberAttribute : RegularExpressionAttribute
{
    private const string Message = " must be a valid phone number";
    public PhoneNumberAttribute()
        : base(@"^[\s\d\+\(\)]+$")
    {
        ErrorMessage = "{0}" + Message;
    }


}
Community
  • 1
  • 1
Liam
  • 27,717
  • 28
  • 128
  • 190
  • Thanks for reply Liam. I was thinking to to register the validation with unobtrusive JavaScript for this custom validation attribute but I didn't. This is because, I have more custom attribute for my model fields and that works without registering using javascript. I just read that in MVC 3 we can register client side validation by implementing IClientValidatable. Please correct if I am wrong. Cheers – jNet Nov 01 '12 at 14:28
  • No you still need to register it in JavaScript. The IClientValidatable only defines an easier way to define your validation attribute as it used to be quite tedious to implement the validation rules – Liam Nov 01 '12 at 15:35