2
Answers

How to validate error message on web form?

Guest User

Guest User
4y
529
1
Hi Team
 
I want to validate when leaving textbox, error message of 5 textbox. Each of these except one textbox field must have error label red. Meaning i have street name, street address line2, city, post code, country, state/province. As soon you leave textbox(State/Province) It must validate error message "Field is required". I have tried using model Required data notation i could not success, please view my logic below.
  1. // Model class  
  2. [Required(ErrorMessage = "This field is required")]  
  3. public string State { get; set; }  
  4. ```  
  5.   
  6. View.cshtml  
  7.   
  8. ```html  
  9. <div class="row">  
  10.    <label for="Address">Address</label>  
  11.    <div class="col-md-6 ">  
  12.       <div class="input-group pull-right">  
  13.                         
  14.          @Html.TextBoxFor(m => m.HomeMainModel.Address, new { @class = "form-control", type = "text", id = "inputFormVal",autofocus = "autofocus", placeholder = "Street Address", required = "required" })  
  15.          <div class="input-group-append">  
  16.             <div class="input-group-text">  
  17.             </div>  
  18.          </div>  
  19.       </div>  
  20.    </div>  
  21.    <div class="col-md-6">  
  22.       <label id="labelMessageBx" class="text-danger" style="display:none"></label>  
  23.    </div>  
  24. </div>  
  25. <hr />  
  26. <div class="row">  
  27.    <div class="col-md-6 ">  
  28.       <div class="input-group pull-right">  
  29.                                           
  30.          @Html.TextBoxFor(m => m.HomeMainModel.Address, new { @class = "form-control", type = "text",  id="inputFormVal", autofocus = "autofocus", placeholder = "Street Address Line 2", required = "required" })  
  31.          <div class="input-group-append">  
  32.             <div class="input-group-text">  
  33.             </div>  
  34.          </div>  
  35.       </div>  
  36.    </div>  
  37.    <div class="col-md-6">  
  38.       <label id="labelMessageBx" class="text-danger" style="display:none"></label>  
  39.    </div>  
  40. </div>  
  41. <hr />  
  42. <div class="form-group">  
  43.    <div class="input-group mb-2">  
  44.       <div class="input-group-prepend">  
  45.       </div>  
  46.       <div class="input-group col-md-7 col-md-offset-7 col-sm-7 col-xs-7">  
  47.          <div class="input-group pull-right">  
  48.                                            
  49.             @Html.TextBoxFor(m => m.HomeMainModel.City, new { @class = "form-control", type = "text", id = "inputFormVal", autofocus = "autofocus", placeholder = "City" })             
  50.             @Html.TextBoxFor(m => m.HomeMainModel.Code, new { @class = "form-control", type = "text", id = "inputFormVal", autofocus = "autofocus", placeholder = "Province" })  
  51.          </div>  
  52.       </div>  
  53.    </div>  
  54.    <div class="col-md-6">  
  55.       <label id="labelMessageBx" class="text-danger" style="display:none"></label>  
  56.    </div>  
  57.    <hr />  
  58.    <!--Zip code for postal code-->  
  59.    <div class="input-group mb-2">  
  60.       <div class="input-group-append">  
  61.       </div>  
  62.       <div class="input-group col-md-7 col-md-offset-3 col-sm-2 col-xs-2">  
  63.          <div class="input-group pull-right">  
  64.                                
  65.                          
  66.             @Html.TextBoxFor(m => m.HomeMainModel.Code, new  
  67.             {  
  68.             @class = "form-control",  
  69.             type = "text",  
  70.             id = "inputFormVal",  
  71.             autofocus = "autofocus",  
  72.             placeholder = "Postal/Zip Code"  
  73.             })  
  74.                                 
  75.             @Html.DropDownListFor(m => m.HomeMainModel.SelectedCountryId, this.ViewBag.CountryList as SelectList, new { @class = "form-control" })  
  76.             <div class="input-group-append">  
  77.                <div class="input-group-text">  
  78.                </div>  
  79.             </div>  
  80.          </div>  
  81.       </div>  
  82.       <div class="col-md-6">  
  83.          <label id="labelMessageBx" class="text-danger" style="display:none"></label>  
  84.       </div>  
  85.    </div>  
  86. </div>  
  87. ```  
  88.       
  89. ```javascript  
  90. // function when leaving texbox for city, street address, street_address_line2, state_province.  
  91. $(function() {  
  92.   $('#inputFormVal').blur(function() {  
  93.     var city = document.getElementById("inputFormVal").value;  
  94.     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})(\]?)$/;  
  95.     if (!expr.test(city)) {  
  96.       document.getElementById("labelMessageBx").style.display = "inline";  
  97.     } else {  
  98.       document.getElementById("labelMessageBx").style.display = "none";  
  99.     }  
  100.   });  
  101. });  
  102. ```  
 
Answers (2)
Next Recommended Forum