title: How To Do Client-Side Validation In Custom Validation Attribute In ASP.NET Core 2.0?
body: <p>Here I am trying to do both client and server side validation in <code>Age</code> property of model class <code>contact</code> for which i have used custom validation attribute i.e <code>Digt</code> and <code>UpperCase</code> attribute for checking uppercase and digit in input, if not should give error message as specified in validation attribute.<br>
  Now, the problem is that on click of submit button the validation message is displayed as required but before the click of submit button the error message is not displayed even though the condition for input is not meet.<br><br>
  Any Help will be great and highly appreciated.Thank you<br><br>
  Below is my both digit and uppercase custom validation attribute
  <br>
  <b>Uppercase Attribute</b></p>
  
  <pre><code>public class UpperCaseAttribute : ValidationAttribute
  {
      protected override ValidationResult IsValid(object value, ValidationContext validationContext)
      {
          if (value != null)
          {
              string suppliedValue = (string)value;
              var hasUpperChar = new Regex(@"[A-Z]+");
              var match = hasUpperChar.IsMatch(suppliedValue);
              if (match == false)
              {
                  return new ValidationResult("Input Should Have Uppercase ");
              }
          }
          return ValidationResult.Success;
      }
  }
  </code></pre>
  
  <p><br><br>
  <b>Digit Attribute</b></p>
  
  <pre><code>public class DigitAttribute : ValidationAttribute
  { 
      protected override ValidationResult IsValid(object value, ValidationContext validationContext)
      {
          if (value != null)
          {
              string suppliedValue = (string)value;
              var hasNumber = new Regex(@"[0-9]+");
              var match = hasNumber.IsMatch(suppliedValue);
              if(match == false)
              {
                  return new ValidationResult("Input Should Have Number");
              }
          }
          return ValidationResult.Success;
      }
  }
  </code></pre>
  
  <p><br>
  Below is my metadata for contact model class
  <br>
  <b>ContactMetadata</b><br></p>
  
  <pre><code>public class ContactMetadata
  {
      public int Id { get; set; }
      [Required(ErrorMessage = "Age is Required")]
      [UpperCase]
      [Digit]
      public string Age { get; set; }
  }
  </code></pre>
  
  <p><br><br>
  Below is my view
  <b>Create View</b><br></p>
  
  <pre><code>&lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-4"&gt;
      &lt;form asp-action="Create"&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Age" class="control-label"&gt;&lt;/label&gt;
              &lt;input asp-for="Age" class="form-control" /&gt;
              &lt;span asp-validation-for="Age" class="text-danger"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>