Client Custom Validation Message is not Showing

Question

User210895818 posted

I am trying to add custom validation on two model properties Total and Obtained Marks (obtained should be less than Total). Server validation workes perfectly and showing the validation message, but I am using partial view so whenever the model return to show the message the CSS gone. So I need to add client-side validation but it does not work according. here is my Model

Public Class Model
{
   Public int MTMarks {get; set;}

   [Display(Name = "Obtained Marks")]
   [MOMarks("MTMarks", ErrorMessage = "Obtained Marks must be smaller than Total")]
   Public int MOMarks {get; set;}
}

Custom Validation Code:

        public class MOMarksAttribute : ValidationAttribute, IClientValidatable
        {
            private readonly string _propertyNameToCheck;

            public MOMarksAttribute(string propertyNameToCheck)
            {
                _propertyNameToCheck = propertyNameToCheck;
                    
            }
            protected override ValidationResult IsValid(object value, ValidationContext validationContext)
            {
                ErrorMessage = ErrorMessageString;
                var GetObtValue = Convert.ToInt32(value);

                var property = validationContext.ObjectType.GetProperty(_propertyNameToCheck);
                if(property == null)
                   return new ValidationResult("Enter Matrix Total Marks First");

                var propertyValue = property.GetValue(validationContext.ObjectInstance, null) as string;
                var GetTotalValue = Convert.ToInt32(propertyValue);

                if (GetObtValue > GetTotalValue)
                    return new ValidationResult(ErrorMessage);

                return ValidationResult.Success;

            }
            public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
            {
                var rule = new ModelClientValidationRule
                {
                    ValidationType = "momarks"
                };
                rule.ValidationParameters.Add("nametocheck", _propertyNameToCheck);
                yield return rule;
            }

            
        }

and ClientValidation.js Code

(function ($) {
    jQuery.validator.addMethod('momarks',
      function (value, element, params) {
          var propertyValue = $('#' + params.nametocheck).val();
          if (propertyValue == null)
              return false;
          if (value.length > propertyValue)
              return false;
          
          return true;
      });

    jQuery.validator.unobtrusive.adapters.add('momarks',
      ['nametocheck'],
      function (options) {
          options.rules['momarks'] = {
              nametocheck: options.params.nametocheck,
          };
          options.messages['momarks'] = options.message;
      });
})(jQuery);

Please help what and where I am doing wrong?

Answer 1

User1520731567 posted

Hi Ridzi,

Client Custom Validation Message is not Showing

Actually,you used two different validate method in your code,one is jQuery Validation in front end  and one is back end with ValidationAttribute.

So, your message is not Showing.

If you would like to use Client Custom Validation,please refer to this link about jQuery Validation Plugin.

For example:

 jQuery.validator.addMethod("momarks", function (value, element) {
             .....
            }, "must be xxxxx!");



$("#myForm").validate({
	  rules: {
                    "code": {  // there is a filed named code in form
                        required: true,
                        momarks: true
                    }
                },
                messages: {
                    "code": {
                        required: "do not null!"
                    }
	}
});

If you perfer to server validate,you could refer to this similar post whcih also using ValidationAttribute in server.

After browsing above links,you could choose the method that suits you,

If you still have problems,please post more details.

Best Regards.

Yuki Tao

Answer 2

User-474980206 posted

you should check the html to see that the data-val-* for your custom validation are being rendered. but the most likely case is that your:

 jQuery.validator.addMethod('momarks',

jQuery.validator.unobtrusive.adapters.add('momarks',

are running after the unobtrusive validation initialization has run. they should not be in $ready(), but must be after the script includes.