MVC form doesn't validate - asp.net-mvc-3

Question

I am very new to MVC 3.
I am using custom helpers for the controls but when i submit the form, the control is not being validated.
Can some one tell me if i am missing something? Following is the code snippet.
public static MvcHtmlString TextBox(string fieldName)
{
TagBuilder tagBuilder = new TagBuilder("Input");
tagBuilder.MergeAttribute("type", "Text");
tagBuilder.AddCssClass("text-box");
tagbuilder.MergeAttribute("data-val","true");
tagbuilder.MergeAttribute("data-val-regex-pattern","true");
tagbuilder.MergeAttribute("data-val","true");
TagBuilder validator = new TagBuilder("span");
validator.MergeAttribute("data-valmsg-for", fieldName);
validator.MergeAttribute("data-valmsg-replace", "true");
validator.MergeAttribute("class", "field-validation-valid");
return new MvcHtmlString(string.Concat(tagBuilder.ToString(), validator.ToString()));
}
The view has the following code
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="main-border" style="width: 890px;">
<div style="clear: both;">
</div>
<div style="padding: 0px 20px 0px 20px;">
<table style="width: 100%">
<tr>
<td colspan="2" class="main-subhead2">
<div class="label-text">
</div>
</td>
</tr>
<tr>
<td>Email :</td>
<td>#ControlHelper.TextBox("txtEmailAddress")</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit" onclick="return validate(this.form);" /></td>
</tr>
</table>
</div>
</div>
}
the source code of rendered by the page is :
<form action="/" method="post">
<div class="main-border" style="width: 890px;">
<div style="clear: both;">
</div>
<div style="padding: 0px 20px 0px 20px;">
<table style="width: 100%">
<tr>
<td colspan="2" class="main-subhead2">
<div class="label-text">
</div>
</td>
</tr>
<tr>
<td>Email :</td>
<td><Input class="text-box" data-val="True" data-val-regex-pattern="^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z]))*#[A-Za-z0-9_\.-]+[A-Za-z0-9_][A-Za-z0-9_]$" name="txtEmailAddress" type="Text" visible="True"></Input><span class="field-validation-valid" data-valmsg-for="txtEmailAddress" data-valmsg-replace="true"></span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit" /></td>
</tr>
</table>
</div>
</div>
</form>

Answer 1

Input should be lowercased:
TagBuilder tagBuilder = new TagBuilder("input");
And don't forget to include the unobtrusive client side validation scripts to your page:
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
and ensure that client side validation is enabled in web.config:
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Answer 2

There are a number of reasons your form may not validating. In MVC3, you're most likely going to want to use unobtrusive validation (via jQuery). You can learn how to do this (it's not a big change - just include the correct JavaScript libraries and update web.config) at Microsoft's ASP.NET website.

Answer 3

You may need to add (data-val-regex) attribute:
public static MvcHtmlString TextBox(string fieldName)
{
TagBuilder tagBuilder = new TagBuilder("Input");
tagBuilder.MergeAttribute("type", "Text");
tagBuilder.AddCssClass("text-box");
tagbuilder.MergeAttribute("data-val","true");
tagbuilder.MergeAttribute("data-val-regex-pattern","true");
tagbuilder.MergeAttribute("data-val","true");
tagbuilder.MergeAttribute("data-val-regex","Field must be character (?![ء|ئ|ؤ])[ء-يA-Za-z]");
TagBuilder validator = new TagBuilder("span");
validator.MergeAttribute("data-valmsg-for", fieldName);
validator.MergeAttribute("data-valmsg-replace", "true");
validator.MergeAttribute("class", "This is an invalid Email format!");
return new MvcHtmlString(string.Concat(tagBuilder.ToString(), validator.ToString()));
}