私たちは最近 and に移行することにしました。jquery 1.9.1私たちのプロジェクトは にASP.NET MVC 3あるので、 and がjquery.validateありjquery.validate.unobtrusiveます。すべてが正常に機能し、これらのスクリプトとプロパティ属性による MVC 3 検証との間のデフォルトの統合は正常に機能していました。
ただし、更新以降、検証スクリプトも更新する必要があり、その際、「オンザフライ」で追加されたルールが機能しなくなりました。しかし、さらに奇妙なのは、一部のプロパティでのみ発生することです。$(form).validate({//things to validate})他の人では、ルールを通して単純に適用されます。
それをよりよく説明するために、いくつかのコードを示しましょう。ViewModel のプロパティは次のとおりです (縮小された例です)。
[DataType(DataType.Password)]
[Required(ErrorMessage = "*Required Field")]
[Remote("ValidatePassword", "Validator", AdditionalFields = "User")]
public string SenhaAnterior { get; set; }
[HiddenInput]
public int VerificacaoSeguranca { get; set; }
これがビューです
@using (Html.BeginForm("...", "...", null, FormMethod.Post, new { @id = "formMSenha" }))
{
<div id="container">
@Html.HiddenFor(model => model.VerificacaoSeguranca, new { @id = "hdSeguranca" })
@Html.ValidationMessageFor(model => model.VerificacaoSeguranca)
<div>
<label>
Senha anterior:
@Html.PasswordFor(model => model.SenhaAnterior, new { @id = "txtSenhaAnterior" })
@Html.ValidationMessageFor(model => model.SenhaAnterior)
</label>
</div>
</div>
}
そして、スクリプト
//Even if try this, it still doesn't work
$('#formMSenha').validate({
rules: {
hdSeguranca: {
min: 4
}
},
messages: {
hdSeguranca: 'Your password lacks security. Try harder'
}
});
//Since this is a partial view, i have to parse the new added form so the validation rules apply
$.validator.unobtrusive.parse($("#formMSenha"));
//Minimum security level
$('#hdSeguranca').rules('add', { min: 4, messages: { min: 'Your password lack security. Try adding more numbers, letters ou symbols.'} });
更新前は新しい追加ルールが機能していましたが、現在は機能していません。新しいルールがバリデータによって解析されないか、認識されないかのようです。しかし、奇妙なのは、私がこれを行う場合です
('#formMSenha').validate({
rules: {
txtSenhaAnterior: {
min: 4
}
},
messages: {
hdSeguranca: 'New test'
}
});
$('#txtSenhaAnterior').rules('add', { min: 4, messages: { min: 'Newer teste'} });
検証が適用されます！理由はまったくわかりません。
編集
@Sparky で提案されているように、この PartialView (jquery ダイアログ) のレンダリングされた HTML を少し変更して表示しています。
<div id="msenhaContainer">
<form method="post" id="formMSenha" action="..." novalidate="novalidate"> <h2>
Atualize sua senha para uma senha complexa</h2>
<div id="campos">
<input type="hidden" value="0" name="VerificacaoSeguranca" id="hdSeguranca" data-val-required="The VerificacaoSeguranca field is required." data-val-number="The field VerificacaoSeguranca must be a number." data-val="true">
<div>
<label>
Senha anterior:
<input type="password" name="SenhaAnterior" id="txtSenhaAnterior" data-val-required="*Campo obrigat&#243;rio" data-val-remote-url="/Validator/ValidarSenhaAnterior" data-val-remote-additionalfields="*.SenhaAnterior,*.Usuario" data-val-remote="&#39;SenhaAnterior&#39; is invalid." data-val="true" class="input-validation-error">
<span data-valmsg-replace="true" data-valmsg-for="SenhaAnterior" class="field-validation-error"><span for="txtSenhaAnterior" class="">*Campo obrigatório</span></span>
</label>
</div>
<div>
<label>
Nova Senha: <input type="password" name="SenhaNova" maxlength="18" id="txtSenhaNova" data-val-required="*Campo obrigat&#243;rio" data-val="true" class="valid">
<span data-valmsg-replace="true" data-valmsg-for="SenhaNova" class="field-validation-valid"></span>
</label>
</div>
<div>
<label>
Nova Senha Confirmação: <input type="password" name="SenhaNovaConfirmacao" maxlength="18" id="txtSenhaNovaConf" data-val-required="*Campo obrigat&#243;rio" data-val-equalto-other="*.SenhaNova" data-val-equalto="As senhas n&#227;o s&#227;o as mesmas" data-val="true" class="valid">
<span data-valmsg-replace="true" data-valmsg-for="SenhaNovaConfirmacao" class="field-validation-valid"></span>
</label>
</div>
<br>
<label>
Força da Senha</label>
<div id="progressoSenha" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="6" aria-valuenow="2">
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: block; width: 33%; background: none repeat scroll 0% 0% rgb(209, 125, 14);"></div></div>
<span data-valmsg-replace="true" data-valmsg-for="VerificacaoSeguranca" class="field-validation-valid"></span>
<div style="text-align: center" id="descricaoForcaSenha">Fraca</div>
<a id="regrasSenha" href="#" title="Tooltip com as regras aqui!">Regras da senha complexa</a>
</div>
<input type="hidden" name="freebird" data-val-required="If i stay, will still remember me" id="freebird"></form></div>
<script type="text/javascript">
//Xhalent's function
(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
//use the normal unobstrusive.parse method
$.validator.unobtrusive.parse(selector);
//get the relevant form
var form = $(selector).first().closest('form');
//get the collections of unobstrusive validators, and jquery validators
//and compare the two
var unobtrusiveValidation = form.data('unobtrusiveValidation');
var validator = form.validate();
$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
if (validator.settings.rules[elname] == undefined) {
var args = {};
$.extend(args, elrules);
args.messages = unobtrusiveValidation.options.messages[elname];
//edit:use quoted strings for the name selector
$("[name='" + elname + "']").rules("add", args);
} else {
$.each(elrules, function (rulename, data) {
if (validator.settings.rules[elname][rulename] == undefined) {
var args = {};
args[rulename] = data;
args.messages = unobtrusiveValidation.options.messages[elname][rulename];
//edit:use quoted strings for the name selector
$("[name='" + elname + "']").rules("add", args);
}
});
}
});
}
})($);
//DOM ready
$(function () {
//Since this is a test, there's no reason to submit the form to the server
$.validator.setDefaults({
debug: true
});
//Trying to remove the validator to revalidate the form with the new added rule
$("#formMSenha").removeData("validator").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($("#formMSenha"));
$('#hdSeguranca').rules('add', { min: 4, messages: { min: 'Your password lacks security'} });
//Got this example on Xhalent's blog, but it didn't work either
// $.validator.unobtrusive.parseDynamicContent($('#hdSeguranca'));
$.validator.unobtrusive.parse($("#formMSenha"));
$('#progressoSenha').progressbar({ max: 6, value: 0 });
$('#txtSenhaNova').keyup(function () {
VerifyPasswordStrength($(this).val());
});
$('#regrasSenha').tooltip({ content: function () {
// var texto = $('<div style="display: inline" ></div>');
// texto.html('Regras da senha complexa:');
// texto.append("<ul>").append('<li>').append(
// $('<span>').html('Deve possuir pelo menos 6 caracteres')).insertAfter($('<li>').append('<span>').html('Deve ter ao menos um número')).
// insertAfter($('<li>').append('<span>').html('Deve ter ao menos um caractere especial. Ex:"! @ # $ % &" '));
// return texto;
var textoSenha = $('#descSenha').html();
return textoSenha;
}
});
$('#formMSenha').submit(function () {
$.ajax({
type: 'post',
url: '...',
data: $('#formMSenha').serialize(),
dataType: 'json',
success: function (data) {
$.growlUI('Sucesso', 'Sucesso', 'Flawlessly done!');
setTimeout(function () { window.location.replace('/') }, 2000);
}
});
return false;
});
}); //JQUERY END
function VerifyPasswordStrength(password) {
//Removed the security code, but what it does is validate the input
//to check if the user abide to the safety rules
//When everything is done, it assigns a value to the hidden var
//The mininum score required is 4. So if the user don't hit 4 points
//it can't let him proceed and submit the form
$('#hdSeguranca').val(passwordScore);
var progressbar = $("#progressoSenha");
var progressbarValue = progressbar.find(".ui-progressbar-value");
var cor = '#9c9999';
switch (judite) {
case 1:
cor = '#790f0f'; //red
break;
case 2:
cor = '#d17d0e'; //orange
break;
case 3:
cor = '#e1e40b'; //yellow
break;
case 4:
cor = '#129f0a'; //green
break;
case 5:
cor = '#0768c7'; //blue
break;
case 6:
cor = '#92dae8'; //brighter blue
break;
}
progressbarValue.css({ "background": '' + cor });
$('#progressoSenha').progressbar("option", "value", passwordScore);
$('#descricaoForcaSenha').html(desc[passwordScore]);
}
</script>