[英]Client side validation for custom validator asp.net MVC 4
我有一個可以工作的自定義服務器端驗證器,但是我正在努力使客戶端工作。 這是我到目前為止所擁有的。
驗證程序正在檢查輸入的一個值至少是輸入的另一個值的百分比。
public sealed class PercentageOfAttribute : ValidationAttribute, IClientValidatable
{
private readonly string sourcePropertyName;
private readonly int minimumPercentage;
public PercentageOfAttribute(string sourcePropertyName, int minimumPercentage)
{
this.sourcePropertyName = sourcePropertyName;
this.minimumPercentage = minimumPercentage;
}
protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
var propertyName = validationContext.ObjectType.GetProperty(this.sourcePropertyName);
if (propertyName == null)
return new ValidationResult(String.Format("Uknown property {0}", this.sourcePropertyName));
int propertyValue = (int)propertyName.GetValue(validationContext.ObjectInstance, null);
var minValue = (propertyValue / 100) * this.minimumPercentage;
if ((int)value > minValue)
return ValidationResult.Success;
return new ValidationResult(FormatErrorMessage(validationContext.DisplayName));
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ErrorMessage = this.ErrorMessageString,
ValidationType = "percentageof"
};
rule.ValidationParameters["propertyname"] = this.sourcePropertyName;
rule.ValidationParameters["minimumpercentage"] = this.minimumPercentage;
yield return rule;
}
}
還有客戶端的javascript ...
jQuery.validator.addMethod("percentageof", function (value, element, params) {
var propertyname = params['propertyname'];
var minimumpercentage = param['minimumpercentage'];
var propValue = $('#' + propertyname).val();
var minValue = (propValue / 100) * minimumpercentage;
if (value >= minValue) {
return true;
}
return false;
});
jQuery.validator.unobtrusive.adapters.add("percentageof", ["propertyname", "minimumpercentage"], function (options) {
options.rules['propertyname'] = options.params.propertyname;
options.rules['minimumpercentage'] = options.params.minimumpercentage;
options.message['percentageof'] = options.message;
});
我已經調試了addapters.add函數,這傳遞了正確的數據。 “ data-val-percentageof- *”值出現在html中並具有正確的值。
我當前收到的JavaScript錯誤是“ $ .validator.methods [method]未定義”。 我認為這意味着我沒有正確設置客戶端驗證器。 我已經閱讀了無數示例和教程,但似乎無法找出一種可行的組合。
如果刪除所有自定義內容,則默認客戶端驗證會完美運行。
誰能幫我看看我做錯了什么?
編輯:
呈現的html如下
<div class="form-group">
<label class="col-sm-3 control-label" for="PurchasePrice">Purchase Price (£36,000 minimum) *</label>
<div class="col-sm-6">
<input id="PurchasePrice" class="form-control valid" type="text" value="0" name="PurchasePrice" data-val-required="Please enter a Purchase Price" data-val-range-min="36000" data-val-range-max="2147483647" data-val-range="Please enter at least £36,000" data-val-number="The field Purchase Price (£36,000 minimum) * must be a number." data-val="true">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="PurchasePrice"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="Deposit">Available Deposit (30% minimum)*</label>
<div class="col-sm-6">
<input id="Deposit" class="form-control" type="text" value="0" name="Deposit" data-val-required="Please enter an Available Deposit" data-val-percentageof-propertyname="PurchasePrice" data-val-percentageof-minimumpercentage="30" data-val-percentageof="Please enter value that is at least 30% of the purchase price" data-val-number="The field Available Deposit (30% minimum)* must be a number." data-val="true">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Deposit"></span>
</div>
</div>
我設法通過如下更改... adapters.add函數的格式來使其工作
jQuery.validator.addMethod("percentageof", function (value, element, params) {
var propertyname = params['propertyname'];
var minimumpercentage = params['minimumpercentage'];
var propValue = $('#' + propertyname).val();
var minValue = (propValue / 100) * minimumpercentage;
if (value >= minValue) {
return true;
}
return false;
});
jQuery.validator.unobtrusive.adapters.add("percentageof", ["propertyname", "minimumpercentage"], function (options) {
options.rules["percentageof"] = options.params;
if (options.message) {
options.messages['percentageof'] = options.message;
}
});
我錯誤地嘗試將參數添加為規則! 代碼的addMethod部分中也有錯字。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.