Как сделать, чтобы текстовое поле при выходе содержало одно сообщение с меткой ошибки среди 5 текстовых полей в вашей форме? - PullRequest
Новая
       4

Как сделать, чтобы текстовое поле при выходе содержало одно сообщение с меткой ошибки среди 5 текстовых полей в вашей форме?

0 голосов
/ 24 марта 2020

У меня есть форма с 5 текстовыми полями. Мне нужно найти способ сделать одно сообщение с меткой ошибки среди них. Кто может помочь мне улучшить мою логику c из моей формы? Форма должна иметь сообщение об ошибке метки только на почтовый индекс, когда другие текстовые поля должны быть красными со стилем.

У меня есть работа с электронной почтой, и она работала, но я, кажется, изо всех сил пытаюсь сделать логи c для этих текстовых полей. Пожалуйста, помогите мне получить эту логику c правильно. 

<div class="row">
  <label for="Address">Address</label>
  <div class="col-md-6 ">
    <div class="input-group pull-right">
      @Html.TextBoxFor(m => m.HomeMainModel.Address, new { @class = "form-control", type = "text", id = " street address", autofocus = "autofocus", placeholder = "Street Address", required = "required" })
      <div class="input-group-append">
        <div class="input-group-text"></div>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6 col-sm-10 col-xs-10">
  <label id="labelMessaget" class="text-danger" style="display:none"></label>
</div>
<hr />
<div class="row">
  <div class="col-md-6 ">
    <div class="input-group pull-right">
      @Html.TextBoxFor(m => m.HomeMainModel.Address, new { @class = "form-control", type = "text", id = "address", autofocus = "autofocus", placeholder = "Street Address Line 2", required = "required" })
      <div class="input-group-append">
        <div class="input-group-text">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="input-group mb-2">
    <div class="input-group-prepend"></div>
    <div class="input-group col-md-7 col-md-offset-7 col-sm-7 col-xs-7">
      <div class="input-group pull-right">
        @Html.TextBoxFor(m => m.HomeMainModel.City, new { @class = "form-control", type = "text", id = "city", autofocus = "autofocus", placeholder = "City", required = "required" }) @Html.TextBoxFor(m => m.HomeMainModel.State, new { @class = "form-control",
        type = "text", id = "state", autofocus = "autofocus", placeholder = "State/ Province", required = "required" })
        <div class="input-group-append">
          <div class="input-group-text"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-sm-10 col-xs-10">
    <label id="labelMessaget" class="text-danger" style="display:none"></label>
  </div>
  <div class="input-group mb-2">
    <div class="input-group-append"></div>
    <div class="input-group col-md-7 col-md-offset-3 col-sm-2 col-xs-2">
      <div class="input-group pull-right">
        @Html.TextBoxFor(m => m.HomeMainModel.Code, new { @class = "form-control", type = "text", id = "postal code", autofocus = "autofocus", placeholder = "Postal/Zip Code" }) @Html.DropDownListFor(m => m.HomeMainModel.SelectedCountryId, this.ViewBag.CountryList
        as SelectList, new { @class = "form-control" })
        <div class="input-group-append">
          <div class="input-group-text"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6 col-sm-10 col-xs-10">
  <label id="labelMessaget" class="text-danger" style="display:none"></label>
</div>

// function when leaving texbox for city, street address, street_address_line2, state_province.  
$(function() {
  $('#City').blur(function() {
    var city = document.getElementById("City").value;
    var expr = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!expr.test(city)) {
      document.getElementById("labelMessaget").style.display = "inline";
    } else {
      document.getElementById("labelMessaget").style.display = "none";
    }
  });
});
...