▶ClientValidate () avec plusieurs groupes de validation - comment afficher plusieurs résumés simultanément?
ASP.NET 2.0. Disons que j'ai deux groupes de validation valGrpOne et valGrpTwo; et deux résumés de validation valSummOne et valSummTwo; La raison de la rupture des sections est purement esthétique. Un bouton d'envoi qui déclenche la validation sur les deux groupes.
Maintenant, je veux déclencher la validation côté client ET je veux que les DEUX résumés de validation s'affichent en même temps;
J'ai donc mis en place une fonction Javascript qui est appelée sur btnSubmit, et à l'intérieur de cette fonction j'appelle Page_ClientValidate("valGrpOne") et Page_ClientValidate("valGrpTwo") successivement; Le problème est qu'un seul récapitulatif s'affiche à la fois (mais je veux vraiment que les deux s'affichent!)
Avez-vous des idées sur la façon d'afficher simultanément les deux résumés de validation, à partir du code côté client?
Très similaire à la question suivante, qui répond côté serveur. Déclencher plusieurs groupes de validation avec un seul bouton?
D'accord, la réponse n'était donc pas simple. Il semble que le comportement par défaut de la validation côté client consiste à n'afficher que le dernier groupe/résumé qui vient d'être validé. Mais un peu de tweking Javascript m'a donné une réponse acceptable.
N'hésitez pas à proposer des améliorations.
<script type="text/javascript" language="javascript">
/* Manual client-side validation of Validator Groups */
function fnJSOnFormSubmit() {
var isGrpOneValid = Page_ClientValidate("valGrpOne");
var isGrpTwoValid = Page_ClientValidate("valGrpTwo");
var i;
for (i = 0; i < Page_Validators.length; i++) {
ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
}
//display all summaries.
for (i = 0; i < Page_ValidationSummaries.length; i++) {
summary = Page_ValidationSummaries[i];
//does this summary need to be displayed?
if (fnJSDisplaySummary(summary.validationGroup)) {
summary.style.display = ""; //"none"; "inline";
}
}
if (isGrpOneValid && isGrpTwoValid)
return true; //postback only when BOTH validations pass.
else
return false;
}
/* determines if a Validation Summary for a given group needs to display */
function fnJSDisplaySummary(valGrp) {
var rtnVal = false;
for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].validationGroup == valGrp) {
if (!Page_Validators[i].isvalid) { //at least one is not valid.
rtnVal = true;
break; //exit for-loop, we are done.
}
}
}
return rtnVal;
}
</script>
Voici une autre méthode simple et générique de validation par rapport à plusieurs groupes.
// Page_ClientValidate only shows errors from the last validation group.
// This method allows showing for multiple groups
function Page_ClientValidateMultiple(groups) {
var invalidIdxs = [];
var result = true;
// run validation from each group and remember failures
for (var g = 0; g < groups.length; g++) {
result = Page_ClientValidate(groups[g]) && result;
for (var v = 0; v < Page_Validators.length; v++)
if (!Page_Validators[v].isvalid)
invalidIdxs.Push(v);
}
// re-show any failures
for (var i = 0; i < invalidIdxs.length; i++) {
ValidatorValidate(Page_Validators[invalidIdxs[i]]);
}
// return false if any of the groups failed
return result;
};
Non entièrement testé:
/* Manual client-side validation of Validator Groups - Remix */
function PageValidate() {
var PageIsValid = true;
for (var validator in Page_Validators) {
ValidatorValidate(validator);
PageIsValid = PageIsValid && validator.isvalid;
}
if (PageIsValid) {
return true; //postback only when ALL validations pass.
}
else {
return false;
}
}
/* This also does something similar */
function PageValidate() {
return Page_ClientValidate();
}
<b>Lets Say here is u r link button</b>
<asp:LinkButton ID="lnkbtnSubmit" runat="server" OnClientClick="return fnJSOnFormSubmit();" meta:resourcekey="lnkbtnSubmitResource1">Submit</asp:LinkButton>
<b> And u r Script is</b>
<script type="text/javascript">
function confirmAction() {
var retVal = confirm("Are you sure want to continue ?");
if (retVal == true) {
return true;
}
else {
return false;
}
}
function fnJSOnFormSubmit() {
var isGrpOneValid = Page_ClientValidate("updateuser");
var isGrpTwoValid = Page_ClientValidate("BaseKey");
var i;
for (i = 0; i < Page_Validators.length; i++) {
ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
}
isGrpOneValid = Page_ClientValidate("updateuser");
isGrpTwoValid = Page_ClientValidate("BaseKey");
i =0;
for (i = 0; i < Page_Validators.length; i++) {
ValidatorValidate(Page_Validators[i]); //this forces validation in all groups
}
if (isGrpOneValid && isGrpTwoValid)
return true; //postback only when BOTH validations pass.
else
return false;
}
/* determines if a Validation Summary for a given group needs to display */
function fnJSDisplaySummary(valGrp) {
var rtnVal = false;
for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].validationGroup == valGrp) {
if (!Page_Validators[i].isvalid) { //at least one is not valid.
rtnVal = true;
break; //exit for-loop, we are done.
}
}
}
return rtnVal;
}
</script>
c'est une extension du code utile de joedotnot. C'est probablement exagéré pour la majorité des utilisateurs d'asp.net, mais cela a aidé à un projet où différentes combinaisons de groupes de validation devaient être appliquées lors de la soumission, selon les boutons sélectionnés.
var validationManager = function () {
// Manual client-side validation of Validator Groups
// an empty string('') is default - to validate controls without a validation group
var valGroups = [''],
returnObj = { //define methods
set: function (/*string argument list*/) {
valGroups = Array.prototype.slice.call(arguments);
return returnObj;
},
add: function (/*string argument list*/) {
var i;
for (i = 0; i < arguments.length; i++) {
if (valGroups.indexOf(arguments[i]) === -1) {
valGroups.Push(arguments[i]);
}
}
return returnObj;
},
remove: function (/*string argument list*/) {
var i = 0, n = 0;
for (i = 0; i < arguments.length; i++) {
var n = valGroups.indexOf(arguments[i]);
if (n > -1) valGroups.splice(n, 1);
}
return returnObj;
},
validate: function () {
var i = 0,
summariesToDisplay = [];
for (; i < valGroups.length; i++) {
if (!Page_ClientValidate(valGroups[i])) { //this will display the contents of the validator
summariesToDisplay.Push(valGroups[i]);
}
}
if (!summariesToDisplay.length) { return true; }
for (i = 0; i < Page_ValidationSummaries.length; i++) { //make relevant summaries visible
if (summariesToDisplay.indexOf(Page_ValidationSummaries[i].validationGroup || '') > -1) {
Page_ValidationSummaries[i].style.display = "inline"; //"none"; "inline";
}
}
return false;
}
};
if (arguments.length > 0) {
returnObj.set.apply(null, arguments);
}
return returnObj;
}
puis dans les différents gestionnaires d'événements:
//set up a global object
var validateOnSubmit = validationManager('','BMIvalGrp');
//within a radio click handler
validateOnSubmit.add('weightValGrp','ageValGrp')
.remove('BMIvalGrp');
//added to submit button handlers
validateOnSubmit.validate();
Ici, c'est simple, un exemple très simple:
Ayez la méthode javascript ci-dessous dans votre en-tête de page: -
<script type="text/javascript" language="javascript">
function ShowModalDialog4Validations() {
var x = $find("modalPopupExtenderValidations");
Page_ClientValidate("vgValidations");
if (!Page_IsValid)
x.show();
}
modalPopupExtenderValidations est l'ID de la fenêtre contextuelle modale. vgValidations est l'ID du groupe de validation.
Maintenant, dans la méthode de pré-rendu de page, ajoutez l'attribut onclick à votre bouton sur lequel vous souhaitez que la validation se produise.
protected void Page_PreRender(object sender, EventArgs e)
{
btnMyButton.Attributes.Add("onclick", "ShowModalDialog4Validations();");
}
J'espère que c'est facile à comprendre.
Au revoir.