Johnathon Sullinger Johnathon Sullinger - 4 months ago 18
jQuery Question

Toggle element visibility based on validation results

Given the following HTML

<form class="form-horizontal"
asp-controller="Installation"
asp-action="CreateUser"
method="post">
<fieldset>

<!-- Form Name -->
<legend>Account Creation</legend>

<!-- Username input-->
<div class="form-group">
<label class="col-md-4 control-label" for="userName">Username</label>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span class="has-error" asp-validation-for="UserName"></span>
</div>
</div>

<!-- Email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email"
name="email"
type="text"
placeholder="jane@doe.com"
class="form-control input-md"
required=""
asp-for="Email">
<span class="help-block">Enter your e-mail address</span>
</div>
</div>

<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password"
name="password"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="Password">
<span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
</div>
</div>

<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
<div class="col-md-4">
<input id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="PasswordConfirmation">
<span class="help-block">Re-enter your password</span>
</div>
</div>

<!-- Submit -->
<div class="form-group">
<label class="col-md-4 control-label"
for="createAccount"></label>
<div class="col-md-4">
<button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
</div>
</div>

</fieldset>
</form>


I would like to hide/show the
usernameTip
span, when the
asp-validation-for
span contains a validation error, along with any other span that i'm using as a tip when there is an adjacent
asp-validation-for
span.

Reading this post I can get the JavaScript needed to show/hide the span. The only thing I can't figure out is if the View actually has knowledge of the validation errors in a manor that lets me conditionally hide/show that
usernameTip
span if errors exist.

Does anyone know what I need to do in order to toggle the visibility based off the data annotation errors on my model?

When looking in Chrome,
asp-validation-for
span is turned into this at compile time:

<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>


EDIT



When validation fails, there is a
==$0
appended to the end.

Usernames must be between 2 and 50 characters == $0

I do not see any classes being added or removed from the span when the validation fails.

Edit 2



I got this working using the accepted answer. For those looking in the future however, you can use MVC's
ViewData
property in the view to determine if there are errors.

<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
@if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
{
<span class="help-block">Enter a unique Username</span>
}
else
{
<span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
}
</div>

Answer
<div class="col-md-4">
    <input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
    <span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
    <span id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
    <script>

   if( $("#error").text().length>0){
//show usernameTip 
}
</script>
Comments