Ajouter JavaScript personnalisé à un formulaire
L’enregistrement d’étape de formulaires de base et de formulaires à plusieurs étapes contient un champ nommé JavaScript personnalisé qui peut être utilisé pour enregistrer du code JavaScript vous permettant d’étendre ou modifier la visualisation ou la fonctionnalité du formulaire.
Le bloc JavaScript personnalisé sera ajouté au bas de la page juste avant la fermeture de l’élément de balise de formulaire.
Champs de formulaire
L’ID d’entrée HTML d’un champ de table est défini sur le nom logique de l’attribut. La sélection d’un champ, la définition des valeurs et autres manipulations côté client sont facilitées avec jQuery.
$(document).ready(function() {
$("#address1_stateorprovince").val("Saskatchewan");
});
Important
L’ajout d’une colonne de choix au formulaire piloté par modèle à utiliser dans une étape de formulaire à plusieurs étapes ou un formulaire de base apparaîtra sur la page web en tant que contrôle serveur déroulant. L’utilisation de JavaScript personnalisé pour ajouter des valeurs supplémentaires au contrôle entraînera un message "argument de publication ou de rappel non valide" sur la soumission de la page.
Validation supplémentaire des champs côté client
Parfois vous devrez peut-être personnaliser la validation des champs du formulaire. Cet exemple force l’utilisateur à spécifier une adresse électronique uniquement si l’autre champ de « méthode de contact privilégiée » est défini sur Courrier électronique.
Note
La validation de champ côté client n’est pas prise en charge dans une sous-grille.
if (window.jQuery) {
(function ($) {
$(document).ready(function () {
if (typeof (Page_Validators) == 'undefined') return;
// Create new validator
var newValidator = document.createElement('span');
newValidator.style.display = "none";
newValidator.id = "emailaddress1Validator";
newValidator.controltovalidate = "emailaddress1";
newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript:scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email is a required field.</a>";
newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
newValidator.initialvalue = "";
newValidator.evaluationfunction = function () {
var contactMethod = $("#preferredcontactmethodcode").val();
if (contactMethod != 2) return true; // check if contact method is not 'Email'.
// only require email address if preferred contact method is email.
var value = $("#emailaddress1").val();
if (value == null || value == "") {
return false;
} else {
return true;
}
};
// Add the new validator to the page validators array:
Page_Validators.push(newValidator);
});
}(window.jQuery));
}
Validation générale
Le fait de cliquer sur le bouton Suivant/Envoyer exécute une fonction nommée entityFormClientValidate. Vous pouvez étendre cette méthode pour ajouter une logique de validation personnalisée.
if (window.jQuery) {
(function ($) {
if (typeof (entityFormClientValidate) != 'undefined') {
var originalValidationFunction = entityFormClientValidate;
if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
entityFormClientValidate = function() {
originalValidationFunction.apply(this, arguments);
// do your custom validation here
// return false; // to prevent the form submit you need to return false
// end custom validation.
return true;
};
}
}
}(window.jQuery));
}