Custom HTML Helper for Validation Msg - razor

Question

I wrote a custom HTTML Helper Tag for the output of Validation Messages. It works properly, however it is always present.
#Html.MyValidationMsg(m => m.FirstName)
public static IHtmlContent MyValidationMsg<TModel, TProperty>(this IHtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
MemberExpression memberExpression = expression.Body as MemberExpression;
var reqAttrib = memberExpression.Member
.GetCustomAttributes(typeof(RequiredAttribute), false)
.Cast<RequiredAttribute>()
.SingleOrDefault();
var displayAttrib = memberExpression.Member
.GetCustomAttributes(typeof(DisplayAttribute), false)
.Cast<DisplayAttribute>()
.SingleOrDefault();
var errMsg = reqAttrib.ErrorMessage ?? displayAttrib.Name + " is required.";
var content = new HtmlContentBuilder()
.AppendHtml("<div class=\"rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger\">")
.AppendHtml("<span class=\"rvt-inline-alert__icon\">")
.AppendHtml("<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">")
.AppendHtml("<g fill=\"currentColor\">")
.AppendHtml("<path d=\"M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z\" />")
.AppendHtml("<path d=\"M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z\"/>")
.AppendHtml("</g>")
.AppendHtml("</svg>")
.AppendHtml("</span>")
.AppendHtml("<span class=\"rvt-inline-alert__message\" role=\"alert\" id=\"radio-list-message\">")
.AppendHtml(errMsg)
.AppendHtml("</span>")
.AppendHtml("</div>");
return content;
}
How would I hide it on initial load of the Razor Page and when the field is invalid make it appear?
Thank you for your help

Answer 1

There're two reason why the message always occurs.
As #Sonal Borkar said, the first reason is your var errMsg = reqAttrib.ErrorMessage ?? displayAttrib.Name + " is required." makes it return some value even if there's no [Required] attribute docorated at all.
But don't change it to be var errMsg = reqAttrib.ErrorMessage != null ? displayAttrib.Name + " is required.", because the reqAttrib might be null. Instead, you can change the code as below :
var errMsg = reqAttrib==null ?
"":
reqAttrib?.ErrorMessage ?? displayName + " is required.";
Secondly, you forgot to check whether the current property has already got a value. Suppose we have a property with a [Required] attribute decorated, and it does have a value assigned, then we should not display the required message like "xxx is requried".
Besides, there're some other bugs of null object reference in your code:
var displayAttrib = memberExpression.Member
.GetCustomAttributes(typeof(DisplayAttribute), false)
.Cast<DisplayAttribute>()
.SingleOrDefault();
var errMsg = reqAttrib.ErrorMessage ?? displayAttrib.Name + " is required.";
the reqAttrib might be null, so the reqAttrib.ErrorMessage might throw errors.
the displayAttrib might be null too
if displayAttrib is null, we should fall back tomemberExpression.Member.Name
To Fix the bugs, change your code as below :
public static IHtmlContent MyValidationMsg<TModel, TProperty>(this IHtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
MemberExpression memberExpression = expression.Body as MemberExpression;
var reqAttrib = memberExpression.Member
.GetCustomAttributes(typeof(RequiredAttribute), false)
.Cast<RequiredAttribute>()
.SingleOrDefault();
var contentBuilder = new HtmlContentBuilder();
// if the current property has no [Required] attribute, there's no need to display required message
if(reqAttrib == null ){return contentBuilder; }
// check the value of current property
var compiled = expression.Compile();
var model = (TModel) helper.ViewData.Model ;
if(model == null){
throw new Exception("No Model associated with the view !");
}
var propValue = (TProperty) compiled.Invoke(model);
// I just test nullable props here, you might custom it to fulfill your requirements, eg : whether the length of string matches
if(propValue != null){ return contentBuilder; }
var member = memberExpression.Member;
var displayName= member
.GetCustomAttributes(typeof(DisplayAttribute), false)
.Cast<DisplayAttribute>()
.SingleOrDefault()
?.Name // might be null
?? member.Name; // fall back
var errMsg = reqAttrib==null ?
"":
reqAttrib?.ErrorMessage ?? displayName + " is required.";
if(String.IsNullOrEmpty(errMsg)){ return contentBuilder; }
return contentBuilder
.AppendHtml("<div class=\"rvt-inline-alert rvt-inline-alert--standalone rvt-inline-alert--danger\">")
.AppendHtml("<span class=\"rvt-inline-alert__icon\">")
.AppendHtml("<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\">")
.AppendHtml("<g fill=\"currentColor\">")
.AppendHtml("<path d=\"M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z\" />")
.AppendHtml("<path d=\"M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z\"/>")
.AppendHtml("</g>")
.AppendHtml("</svg>")
.AppendHtml("</span>")
.AppendHtml("<span class=\"rvt-inline-alert__message\" role=\"alert\" id=\"radio-list-message\">")
.AppendHtml(errMsg)
.AppendHtml("</span>")
.AppendHtml("</div>");
}

Answer 2

BIG THANKS to #itminus for taking the time to get me on the correct path.
I ended up scratching this path entirely in favor of overriding jquery.validate. Also manipulated the DOM with javascript / jquery to get the desired outcome.
Desired output for an error message:
<div class="rvt-inline-alert rvt-inline-alert--danger">
<span class="rvt-inline-alert__icon">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<g fill="currentColor">
<path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z"/>
<path d="M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z"/>
</g>
</svg>
</span>
<span class="rvt-inline-alert__message" role="alert">Your Name is required.</span>
</div>
Code in _ValidationScriptsPartial.cshtml to do the magic:
<script type="text/javascript">
var settings = {
errorElement: "span",
errorClass: "rvt-validation-danger", //around textbox on error
errorPlacement: function (error, element) {
var avg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
avg.setAttribute("width", "16");
avg.setAttribute("height", "16");
avg.setAttribute("viewBox", "0 0 16 16");
avg.setAttribute("aria-hidden", "true");
var g = document.createElement("g");
g.setAttribute("fill", "currentColor");
var p1 = document.createElement("path");
p1.setAttribute("d", "M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14a6,6,0,1,1,6-6A6,6,0,0,1,8,14Z");
var p2 = document.createElement("path");
p2.setAttribute("d", "M10.83,5.17a1,1,0,0,0-1.41,0L8,6.59,6.59,5.17A1,1,0,0,0,5.17,6.59L6.59,8,5.17,9.41a1,1,0,1,0,1.41,1.41L8,9.41l1.41,1.41a1,1,0,0,0,1.41-1.41L9.41,8l1.41-1.41A1,1,0,0,0,10.83,5.17Z");
g.appendChild(p1);
g.appendChild(p2);
avg.appendChild(g);
var spanIcon = document.createElement("span");
spanIcon.setAttribute("class", "rvt-inline-alert__icon");
spanIcon.innerHTML += avg.outerHTML;
var spanMsg = document.createElement("span");
spanMsg.setAttribute("class", "rvt-inline-alert__message");
spanMsg.setAttribute("role", "alert");
spanMsg.innerHTML += error[0].innerHTML;
var c = document.createElement("div");
c.setAttribute("class", "rvt-inline-alert rvt-inline-alert--danger");
c.innerHTML += spanIcon.outerHTML + spanMsg.outerHTML;
error.replaceWith(c);
}
};
$.validator.unobtrusive.options = settings;
</script>