How to use client-validation to work on your ASP.NET MVC?

See more:

jQuery

C#5.0

bootstrap

ASP.NET5

Hi Team

I have the logic that determine, when space is empty it validate the message. But now i want to improve it by when the data is filter, the error does not get removed its there and its not good for user experience. I cant seem to find some examples also to use image for that error when the @EditorFor is empty be in the center and need some help there please team. Here is my logic below using jQuery and asp.net mvc on my Razor.

What I have tried:

<pre><!-- language: lang-html -->

    <div class="form-group row">
      <label for="Email" class="col-sm-2 col-form-label">Email:</label>
      <div class="col-sm-4">
        @Html.EditorFor(model => model.RegForm.Email, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "Email", id = "textEmail" } }) @Html.ValidationMessageFor(model => model.RegForm.Email, "", new { @class = "text-danger"
        })
      </div>
      <label id="labelMessage" class="text-danger" style="display:none">This field is required</label>
    </div>
    <div class="form-group row">
      <label for="Attendee" class="col-sm-2 col-form-label">Attendee Cell Number*</label>
      <div class="col-sm-3">
        @Html.EditorFor(model => model.RegForm.CellNumber, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "Cell Number", id = "textCell" } }) @Html.ValidationMessageFor(model => model.RegForm.CellNumber)
      </div>
      <label id="cellMessage" class="text-danger" style="display:none">This field is required</label>
    </div>

<!-- language: lang-js -->

      $(function() {
        //When the blur event occurs from your Textbox (you lose focus)
        $('#textEmail').blur(function() {
          var email = document.getElementById("textEmail").value;
          var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
          if (!expr.test(email)) {
            document.getElementById("labelMessage").style.display = "inline";
          } else {
            document.getElementById("labelMessage").style.display = "none";
          }
        });
      });

      // Error message for cell-phone.
      $(function() {
        $('#textCell').blur(function() {
          var cell = document.getElementById("textCell").value;
          var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
          if (!expr.test(cell)) {
            document.getElementById("cellMessage").style.display = "inline";
          } else {
            document.getElementById("cellMessage").style.display = "none";
          }
        });

      });


      // Error message for ZipCode.
      $(function() {
        $('#textZipCode').blur(function() {
          var zipcode = document.getElementById("textZipCode").value;
          var expr = /[a-z0-9._%+-]+[a-z0-9.-]+\.[a-z]{2,}$/;
          if (!expr.test(zipcode)) {
            document.getElementById("labelZipCode").style.display = "inline";
          } else {
            document.getElementById("labelZipCode").style.display = "none";
          }
        });
      });