Click here to Skip to main content
15,502,868 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Hi Team

I have these following fields on my web form asp.net, street name, street address line 2, city, postal code, country and state/province. I am struggling now to make a error validation when leaving state/province textbox field. While rest of other field remained focus with red error with no message only one. Here is my logic below as a way to attempt this issue.

What I have tried:

// Model class
[Required(ErrorMessage = "This field is required")]
public string State { get; set; }
```

View.cshtml

```html
<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 = "inputFormVal",autofocus = "autofocus", placeholder = "Street Address", required = "required" })
         <div class="input-group-append">
            <div class="input-group-text">
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <label id="labelMessageBx" class="text-danger" style="display:none"></label>
   </div>
</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="inputFormVal", autofocus = "autofocus", placeholder = "Street Address Line 2", required = "required" })
         <div class="input-group-append">
            <div class="input-group-text">
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <label id="labelMessageBx" class="text-danger" style="display:none"></label>
   </div>
</div>
<hr />
<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 = "inputFormVal", autofocus = "autofocus", placeholder = "City" })           
            @Html.TextBoxFor(m => m.HomeMainModel.Code, new { @class = "form-control", type = "text", id = "inputFormVal", autofocus = "autofocus", placeholder = "Province" })
         </div>
      </div>
   </div>
   <div class="col-md-6">
      <label id="labelMessageBx" class="text-danger" style="display:none"></label>
   </div>
   <hr />
   <!--Zip code for postal code-->
   <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 = "inputFormVal",
            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 class="col-md-6">
         <label id="labelMessageBx" class="text-danger" style="display:none"></label>
      </div>
   </div>
</div>
```
    
```javascript
// function when leaving texbox for city, street address, street_address_line2, state_province.
$(function() {
  $('#inputFormVal').blur(function() {
    var city = document.getElementById("inputFormVal").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("labelMessageBx").style.display = "inline";
    } else {
      document.getElementById("labelMessageBx").style.display = "none";
    }
  });
});
```
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900