6

Я создал собственный атрибут проверки, который работает на стороне сервера (после отправки формы), но я не могу заставить валидацию работать на стороне клиента.jQuery Ненавязчивая проверка на стороне клиента настраиваемого атрибута

Обычай атрибут:

public class ReasonableAttribute : ValidationAttribute, IClientValidatable 
{ 
    public override bool IsValid(object value) 
    { 
     return Approval.IsNumberReasonable(value.ToString()); 
    } 

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context) 
    { 
     ModelClientValidationRule rule = new ModelClientValidationRule(); 
     rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()); 
     rule.ValidationType = "reasonable"; 
     yield return rule; 
    } 

} 

IsNumberReasonable() функция просто делает некоторые проверки на входе полей, чтобы убедиться, что они вошли бы разумно быть номер утверждения (например, не пусто, или «Неизвестный» или что-то например), возвращая bool true/false. затем

Моя модель содержит:

[Display(Name = "Approval Number"] 
[Reasonable(ErrorMessage = "Please enter a reasonable {0}")] 
public String ApprovalNumber { get; set; } 

Вид и содержит:

@Html.LabelFor(model => model.ApprovalNumber, new { @class = "control-label col-md-3" }) 
<div class="col-md-9 append field"> 
@Html.TextBoxFor(model => model.ApprovalNumber, new { @class = "input text" }) 
@Html.ValidationMessageFor(model => model.ApprovalNumber) 
</div> 

в JavaScript Я попытался добавить:

$.validator.unobtrusive.adapters.addBool("reasonable", "required"); 
// OR 
$.validator.unobtrusive.adapters.add("reasonable"); 

и (за пределами документа. готово)

(function ($) { 
      $.validator.addMethod('reasonable', function (value, element, params) { 
       return value != ''; 
      }, 'Clientside Should Not Postback'); 
      $.validator.unobtrusive.adapters.addBool('reasonable'); 
     })(jQuery); 

в различных комбинациях, но не смог заставить его работать.

Я получил

<script src="~/Scripts/jquery.validate.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 

включены в представлении.

Когда форма отправлена, проверка на стороне клиента работает для других полей (требуемых и т. Д.), Но сообщение проверки рядом с номером утверждения никогда не появляется/не выполняет мою собственную проверку.

Любые указатели в правильном направлении оцениваются. спасибо.

У меня также есть

<configuration> 
    <appSettings> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 
</configuration> 

Уже в файле Web.config.

Edit 2: согласно сообщению chenZ в: HTML, для поля ввода:

<input class="input text valid" data-val="true" data-val-reasonable="Please enter a reasonable Approval Number" data-val-required="Approval Number is Required." id="ApprovalNumber" name="ApprovalNumber" type="text" value=""> 

Пытался обновить дно моей точки зрения с:

<script src="~/Scripts/jquery.validate.js"></script> 
<script type="text/javascript"> 
    (function ($) { 
     $.validator.addMethod('reasonable', function (value, element, params) { 
      return value != ''; 
     }, 'Clientside Should Not Postback'); 
    })(jQuery); 
    </script> 

    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
<script src="~/Scripts/Create.js"></script> 

где конец jquery.validate.unobtrusive.js в настоящее время содержит:

$(function() { 
     $.validator.unobtrusive.adapters.addBool('reasonable'); 
     $("#formID").removeData("unobtrusiveValidation").removeData("validator"); 
     $jQval.unobtrusive.parse(document); 
    }); 
}(jQuery)); 

и create.js содержат:

$.validator.unobtrusive.adapters.addBool("mandatory", "required"); // another custom attribute for checkbox validation 
    var v = $("#formID").validate({ 
     errorClass: "warning", 
     onkeyup: false, 
     onblur: false, 
    }); 

переменной v используются далее вниз для кнопки отправки:

$("#SubmitButton").click(function() { 
    if (v.form()) { 
      // The form passed validation so continue.. 
     } else { 
      // Validation failed, do something else.. 
     } 
}); 

Я некоторое дальнейшее тестирование ансом это, кажется, что-то делать с:

(function ($) { 
      $.validator.addMethod('reasonable', function (value, element, params) { 
       return value != ''; 
      }, 'Clientside Should Not Postback'); 
     })(jQuery); 

, когда я меняю его на:

(function ($) { 
      $.validator.addMethod('reasonable', function (value, element, params) { 
       return value != 'unknown'; 
      }, 'Clientside Should Not Postback'); 
     })(jQuery); 

это работает, но только если я напечатаю «неизвестный» в поле ввода, все остальное пройдет. Аналогично, если я положил return value != 'jhdsfkhsdkfj';, он проверяется только при вводе jhdsfkhsdkfj.

поэтому кажется, что он использует это как правило? вместо моей серверной функции IsNumberReasonable().

Надеюсь, что это поможет в поиске и устранении неисправностей.

+0

is $.validator.addMethod выше ref jq.validate.unobtrusive? – chenZ

+0

не на 100% уверен, что вы подразумеваете под этим .. Да? '$ .validator.addMethod' и' $ .validator.messages' были использованы в другом месте JS, поэтому я предположил, что это был синтаксис для этого. – Jake

ответ

7

Я не пробовал, поэтому не уверен, но я думаю, что есть 2 места, где вы можете ошибаться.

