Comment appeler deux fonctions sur la soumission d'un formulaire

Vous avez plusieurs façons d'aborder cette, la méthode la plus simple pour votre jeu actuel serait:

fonction combinée

Le suivant sera exécuté à la fois les fonctions de n'importe quel état est retourné à chaque fois, parce qu'ils ne sont pas exécutées en tant que partie intégrante d'une expression logique qui "court-circuit" lors de l'obtention d'une valeur false:

function validateForm(){
  var validation = true;
  validation &= validateUserName();
  validation &= validatePassword();
  return validation;
}

Et puis dans votre formulaire de balisage:

<form onsubmit="return validateForm()">

Si serait probablement judicieux, dans le souci de faire plus de code réutilisable, pour modifier vos fonctions de validation afin qu'ils acceptent un form argument. Cela signifie que vous pourriez faire ce qui suit:

<form onsubmit="return validateForm(this);">

.. et votre fonction de réception procédez de la manière suivante:

function validateForm(form){
  var validation = true;
  validation &= validateUserName(form);
  validation &= validatePassword(form);
  return validation;
}

ajouter plusieurs événements

Vous pourriez également mettre en œuvre ce par le moyen préféré de l'application des écouteurs d'événement, qui est d'utiliser addEventListener au lieu de l'attribut html onsubmit:

///wait for window load readiness
window.addEventListener('load', function(){
  ///you could improve the way you target your form, this is just a quick eg.
  var form;
  form = document.getElementsByTagName('form')[0];
  form.addEventListener('submit', validateUserName);
  form.addEventListener('submit', validatePassword);
});

Ci-dessus suppose que c'est nécessaire pour soutenir les navigateurs modernes. Si vous souhaitez prendre en charge les anciennes versions d'internet explorer, vous seriez mieux de faire une fonction à appliquer à votre cas de manipulation électronique.g:

function addEventListener( elm, evname, callback ){
  if ( elm.addEventListener ) {
    elm.addEventListener(evname, callback);
  }
  else if ( elm.attachEvent ) {
    elm.attachEvent('on'+evname, callback);
  }
}

Cette deuxième option, il est plus difficile d'exercer un contrôle global sur ce qui est validé, où, quand et dans quel ordre, donc, je vous recommande la première option. Cependant, je voudrais vous recommandons également au moins l'application de votre singulier submit gestionnaire à l'aide de la méthode JavaScript ci-dessus, plutôt que d'utiliser onsubmit="".

OriginalL'auteur Pebbl

Il existe quelques approches. L'une est de créer une fonction, telle que submitForm() qui appelle ensuite vos deux autres fonctions. Peut-être l'utilisation de ces appels de fonction dans le cadre de if états à fournir la validation côté client.

L'autre méthode consiste à remplacer la valeur par défaut de soumettre la fonctionnalité de la forme, et au lieu d'appeler les fonctions que vous voyez l'ajustement. jQuery fournit une approche facile pour cela. Jetez un oeil à http://api.jquery.com/submit/ pour plus d'informations.

Idéalement, le validateUser() et validatePassword() fonctions seraient fusionnés en une fonction validateUser(). Vous souhaiterez peut-être fournir le code de vos fonctions actuelles pour obtenir des conseils sur la façon de le faire, si vous êtes coincé...

Espère que cela aide 🙂

OriginalL'auteur lukeocom

Créer une fonction à appeler tous les validateurs:

function validate() {
return validateUserName() && validatePassword();
}

HTML

<form name="NewUser" onsubmit="return validate()" action="">

Également votre mot de passe de validation en fonction de vous référer à incorrecte nom du champ.

Code fixe: http://jsfiddle.net/6sB29/

Si vous souhaitez alerter toutes les erreurs (pas seulement la première), vous pouvez essayer quelque chose comme cela:

function validate() {
var name = validateUserName(),
pass = validatePassword();   
return name && pass;
}

http://jsfiddle.net/6sB29/1/

OriginalL'auteur dfsq