Combine deux fonctions javascript?

Question

Comment puis-je combiner ces deux fonctions afin qu'ils travaillent tous les deux? En ce moment, je peux seulement en obtenir un pour valider et pas l'autre.

EXEMPLE DE LA JAVASCRIPT:

function validateForm() { 

var x=document.forms["giftCert"]["gift_name"].value; 

if (x==null || x=="") { 

errMsg = "The recpient's name is required.";    
    $("div#emptyName").show(); 
    $("div#emptyName").html(errMsg); 

return false; 
    } 
} 

function validateForm() { 

var x=document.forms["giftCert"]["gift_email"].value; 

if (x==null || x=="") { 

errMsg2 = "The recpient's email address is required.";    
    $("div#emptyEmail").show(); 
    $("div#emptyEmail").html(errMsg2); 

return false; 
    } 
} 

version courte du HTML FORM:

<form action="http://ww6.aitsafe.com/cf/voucher.cfm" method="post" name="giftCert" onsubmit="return validateForm()" /> 
    *Name:<input type="text" name="gift_name"> 
    <div id="emptyName" class="error"></div> 

    *Email: <input type="text" name="gift_email"> 
    <div id="emptyEmail" class="error"></div> 

    <input class="button" type="submit" value="Add to Cart" /> 

</form> 

Answer 1

Vous pouvez mettre le code dans la même fonction.

function validateForm() { 
    return ["Name", "Email"].every(function(type) { 
     var lower_type = type.toLowerCase(), 
      x=document.forms["giftCert"]["gift_" + lower_type].value; 

     if (x==null || x=="") 
      $("div#empty" + type).show().html("The recpient's " + lower_type + " is required."); 
     else 
      return true; 
    }); 
} 

Étant donné qu'une grande partie du code est presque identique, vous pouvez mettre les valeurs "Name" et "Email" dans un tableau, et la boucle Array, invoquant le code identique, laissant tomber la valeur appropriée en cas de besoin.

Ceci utilise le Array.prototype.every pour indiquer si chaque valeur du tableau a été validée.

Si l'un des éléments échoue à la validation, il renvoie undefined, la boucle s'arrête et validateForm renvoie false.

Chaque élément qui réussit la validation renvoie true. Si tous les éléments passent la validation, .every retournera true et le formulaire produit.

---

Si vous voulez vous assurer que toutes les validations fonctionnent, vous pouvez utiliser .filter() et revenir true sur un échec, de sorte qu'il ajoutera un élément au tableau résultant. S'il n'y avait pas d'échecs, le tableau sera vide.

Ensuite, testez le .length du tableau et renvoyez une comparaison à 0.

function validateForm() { 
    return ["Name", "Email"].filter(function(type) { 
     var lower_type = type.toLowerCase(), 
      x=document.forms["giftCert"]["gift_" + lower_type].value; 

     if (x==null || x=="") { 
      $("div#empty" + type).show().html("The recpient's " + lower_type + " is required."); 
      return true; 
     } 
    }).length === 0; // will be true if no validation failures 
} 

Answer 2

faites-le appeler la deuxième fois terminé.

Ou d'avoir une 3ème fonction qui appelle les deux et avoir cela dans votre sous-menu. Cette fonction verra les valeurs de retour des deux fonctions et retournera vrai seulement si les deux retournent vrai.

Ou simplement mettre le code du second dans le premier, car il est de toute façon similaire. Vous pouvez également vous débarrasser de certains codes en double.

Answer 3

Lorsque vous réutilisez le même nom de fonction, chaque déclaration de fonction suivante remplace toutes les entrées précédentes. Il peut être plus simple de conserver vos validations dans des fonctions distinctes. Vous devez donc les nommer de manière appropriée et créer une fonction de pilote pour les appeler toutes. Exemple:

function validateForm() { 
    return validateName && validateEmail(); 
} 

function validateName() { 

    var x=document.forms["giftCert"]["gift_name"].value; 

    if (x==null || x=="") { 

    errMsg = "The recpient's name is required.";    
    $("div#emptyName").show(); 
    $("div#emptyName").html(errMsg); 

    return false; 
    } 

    return true; 
} 

function validateEmail() { 

    var x=document.forms["giftCert"]["gift_email"].value; 

    if (x==null || x=="") { 

    errMsg2 = "The recpient's email address is required.";    
    $("div#emptyEmail").show(); 
    $("div#emptyEmail").html(errMsg2); 

    return false; 
    } 

    return true; 
} 

De plus, vous pouvez simplement combiner les deux, mais cela est loin d'être aussi souple:

function validateForm() { 

    var name =document.forms["giftCert"]["gift_name"].value; 

    if (name == null || name == "") { 

    errMsg = "The recpient's name is required.";    
    $("div#emptyName").show(); 
    $("div#emptyName").html(errMsg); 

    return false; 
    } 

    var email = document.forms["giftCert"]["gift_email"].value; 

    if (email == null || email == "") { 

    errMsg2 = "The recpient's email address is required.";    
    $("div#emptyEmail").show(); 
    $("div#emptyEmail").html(errMsg2); 

    return false; 
    } 

    return true; 
} 

Answer 4

La réponse courte est juste ce faire

function validateForm() { 

var x=document.forms["giftCert"]["gift_name"].value; 

if (x==null || x=="") { 

    errMsg = "The recpient's name is required.";    
    $("div#emptyName").show(); 
    $("div#emptyName").html(errMsg); 

    return false; 
} 
x=document.forms["giftCert"]["gift_email"].value; 

if (x==null || x=="") { 

    errMsg2 = "The recpient's email address is required.";    
    $("div#emptyEmail").show(); 
    $("div#emptyEmail").html(errMsg2); 

    return false; 
    } 
} 

Plus réponse est vos fonctions doivent avoir des noms uniques. En outre, vous utilisez jquery dans une partie de votre code, pourquoi ne pas l'utiliser pour accéder à vos formulaires? En outre, il est généralement considéré comme une mauvaise pratique d'appeler vos fonctions à partir du HTML.

Answer 5

Une solution possible:

function validateForm() { 

    var x=document.forms["giftCert"]["gift_name"].value, 
     y = document.forms["giftCert"]["gift_email"].value, 
     error = false; 

    if (!x) { 
     errMsg = "The recpient's name is required.";    
     $("div#emptyName").html(errMsg).show(); 
     error = true; 
    } 

    if (!y) { 
     errMsg2 = "The recpient's email address is required.";    
     $("div#emptyEmail").html(errMsg2).show(); 
     error = true; 
    } 

    if (error === true) return false; 

}​ 

Answer 6

Pour ceux qui se demandent comment combiner deux fonctions en un seul, voici une fonction que j'ai créé pour ce faire:

function combineFunctions() { 
    var args = Array.prototype.slice.call(arguments, 0); 
    return function() { 
      for (var i = 0, len = args.length; i < len; i++) { 
       if (typeof args[i] === "function") { 
        args[i].apply(this, arguments); 
       } 
      } 
    }; 
} 

ensuite de combiner les fonctions:

var myFunc = function() { console.log('1'); }; 
var myOtherFunc = function() { console.log('2'); }; 

var myCombinedFunc = combineFunctions(myFunc, myOtherFunc); 
myCombinedFunc(); // outputs 1, then 2 to the console 

Note: Cela ne fonctionne que pour les fonctions avec les mêmes arguments - fonctionne très bien pour ajouter une fonction à un gestionnaire d'événements