Sito di supporto al Framework CMS

Controllare i campi di input nelle form di acquisizione

L'obbligatorietà o la discrezionalità (e anche la visibilità) relativa a ciascun campo di input di una form di sezione di tipo Tabelle utente - Acquisizione avviene in fase di configurazione della sezione.

E' comunque possibile controllare in modo più flessibile gli input aggiungendo del codice javascript alla pagina.
Il codice va incollato nella scheda Javascript della Pagina (Pannello di Controllo CMS --> Pagina --> Modifica).

Nell'esempio che andremo a presentare siamo in presenza di 3 campi.

Il primo è una lista a discesa (Mansioni, fld1) che contiene le mansioni nell'ambito di una società
(DIRIGENTE, IMPIEGATO, SEGRETARIA, OPERAIO, ALTRO).

Il secondo (fld2) è un campo necessario alla definizione alternativa della mansione qualora il primo campo selezionato sia ALTRO. In fase di configurazione della sezione definirlo come non obbligatorio.

Il terzo (fld3) è un generico campo che prende il focus uscendo da fld1 con un valore diverso da ALTRO)

Di seguito il codice.

$(document).ready(function() {

    // Bind sul cambiamento della mansione
    $("#fld1").bind("change", function() {
        enableDisableRoleOther();
    });

    // Assegna la classe necessaria al validatore al secondo campo
    $("#fld2").removeClass("").addClass("input-type-text {validate: {required: function(){return roleIsOther()} }}");
});


// Funzione del validatore
function roleIsOther() {
    return $("#fld1").val() == "ALT";
}


// Abilita o disabilita l'input nel campo altro aggiungendo alla label la classe di obbligatorietà
function enableDisableRoleOther() {
    var $roleContainer = $("#fld2").closest("div.ow-container");
    if ($("#fld1").val() == "ALT") {

        // Mette il simbolo di obbligatorietà campo alla label
        $("label:first", $($roleContainer)).addClass("validation-required");

        $("#fld2").removeAttr("disabled").val("").focus();

    } else {

        // Rimuove il simbolo di obbligatorietà campo alla label
        $("label:first.validation-required", $($roleContainer)).removeClass("validation-required");

        // Nega la modifica del campo e sbianca il campo
        $("#fld2").removeClass("validation-highlight").attr("disabled", "disabled").val("");

        // Elimina eventuali segnalazioni precedenti dell'obbligatorietà del campo altro
        $("label.validation-error-label", $($roleContainer)).remove();

        // Focus sul terzo campo
        $("#fld3").focus();
    }
}

E' ovviamente possibile effettuare al codice tutte le variazioni che si ritengono necessarie.

Torna all'elenco