Try this (pattern)
updated
$(function () {
$("span[class^=field-validation]")
.each(function (i, el) {
if ( $(el).text().length > 1 ) {
$(el).css("display", "block")
};
});
});
Frage
I am having a problem with :empty and :not(:empty)(jquery, mvc 5, asp.net, css). My aim is to make the error message visible only if there is a text like "The Street field is required." and otherwise make it disappear. It works only partly.
On the server side it looks like:
<div class="BWForm_form-group">
<div class="col-md-4 BWTextLeft">
@Html.BWLabelFor(model => model.street, new { @class = "BWLabel" })
<b>/</b>
@Html.BWLabelFor(model => model.streetNo, new { @class = "BWLabel" })
</div>
<div class="col-md-8">
<div class="col-md-9 BWPaddingRight">
@Html.EditorFor(model => model.street, new { @class = "BWForm_form-control BWTextBox" })
</div>
<div class="col-md-3 BWPaddingLeft">
@Html.EditorFor(model => model.streetNo, new { @class = "BWForm_form-control BWTextBox" })
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-offset-4 col-md-8">
@Html.ValidationMessageFor(model => model.street)
@Html.ValidationMessageFor(model => model.streetNo)
</div>
</div>
The relevant part for my problem is only "@Html.ValidationMessageFor(model => model.street)", which will cause the original HTML to look like(only the relevant code):
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="receiverAddress.street"></span>
If an error occured(when sending the form, and detecting errors) the following HTML will be shown (the previous("original HTML") html will completely replaced):
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="receiverAddress.street">
<span class="" for="receiverAddress_street">The Street field is required.</span>
</span
My idea was to do it like(it works):
$('span.field-validation-error:empty').hide();
$('span.field-validation-valid:empty').hide();
But than I want to re-display it like again(this doesn't work) :
$('span.field-validation-error:not(:empty)').show(100);
$('span.field-validation-valid:not(:empty)').show(100);
The Html looks still like(style="display: none;" it is still disabled):
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="receiverAddress.street" style="display: none;">
<span class="" for="receiverAddress_street">
The Street field is required.
</span>
</span>
But what can I do to display it back again and why doesn't it work ?
Ty for helping. Martin
(updated: added additional informations)
Lösung
Try this (pattern)
updated
$(function () {
$("span[class^=field-validation]")
.each(function (i, el) {
if ( $(el).text().length > 1 ) {
$(el).css("display", "block")
};
});
});