Here's another approach from [How to create custom validation attribute for MVC][1], which is adapted from this article on [ASP.NET MVC Custom Validation][2]:

    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
    public class AlphaNumericAttribute: RegularExpressionAttribute
    {
        private const string pattern = "^[-A-Za-z0-9]+$";
    
        public AlphaNumericAttribute() : base(pattern)
        {
            // necessary to enable client side validation
            DataAnnotationsModelValidatorProvider.RegisterAdapter(
                typeof(AlphaNumericAttribute), 
                typeof(RegularExpressionAttributeAdapter));
        }
    }

By using [`RegisterAdapter`][3], you can leverage the integrations that already exist for regular expressions for your own inherited type.

[1]: https://stackoverflow.com/a/5954452/1366033
[2]: http://haacked.com/archive/2009/11/19/aspnetmvc2-custom-validation.aspx/
[3]: https://msdn.microsoft.com/en-us/library/system.web.mvc.dataannotationsmodelvalidatorprovider.registeradapter(v=vs.118).aspx

I have created the following custom RegularExpressionAttribute

    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
    public class AlphaNumericAttribute: RegularExpressionAttribute, IClientValidatable
    {
        public AlphaNumericAttribute()
          : base("^[-A-Za-z0-9]+$")
        {
        }

       public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
       {
          yield return new ModelClientValidationRule { ErrorMessage =  FormatErrorMessage(metadata.GetDisplayName()), ValidationType = "alphanumeric" };
       }
    }

The field in the ViewModel is decorated with my AlphaNumeric attribute:

    [AlphaNumeric(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName = Resources.DriverLicenseNumber_RegexError_)]
    public string DriverLicenseNumber { get; set; }

The field is built in the view:

    @using (Html.BeginForm("Index", "Application", FormMethod.Post, new { id = "applicationDataForm", autocomplete = "off" }))
    {
        @Html.LabelFor(m => m.DriverLicenseNumber)
        @Html.ValidationMessageFor(m => m.DriverLicenseNumber)
        @Html.TextBoxFor(m => m.DriverLicenseNumber)
    }

This should yield the proper *"data-"* validation attributes on my html input tag.  However, the rendered tag looks like this:

    <input data-val="true" data-val-alphanumeric="Please enter a valid driver's license number." id="DriverLicenseNumber" name="DriverLicenseNumber" type="text" value="" maxlength="20" class="valid">

Conspicuously absent are the *data-val-regex* and *data-val-regex-pattern* attributes that are supposed be rendered.  

I have built other validators with the exact same structure, and they work correctly, like this SSN validation which handles masked spaces for a masked input using jquery masking:

    public class SsnAttribute : RegularExpressionAttribute, IClientValidatable
    {
      public SsnAttribute()
      : base("^([0-9]{3}–[0-9]{2}–[0-9]{4})|([ ]{3}–[ ]{2}–[ ]{4})|([0-9]{9,9})$")
    {
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
      yield return new ModelClientValidationRule { ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()), ValidationType = "ssn" };
    }
  }

With the accompanying application on the ViewModel:

    [Ssn(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName = Resources.SocialSecurity_RegexError_)]
    public new string SocialSecurityNumber { get; set; }

The field is built in the view:
    
    @using (Html.BeginForm("Index", "Application", FormMethod.Post, new { id = "applicationDataForm", autocomplete = "off" }))
    {
        @Html.LabelFor(m => m.SocialSecurityNumber)
        @Html.ValidationMessageFor(m => m.SocialSecurityNumber)
        @Html.TextBoxFor(m => m.SocialSecurityNumber)
    }

This validation attribute correctly renders the data-val-regex and data-val-regex-pattern attributes:

    <input class="SSNMask valid" data-val="true" data-val-regex="Please enter a valid social security number." data-val-regex-pattern="^([0-9]{3}–[0-9]{2}–[0-9]{4})|([ ]{3}–[ ]{2}–[ ]{4})|([0-9]{9,9})$" id="SocialSecurityNumber" name="SocialSecurityNumber" type="text" value="" maxlength="22">

