validation du formulaire Javascript ne fonctionne que dans Firefox
https://stackoverflow.com/questions/2931356
-
05-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis relativement nouveau pour Javascript, donc j'espère que c'est une simple erreur. Je la construction d'une fonction de validation de formulaire générique qui est appelé onSubmit du formulaire. La fonction boucle à travers tous les éléments de l'enfant de la forme, cherche certaines classes, et analyse le contenu des champs appropriés. Si elle trouve quelque chose manquant ou erroné, il affiche le div message d'erreur approprié et renvoie false, empêchant ainsi la forme d'être soumis à la page php.
Il fonctionne bien dans Firefox 3.6.3, mais dans tous les autres navigateurs que j'ai testé (Safari 4.0.4, Chrome 4.1, IE8), il semble ignorer la onSubmit et sauter directement à la page de traitement php.
HTML CODE:
<form name='myForm' id='myForm' action='process_form.php' method='post' onSubmit="return validateRequired('myForm')">
<fieldset class="required radioset">
<label for='selection1'>
<input type='radio' name='selection' id='selection1' value='1'/>
Option 1
</label>
<label for='selection2'>
<input type='radio' name='selection' id='selection2' value='2'/>
Option 2
</label>
<label for='selection3'>
<input type='radio' name='selection' id='selection3' value='3'/>
Option 3
</label>
<label for='selection4'>
<input type='radio' name='selection' id='selection4' value='4'/>
Option 4
</label>
<div class='errorBox' style='visibility:hidden'>
Please make a selection
</div>
</fieldset>
<fieldset class="required checkset">
<label>
Choice 1
<input type='checkbox' name='choices' id='choice1' value='1'/>
</label>
<label>
Choice 2
<input type='checkbox' name='choices' id='choice2' value='2'/>
</label>
<label>
Choice 3
<input type='checkbox' name='choices' id='choice3' value='3'/>
</label>
<label>
Choice 4
<input type='checkbox' name='choices' id='choice4' value='4'/>
</label>
<div class='errorBox' style='visibility:hidden'>
Please choose at least one
</div>
</fieldset>
<fieldset class="required textfield" >
<label for='textinput1'>
Required Text:
<input type='text' name='textinput1' id='textinput1' size='40'/>
</label>
<div class='errorBox' style='visibility:hidden'>
Please enter some text
</div>
</fieldset>
<fieldset class="required email textfield">
<label for='email'>
Required Email:
<input type='text' name='email' id='email' size='40'/>
</label>
<div class='errorBox' style='visibility:hidden'>
The email address you have entered is invalid
</div>
</fieldset>
<div>
<input type='submit' value='submit'>
<input type='reset' value='reset'>
</div>
</form>
CODE JAVASCRIPT:
function validateRequired(id){
var form = document.getElementById(id);
var errors = 0;
var returnVal = true;
for(i = 0; i < form.elements.length; i++){
var elem = form.elements[i];
if(hasClass(elem,"required")){
/*RADIO BUTTON or CHECK BOX SET*/
if(hasClass(elem,"radioset") || hasClass(elem,"checkset")){
var inputs = elem.getElementsByTagName("input");
var check = false;
for(j = 0; j < inputs.length; j++){
if(inputs[j].checked){
check = true;
}
}
if(check == false){
errors += 1;
showError(elem);
} else {
hideError(elem);
}
}
/*TEXT FIELD*/
else if(hasClass(elem,"textfield")){
var input = elem.getElementsByTagName("input");
if(input[0].value == ""){
errors += 1;
showError(elem);
} else {
hideError(elem);
/*EMAIL ADDRESS*/
if(hasClass(elem,"email")){
if(isValidEmail(input[0].value) == false){
errors += 1;
showError(elem);
} else {
hideError(elem);
}
}
}
}
}
}
if(errors > 0){
returnVal = false;
} else {
returnVal = true;
}
return returnVal;}
Je sais que cela est beaucoup de code à regarder, mais toute aide serait appréciée. Comme il fonctionne très bien dans un navigateur, je ne suis pas sûr de savoir comment démarrer le débogage. Merci Andrew
La solution
for(i = 0; i < form.elements.length; i++){
var elem = form.elements[i];
if(hasClass(elem,"required")){
Le problème est que votre required et d'autres classes sont mis sur l'élément <fieldset>.
éléments Fieldset sont inclus dans la collection form.elements sur IE, Firefox et Opera, mais pas WebKit navigateurs (Chrome, Safari). Ce sont ces navigateurs où votre formulaire ne parvient pour moi.
Il a toujours été une bizarrerie étrange que <fieldset> a été inclus dans la collection elements. DOM niveau 2 HTML spec indique que « les éléments de commande de forme » ne devrait être présente dans la collection, et de la définition de HTML4 qui ne semble pas inclure fieldsets, qui n'ont pas le nom de contrôle ou de la valeur.
Vous pourriez peut-être changer votre code pour utiliser getElementsByTagName pour ramasser les fieldsets à la place:
var fieldsets= form.getElementsByTagName('fieldset');
for (var i= 0; i<fieldsets.length; i++) {
var elem= fieldsets[i];
Autres conseils
Je n'utiliserais pas hasClass. Voici une autre façon d'essayer que le travail pourrait mieux pour vous:
var node_list = document.getElementsByTagName('input');
for (var i = 0; i < node_list.length; i++) {
var node = node_list[i];
if (node.getAttribute('type') == 'text') {
// do something here with a <input type="text" .../>
alert(node.value);
}
}
Je sais que IE a des problèmes pour obtenir les classes de certains éléments qui ont plusieurs classes qui leur sont associés. Peu importe, c'est une fonction pratique.
Si vous avez une sorte d'erreur JavaScript, la fonction ne retournera pas faux, et donc le comportement par défaut de soumettre les données sera déclenchée.
Essayez de lancer votre code à [ http://www.javascriptlint.com/online_lint php] [1] d'abord, puis un débogueur.
essayez de ne pas utiliser si (erreurs> 0) ... juste dans toutes les conditions (pour mauvaise entrée) mis faux de retour; et de mettre revenir à la fin avant la dernière tranche vrai; et une meilleure utilisation:
onSubmit="return validateRequired(this)"
et il n'y a pas besoin dans ces lignes (au cas où vous supprimez les erreurs var)
var form = document.getElementById(id);
var errors = 0;
var returnVal = true;
pas la cause de votre problème, je suis sûr, mais il est préférable de ne pas servir un ensemble de boutons radio sans un d'entre eux choisis.
Dans votre cas, si vous savez que vous définissez un quand vous servez la page, vous n'avez pas besoin d'un chèque « nécessaire »; il n'y a aucun moyen l'utilisateur peut obtenir les boutons radio dans un état où il ne sont sélectionnés. Choisissez un défaut sensible, il fait la première option, et le faire sélectionné. Simplifiez votre vie:)
Du W3C:
http://www.w3.org/TR/html401 /interact/forms.html#radio
Si aucun bouton radio dans un partage de jeu le même nom de contrôle est d'abord « On », le comportement de l'agent utilisateur pour choisir dont le contrôle est d'abord « sur » est indéfini. Remarque. depuis existante implémentations gérer ce cas autrement, la spécification actuelle diffère de la RFC 1866 ([RFC1866] section 8.1.2.4), dans lequel:
At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially.Depuis diffère du comportement de l'agent utilisateur, les auteurs doivent veiller à ce que dans chaque ensemble des boutons radio que l'on est d'abord "On".
Retour à la base pour une seconde: Vous dites que « semble ignorer la onsubmit ». Cela laisse trois possibilités que je peux penser:
- Votre fonction est jamais appelée
- Il est appelé, et bombarde à mi-chemin à travers en raison d'une erreur
- Il est appelé, et ne fait pas ce que vous pensez qu'il est, toujours vrai retour
Il est pas clair de votre question est, donc si je vous je commencerais débogage cela en mettant une alerte au début de la fonction pour voir si IE de l'appeler du tout - puis passer cette alerte vers le bas et exécuter la validation à nouveau, et de voir (toute erreur doit être au-dessus de ce point) où il cesse de paraître.
Je voudrais aussi d'indiquer au valeur de retour du lieu il a été appelé, pour voir ce qui revenait. S'il est toujours vrai, alors votre code fonctionne mais ne pas faire ce que vous pensez.
A partir de là, vous avez au moins une compréhension plus claire de ce qui se passe, sinon un bloc de code exacte à scrutait.
