Validation de formulaire avec JavaScript

-1

J'essaie de valider l'entrée de formulaire, mais ma validation ne fonctionne pas.
La chaîne doit avoir au moins une lettre ou un chiffre,
un nombre entier doit être compris entre 0 et 11 et doit sélectionner au moins un fruit.
Mais même si je ne saisis aucune entrée,
il suffit d'aller dans le fichier input_ok.html.
Il doit faire apparaître la fenêtre d'erreur.Validation de formulaire avec JavaScript

Voici mon code:

function validateInput() { 
    var str = myForm.inputString.value; 
    var nbrStr = myForm.inputInteger.value; 
    var nbr = parseInt(nbrStr); 
    var fruit = myForm.fruit.value; 
    if (str != "" && nbrStr != "" && fruit != "" && !isNaN(nbr) && nbr < 11) { 
     return true; 
    } else { 
     var msg = ""; 
     var strError = false; 
     if (str == "") { 
      msg += "\nPlease enter a string with at least one letter or digit"; 
      strError = true; 
     } 
     if (nbrStr == "") { 
      msg += "\nPlease enter an integer in the range 0-11"; 
     } else if (isNaN(nbr)) { 
      msg += "\nPlease enter an integer"; 
     } else if (nbr > 11) { 
      msg += "\nPlease enter an integer less than 11"; 
     } 
     if (strError) { 
      myForm.inputString.focus(); 
     } else { 
      myForm.inputInteger.focus(); 
     } 
     alert(msg); 
    } 
    return false; 
}

<body> 
    <h1>Week 08, Exercise 01</h1> 
    <form action="week08_01servlet" 
      method="post" 
      name="myForm" 
      onsubmit="return validateInput();"> 
     <p>Please enter the following information, 
     and then click the submit button.</p> 
     <p class="indent">A string with at least one letter or digit 
      <input type="text" name="inputString"> 
      <br>An integer in the range 0-11 
      <input type="text" name="inputInteger"> 
      <br>Pick a fruit <select name="fruit"> 
       <option value="---">--- 
       <option value="apple">apple 
       <option value="banana">banana 
       <option value="cherry">cherry 
       <option value="pear">pear 
      </select></p> 
     <p><input type="submit" value="Submit"></p> 
     <input type="hidden" name="command" value="do_it"> 
    </form> 
</body>

Source

2010-12-05 kamweshi

Assurez-vous de valider également toutes les entrées de formulaire ** côté serveur **. Il est possible pour quelqu'un de contourner la validation Javascript. –

À moins que vos règles de validation ne soient particulièrement complexes, je vous recommande d'utiliser une bibliothèque de validation javascript préconstruite plutôt que de rouler la vôtre. Il y en a plein de bonnes (je préfère http://bassistance.de/jquery-plugins/jquery-plugin-validation/ mais il y a beaucoup d'autres libs, toutes deux basées sur un framework tel que jQuery et des libs autonomes). Le faire vous-même vous cause tout simplement un travail inutile, et vous avez encore toute votre validation côté serveur pour écrire aussi (Vous vous souvenez des choses côté serveur, non?) – GordonM

Fonctionne ici dans Chrome, plage également '0-11 ', au moins pour moi, comprend' 11'. –

Ceci est clairement devoirs, mais je beleave chaque question deservers une réponse. Xhtml5 valide, javascript vérifié avec jslint et compressé avec ajaxmin. Prendre plaisir.

De même, vous pouvez lire les pages Web Introduction to Forms.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Week 08, Exercise 01</title> 
    <link rel="stylesheet" href="Week08_01.css"> 
    <script> 
    function validateInput(c){var f=c.inputString.value,d=c.inputInteger.value,b=parseInt(d,10),g=c.fruit.value;if(f!==""&&d!==""&&g!==""&&!isNaN(b)&&b>=0&&b<11)return true;else{var a="",e=false;if(f===""){a+="\nPlease enter a string with at least one letter or digit";e=true}if(d==="")a+="\nPlease enter an integer in the range 0-11";else if(isNaN(b))a+="\nPlease enter an integer";else if(b<=0)a+="\nPlease enter a positive integer";else if(b>11)a+="\nPlease enter an integer less than 11";if(e)c.inputString.focus();else c.inputInteger.focus();alert(a);return false}} 
    </script> 
</head> 
<body> 
    <h1>Week 08, Exercise 01</h1> 
    <form action="week08_01servlet" 
     method="post" 
     name="myForm" 
     onsubmit="return validateInput(this);"> 
     <p>Please enter the following information, 
     and then click the submit button.</p> 
     <p class="indent">A string with at least one letter or digit 
      <input type="text" name="inputString" /> 
      <br>An integer in the range 0-11 
      <input type="text" name="inputInteger" /> 
      <br />Pick a fruit <select name="fruit"> 
       <option value="---">---</option> 
       <option value="apple">apple</option> 
       <option value="banana">banana</option> 
       <option value="cherry">cherry</option> 
       <option value="pear">pear</option> 
      </select></p> 
     <p><input type="submit" value="Submit"> 
     <input type="hidden" name="command" value="do_it"></p> 
    </form> 
</body> 
</html>

Source

2010-12-05 13:31:23

Merci beaucoup, ça marche maintenant. – kamweshi

En règle générale, pour les questions de devoirs sur Stack Overflow, au lieu de faire le travail pour eux, vous devez donner des indices ou diriger l'OP vers la bonne réponse. Si vous fournissez des extraits de code comme celui-ci, fournissez une explication sur le fonctionnement de votre code. Le PO n'apprend rien si ce code a simplement été copié-collé dans son ensemble. –

@In silico: Je suis d'accord avec vous, mais je suis sûr que n'importe quel enseignant verra le contenu de mon tag de script comme hautement suspicieux. –

Répondre

Questions connexes