Validation simple des formulaires. Orienté objet

Question

Énoncé du problème : Il est nécessaire pour moi d'écrire un code, si qui avant l'envoi du formulaire va vérifier tous les champs nécessaires sont remplis. Si tous les champs ne sont pas remplis, il est nécessaire d'attribuer leur couleur rouge et de ne pas envoyer le formulaire.

Maintenant le code existe dans ce genre :

function formsubmit(formName, reqFieldArr){     
    var curForm = new formObj(formName, reqFieldArr);
    if(curForm.valid)
        curForm.send();
    else
        curForm.paint();    
}

function formObj(formName, reqFieldArr){
    var filledCount = 0;
    var fieldArr = new Array();
    for(i=reqFieldArr.length-1; i>=0; i--){
        fieldArr[i] = new fieldObj(formName, reqFieldArr[i]);
        if(fieldArr[i].filled == true)
        filledCount++;
    }

    if(filledCount == fieldArr.length)
        this.valid = true;
    else
        this.valid = false;

    this.paint = function(){
        for(i=fieldArr.length-1; i>=0; i--){
            if(fieldArr[i].filled == false)
                fieldArr[i].paintInRed();
            else
                fieldArr[i].unPaintInRed();
        }
    }

    this.send = function(){
        document.forms[formName].submit();
    }
}

function fieldObj(formName, fName){
    var curField = document.forms[formName].elements[fName];

    if(curField.value != '')
        this.filled = true;
    else
        this.filled = false;

    this.paintInRed = function(){
        curField.addClassName('red');
    }

    this.unPaintInRed = function(){
        curField.removeClassName('red');
    }
}

La fonction est provoquée de cette manière :

<input type="button" onClick="formsubmit('orderform', ['name', 'post', 'payer', 'recipient', 'good'])"  value="send" />

Maintenant le code fonctionne. Mais je voudrais ajouter " dynamisme " en elle.

Qu'il me soit nécessaire : de garder un code initial essentiellement, d'ajouter des champs de formulaire d'écoute (uniquement nécessaires au remplissage).

Par exemple, lorsque le champ est attribué par la couleur rouge et que l'utilisateur commence à le remplir, il doit devenir blanc.

En fait j'ai besoin d'ajouter l'écoute des événements : onChange, blur pour les champs vides du formulaire. Comme il faut faire dans les limites d'un code initial.

Si tout mon code - plein de bêtises, faites-le moi savoir. Quant à moi il à changer en utilisant orienté vers l'objet l'approche.

---

Donnez-moi pur Solution par Javascript, s'il vous plaît. Jquery - excellente librairie, mais elle n'est pas approche pour moi.

Answer 1

Pour garder votre HTML propre, je suggère une stratégie légèrement différente.

1. Utilisez un framework comme jQuery qui simplifie beaucoup de choses.

2. Déplacez tout le code dans un script externe.

3. Utilisez l'événement body.onLoad pour rechercher tous les formulaires et installer le code de vérification.

4. Au lieu de coder en dur les valeurs des champs, ajoutez une classe css à chaque champ qui est obligatoire :

   <input type="text" ... class="textField required" ...>

   Notez que vous pouvez avoir plus d'une seule classe.

Lorsque le formulaire est soumis, examinez tous les champs et vérifiez que tous ceux qui ont la classe required sont non vides. S'ils sont vides, ajoutez la classe error sinon, supprimez cette classe. Pensez également à ajouter une info-bulle indiquant "Le champ est obligatoire" ou, mieux encore, ajoutez ce texte à côté du champ pour que l'utilisateur puisse voir d'un seul coup d'œil ce qui ne va pas.

Dans la feuille de style CSS, vous pouvez ensuite définir une règle pour l'affichage des erreurs.

Pour le reste de la fonctionnalité, consultez le site web de la Commission européenne. Documents de jQuery sur les événements de formulaire .

Answer 2

A fait.

function formsubmit(formName, reqFieldArr){     
    var curForm = new formObj(formName, reqFieldArr);
    if(curForm.valid)
        curForm.send();
    else{
        curForm.paint();    
        curForm.listen();
    }
}

function formObj(formName, reqFieldArr){
    var filledCount = 0;
    var fieldArr = new Array();
    for(i=reqFieldArr.length-1; i>=0; i--){
        fieldArr[i] = new fieldObj(formName, reqFieldArr[i]);
        if(fieldArr[i].filled == true)
        filledCount++;
    }

    if(filledCount == fieldArr.length)
        this.valid = true;
    else
        this.valid = false;

    this.paint = function(){
        for(i=fieldArr.length-1; i>=0; i--){
            if(fieldArr[i].filled == false)
                fieldArr[i].paintInRed();
            else
                fieldArr[i].unPaintInRed();
        }
    }

    this.send = function(){
        document.forms[formName].submit();
    }

    this.listen = function(){
        for(i=fieldArr.length-1; i>=0; i--){
            fieldArr[i].fieldListen();
        }
    }
}

function fieldObj(formName, fName){
    var curField = document.forms[formName].elements[fName];

    this.filled = getValueBool();

    this.paintInRed = function(){
        curField.addClassName('red');
    }

    this.unPaintInRed = function(){
        curField.removeClassName('red');
    }

    this.fieldListen = function(){
        curField.onkeyup = function(){
            if(curField.value != ''){ 
                curField.removeClassName('red');
            }
            else{
                curField.addClassName('red');
            }
        }
    }

    function getValueBool(){
        if(curField.value != '')
            return true;
        else
            return false;
    }
}

Ce code n'est pas agréable pour moi, mais il fonctionne aussi je ne pouvais pas l'améliorer sans le réécrire complètement.

Answer 3

JQuery ajoute beaucoup d'avantages pour une faible surcharge. Il dispose d'un plugin de validation qui est très populaire. Il existe également d'autres solutions, mais j'ai trouvé que jQuery était le meilleur.

Avantages

• petite taille de téléchargement
• support intégré pour les différents navigateurs
• une communauté dynamique de plug-ins
• productivité améliorée
• une expérience utilisateur améliorée