I am using HTML 5 validation and on several fields I am validating against a pattern. Is it possible to find whether the type of validation error was for example a required error or a failure to match a pattern etc? Here is my code :
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Contact</title>
</head>
<body>
@using (Html.BeginForm())
{
<div>
<p>
@Html.LabelFor(model => model.Name)<br />
@Html.TextBoxFor(model => model.Name, new {@type = "text", @placeholder = "Enter a name", @required="true"})
@Html.ValidationMessageFor(model => model.Name)
</p>
<p>
@Html.LabelFor(model => model.EmailAddress)<br />
@Html.TextBoxFor(model => model.EmailAddress, new {@type = "text", @placeholder = "Enter an email address", @required="true", @pattern=@"^([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$" })
@Html.ValidationMessageFor(model => model.EmailAddress)
</p>
<p>
@Html.LabelFor(model => model.PhoneNumber)<br />
@Html.TextBoxFor(model => model.PhoneNumber, new {@type = "text", @placeholder = "Enter a Phone Number", @required="true", @pattern=@"^[\+\d\(]{1}[\d\(]{1}[\d\-\(\) ]{3,19}$"})
@Html.ValidationMessageFor(model => model.PhoneNumber)
</p>
<p>
@Html.LabelFor(model => model.Details)<br />
@Html.TextAreaFor(model => model.Details, new {@type = "text", @placeholder = "Enter Details", @id = "Details", @required="true"})
@Html.ValidationMessageFor(model => model.Details)
</p>
<input type="submit" value="Submit" style="font-size:11px;font-family:Verdana;font-weight:bold;" />
</div>
}
</body>
<script type="text/javascript">
$(document).ready(function () {
var elementsInput = document.getElementsByTagName("input");
var elementsTextArea = document.getElementsByTagName("textarea");
for (var i = 0; i < elementsInput.length; i++) {
elementsInput[i].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Name":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna nimesi");
} else {
e.target.setCustomValidity("Please enter a Name");
}
break;
case "EmailAddress":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna sähköpostiosoitteesi");
} else {
e.target.setCustomValidity("Please enter an Email Address");
}
break;
case "PhoneNumber":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Anna puhelinnumerosi");
} else {
e.target.setCustomValidity("Please enter a Phone Number");
}
break;
}
}
};
elementsInput[i].oninput = function (e) {
e.target.setCustomValidity("");
};
}
for (var j = 0; j < elementsTextArea.length; j++) {
elementsTextArea[j].oninvalid = function (e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
switch (e.target.name) {
case "Details":
if ("@Thread.CurrentThread.CurrentUICulture.Name.ToLower()" == "fi-fi") {
e.target.setCustomValidity("Täytäthän yksityiskohdat");
} else {
e.target.setCustomValidity("Please enter Details");
}
break;
}
}
};
elementsTextArea[j].oninput = function (e) {
e.target.setCustomValidity("");
};
}
});
</script>
</html>
Figured this out, using element.validity.valueMissing and element.validity.patternMismatch (http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#the-constraint-validation-api)