<br/><br/>
I cannot figure out what I am missing with the AlphaNumeric attribute that it does not render the appropriate html attributes.

Custom RegularExpressionAttribute missing data-val-regex-pattern for client-side validation

## The Problem

It turns out this happens when you don't include a `@Html.ValidationMessageFor` placeholder for a given form element.

Here's a deeper dive into where the problem occurs:

When a form submits, `jquery.validate.js` will call the following methods:



    validate: function( options ) {
      form: function() {
        showErrors: function(errors) {
          defaultShowErrors: function() {
            showLabel: function(element, message) {
              this.settings.errorPlacement(label, $(element) )
                                            
Where `errorPlacement` will call this method in `jquery.validate.unobtrusive.js`:



    function onError(error, inputElement) { 
       var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
           replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

When we don't add a placeholder for the validation message, `$(this).find(...)` won't find anything.

Meaning `container.attr("data-valmsg-replace")` will return `undefined`

This poses a problem is when we try to call `$.parseJSON` on an undefined value.  If an error is thrown (and not caught), JavaScript will stop dead in its tracks and never reach the final line of code in the original method (`return false`) which prevents the form from submitting.

## The Solution


### Upgrade jQuery Validate Unobtrusive

[Newer versions of jQuery Validate][3] handle this better and check for nulls before passing them to `$.parseJSON`



    function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replaceAttrValue = container.attr("data-valmsg-replace"),
            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

### Add ValidationMessageFor

To address the core problem, for every input on your form, make sure to include:



    @Html.ValidationMessageFor(model => model.Name)

Which will render the following client side markup



    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>





    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        
    <form action="/Person" method="post">
      <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul><li style="display:none"></li></ul>
      </div>
      <label for="Name">Name</label>
      <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
      <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
      <input type="submit" value="Save" />
    </form>



[3]: https://www.asp.net/ajax/cdn

I have an ASP.NET project that automatically wires up client side validation using [jQuery.Validate][1] and the [unobtrusive wrapper][2] built by ASP.NET.

a) I definitely have the appropriate libraries: [jquery.js][j1], [jquery.validate.js][j2], & [jquery.validate.unobtrusive.js][j3]

b) And the MVC rendering engine is definitely turned on (`ClientValidationEnabled` & `UnobtrusiveJavaScriptEnabled` in the `appSettings` section of the web.config)

Here's a trivial example where things are broken:

**Model**:



    public class Person
    {
        [Required]
        public string Name { get; set; }
    }

**Controller**:

   

    public ActionResult Edit()
    {
        Person p = new Person();
        return View(p);
    }

**View**:

   

    @model validation.Models.Person
    
    @using (Html.BeginForm()) {
        @Html.ValidationSummary(false)
    
        @Html.LabelFor(model => model.Name)
        @Html.EditorFor(model => model.Name)
    }

This generates the following client side markup:





    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        
    <form action="/Person" method="post">
      <div class="validation-summary-valid" data-valmsg-summary="true">
        <ul><li style="display:none"></li></ul>
      </div>
      <label for="Name">Name</label>
      <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
      <input type="submit" value="Save" />
    </form>



When run it will perform the client side validation, noting that some form elements are invalid, but then *also* post back to the server.  

Why is it not preventing postback on a form with an invalid state?

[1]: https://jqueryvalidation.org/
[2]: https://github.com/aspnet/jquery-validation-unobtrusive
[j1]: https://cdnjs.com/libraries/jquery/1.12.4
[j2]: https://cdnjs.com/libraries/jquery-validate/1.9.0
[j3]: https://cdnjs.com/libraries/jquery-validation-unobtrusive

ASP.NET MVC - prevent submit of invalid form using jQuery unobtrusive validation

You can use the `GetUnobtrusiveValidationAttributes()` method of `HtmlHelper` to get the validation attributes associated with a specific property.

For example in the view

    @{ var attributes = Html.GetUnobtrusiveValidationAttributes("QuestionTwo"); }

    <input 
        type="textbox"
        @foreach(var attr in attributes)
        {
            @:@attr.Key="@attr.Value"
        }
        id="@Html.IdFor(m => m.QuestionTwo)"
        ....
    />

Note the `@:@attr.Key="@attr.Value"` line will give a warning (_Missing attribute name_) but will run correctly

Alternatively, you could use javaScript/jQuery to add the attributes

	<script type="text/javascript">
		var attributes = @Html.Raw(Json.Encode(attributes));
		var input = $('#QuestionTwo');
		for(var i in attributes) {
        	input.attr(i, attributes[i]);
    	}
	</script>

I have forked the [DotNetFiddle here](https://dotnetfiddle.net/e2WnPl) to show the working code for both options.

While the above code shows how it can be done, you should not be doing that. The `HtmlHelper` methods execute a lot of code your ignoring to ensure correct 2-way model binding, for example, the `value` attribute is determined by first checking for a value in `ModelState`, then in the `ViewDataDictionary`, and only if the previous values do not exist, does it use the value of the property (the second part of [TextBoxFor displaying initial value, not the value updated from code](https://stackoverflow.com/questions/26654862/textboxfor-displaying-initial-value-not-the-value-updated-from-code/26664111#26664111) explains the behavior).

Except for the incorrect `value` attribute, the code you have shown for the `<input>` is the same as will be generated by simply using `@Html.TextBoxFor(m => m.Question2)`. I assume your real case is different, but if you cannot make use of `TextBoxFor()` and using an overload that accepts `htmlAttributes` to generate the html you need, then the correct approach is to create your own `HtmlHelper` method (and making use of existing methods in the `HtmlHelper` class and `System.Web.Mvc.Html` namespace)



When using any of the [Input Extension Helper Methods][1], like [`@Html.TextboxFor`][2], any [Validation Attributes][3] from your model are automatically generated by the Razor engine (via [`ClientValidationEnabled`][4]/[`UnobtrusiveJavaScriptEnabled`][5]).

For example, take the following case which works fine

**Model**:



    [Required]
    public string QuestionOne { get; set; }

**View**:



    @Html.TextBoxFor(model => model.QuestionOne) 
    @Html.ValidationMessageFor(model => model.QuestionOne)

**Generated Markup**:



	<input type="text" id="QuestionOne" name="QuestionOne" value=""
           data-val="true" data-val-required="The QuestionOne field is required." > 
	<span class="field-validation-valid" data-valmsg-for="QuestionOne" data-valmsg-replace="true"></span>

In this case the attributes `data-val="true"` & `data-val-required="The QuestionOne field is required."` are picked up by Unobtrusive validation and the form element is successfully validated.


---

**However**, for extensibility reasons, I want to be able to generate the `<input>` element myself instead of using `TextBoxFor`.  So my view would now look like this:



    <input type="textbox" 
		   id="@Html.IdFor(m => m.QuestionTwo)"
		   name="@Html.NameFor(m => m.QuestionTwo)" 
		   value="@Model.QuestionTwo"
		   data-val="true" data-val-required="Selection is Required" />
	
	@Html.ValidationMessageFor(model => model.QuestionTwo)

In this case, I'm faking the validation attribute output by just re-writing `data-val="true" (etc)` by hand, but this would have to be expanded to cover every single case.

### [Here's a running Demo in .NET Fiddle][6]


**Q: Can I build /return a list of `data-val-*` attributes for a given element?**

[1]: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions "System.Web.MVC.Html.InputExtensions"
[2]: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.textboxfor "System.Web.MVC.Html.InputExtensions.TextboxFor"
[3]: https://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.validationattribute "System.ComponentModel.DataAnnotations.ValidationAttribute"
[4]:https://msdn.microsoft.com/en-us/library/system.web.mvc.viewcontext.clientvalidationenabled "System.Web.MVC.ViewContext.ClientValidationEnabled"
[5]: https://msdn.microsoft.com/en-us/library/system.web.mvc.viewcontext.unobtrusivejavascriptenabled "System.Web.MVC.CiewContext.UnobtrusiveJavaScriptEnabled"
[6]: https://dotnetfiddle.net/4U6pIO