1.rule.ValidationType = "разумный";
Проверьте HTML, найти вход и там атр данных валин-reasonalbe или reasonale

$.each(this.adapters, function() { 
      var prefix = "data-val-" + this.name, 

в jquery.validate.unobtrusive.js, строка 173, вы можете найти это, поэтому он должен быть данные-валин-хххх

2.in jquery.validate.unobtrusive.js конец файла вы можете найти

$(function() { 
    $jQval.unobtrusive.parse(document); 
}); 

так, когда страница загружена, все набор форм проверки

Это сложная вещь. Если ваш код подобен

<script src="~/Scripts/jquery.validate.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
..... 
(function ($) { 
     $.validator.addMethod('reasonable', function (value, element, params) { 
      return value != ''; 
     }, 'Clientside Should Not Postback'); 
     $.validator.unobtrusive.adapters.addBool('reasonable'); 
    })(jQuery); 

Когда вы ненавязчивым.синтаксический анализ (документ); Ваш действительный метод разумно не существует, и адаптер не существует существовать либо, так что ваша форма действует не правило разумного

Если изменить код, чтобы это нравится

<script src="~/Scripts/jquery.validate.js"></script> 
(function ($) { 
     $.validator.addMethod('reasonable', function (value, element, params) { 
      return value != ''; 
     }, 'Clientside Should Not Postback'); 
     $.validator.unobtrusive.adapters.addBool('reasonable'); 
    })(jQuery); 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 

действительных метод может, но $ .validator.unobtrusive неопределен

Я думаю, что вы должны сделать больше

<script src="~/Scripts/jquery.validate.js"></script> 
(function ($) { 
     $.validator.addMethod('reasonable', function (value, element, params) { 
      return value != ''; 
     }, 'Clientside Should Not Postback'); 
    })(jQuery); 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 

и поставить

$.validator.unobtrusive.adapters.addBool('reasonable'); 

, чтобы jquery.validate.unobtrusive.js, и убедитесь, что он работает, прежде чем

$(function() { 
    $jQval.unobtrusive.parse(document); 
}); 

Я не уверен, если он будет работать, может быть, я постараюсь позже. Надеюсь, это может вам помочь.

обновление Я попробовал. В пункте 2, вы можете использовать код

$(function() { 
    $("#formid").removeData("unobtrusiveValidation").removeData("validator"); 
    $.validator.unobtrusive.parse(document); 
}); 

Поместите этот код после добавления действительного метода, это будет ясно действительное значение и разбор снова с пользовательскими правилами

обновления 2

$("#a").validate({});//first time call is useful 
$("#a").validate({});//second time call is useless 

также ненавязчивый.parse (...)

jquery.validate.js line 41

var validator = $.data(this[0], "validator"); 
if (validator) { 
    return validator; 
} 

и jquery.validate.unobtrusive.js линии 99

result = $form.data(data_validation), 
    ... 
    if (!result) { .... 

когда <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
конец этого файла, называется unobtrusive.parse (документ), он будет добавлять данные в форме. Если он вызывается перед настройкой кода, параметр проверки не будет установлен. вы можете removeData (...), и запустить unobtrusive.parse (документ) ваш код еще раз, как

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
<script src="~/Scripts/setting.js"></script> 
<script> 
    $(function(){ $("#formid").removeData(...).removeData(...); 
    ....unobtrusive.parse(document)}); 
</script> 

плагин валидации использования данных имя «валидатора» и ненавязчивым использование имен данных «unobtrusiveValidation».

Мне очень жаль моего бедного английского, надеюсь, вы можете понять.

+0

hi chenZ, да, у входа есть атрибут 'data-val-reason'. Я попробовал то, что вы предложили (обновленный оригинальный пост с дополнительной информацией), но он все еще не работает на 100%. Благодарю. – Jake

+0

первый раз запустите unobtrusive.parse (document) или запустите $ (..). Validate ({}), он установит данные для формирования, в следующий раз запускает, проверяет, имеет ли форма данные, ничего не делает. – chenZ

0

Добавьте это к вашему Web.config

<configuration> 
    <appSettings> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
    </appSettings> 
</configuration> 

Круто затем попробуйте изменить ваше правило использовать правило ниже.

$.validator.unobtrusive.adapters.add("reasonable", ["reasonable"], function (options) { 
options.rules["reasonable"] = "#" + options.params.reasonable; 
options.messages["reasonable"] = options.message;}); 
+0

Привет, Gjohn, то, что вы предложили, уже существует в web.config. Я забыл добавить это к исходному сообщению ... – Jake

0

Поскольку я приземлялся здесь, когда рассматривал свою проблему, я хотел бы поделиться этим, если вы используете какие-либо сторонние библиотеки для элементов управления, например DevExpress с возможностью встраивания клиентских библиотек, тогда они могут фактически повторно включить скрипты проверки подлинности, которые могут привести к тому, что ваш адаптер будет правильно добавлен, чтобы снова потеряться. В моем случае мне пришлось переместить файл .js, создав ненавязчивый адаптер проверки на стороне клиента ниже этих других скриптов. Я также хотел бы рассмотреть возможность отказа от моего включения указанных файлов или настройку моей сторонней библиотеки, чтобы они не включали их, чтобы предотвратить такую ​​путаницу.

 Смежные вопросы

  • Нет связанных вопросов^_^