11550 sujets

JavaScript, DOM et API Web HTML5

Comment vérifier les nombres ici ?

Bonjour

Voilà je coince avec cet exo et j'ai besoin de votre éclairage.

Ecrire un formulaire qui contient deux champs, min et max qui correspondent à une fourchette de prix. Quand le bouton submit est pressé le formulaire est envoyé à la page http://vente.com/...en mode POST
Ecrire le formulaire ainsi que le code javascript de validation qui doit :
- vérifier que min et max sont bien des nombres
- vérifier que min est inférieur à max
- en cas de problème afficher un alert expliquant ce qu'il faut corriger

Je commence :
<html>
	<head>
		<script src="exos.js" type="text/javascript"></script>
		<script type="text/javascript">
			function returnverif() {
				var min = ParseInt(document.getElementById(min).value);
				var max = ParseInt(document.getElementById(max).value);
			}
		</script>
		<title>Prix</title>
	</head>
	<body>
		<h1>Prix</h1>
		<form action="http://vente.com/page.php" method="POST" onsubmit="returnverif()">
			<label for="min">Minimum</label>
			<input type="text" name="min" id="min"/><br/>
			<label for="max">Maximum</label>
			<input type="text" name="max" id="max"/>
		</form>
	</body>
</html>

Modifié par mactor (14 Apr 2012 - 17:50)
Modérateur
Salut,

Il y a simplement un souci de syntaxe

la variable min n'est pas déclarée Smiley cligne 


//...
var Nombre=ParseInt(document.getElementById(Min).value);
//...


Attention :

On submit="returnverif()"
//...
function verif Nombre () {
//...


Par ailleurs, merci de te conformer à la charte du forum.
Modifié par niuxe (12 Apr 2012 - 22:43)
je poursuis, est ce bon ?

function verif_form() {
    var min = document.getElementById('Min').value;
    var max = document.getElementById('Max').value;
    if(isNaN(min) || isNaN(max)) {
        alert("Veuillez entrer des nombres.");
        return false;
    } else if(min > max) {
        alert("Min est plus grand que Max.");
        return false;
    } else {
        return true;
    }
}

Modifié par mactor (13 Apr 2012 - 18:01)
Mon problème c'est pour ça : une modif du code initial pour vérifier le formulaire.
Lorsque l'une des deux valeurs n'est pas un entier, le champ est encadré en rouge
et si la valeur est correcte, donc c'est un entier, le cadre rouge n'apparait pas.

J'aimerais utiliser les fonctions du DOM pour faire cela Smiley eek
Modérateur
Ca lu,

T'es pas loin. Je te mets sur la voie :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>bla</title>
    <style type="text/css">
        .error{border:1px solid red;}
    </style>
</head>
<body>

    <form action="http://www.alsacreations.com" method="POST" id="verifPrixMinMax">
        <fieldset>
            <legend>verif prix min/max</legend>
            <ul>
                <li><label for="min">Minimum</label><input type="text" name="min" id="min"/></li>
                <li><label for="max">Maximum</label><input type="text" name="max" id="max"/></li>
                <li><input type="submit" name="vasy" value="vas-y" /></li>
            </ul>
        </fieldset>
    </form>
    <script type="text/javascript">
        window.onload = function(){
            var verifPrixMinMax = document.getElementById('verifPrixMinMax');
            verifPrixMinMax.onsubmit = function(){
                var min = document.getElementById('min');
                var max = document.getElementById('max');
                
                //enleve la bordure rouge si l'utilisateur soumet le formulaire pour la deuxième fois
                min.setAttribute('class','');
                max.setAttribute('class','');
                

                //vérif du formulaire
                var valeurMin = parseInt(min.value);
                var valeurMax = parseInt(max.value);
                
                
                if(isNaN(min) || min > max) {
                    min.setAttribute('class','error');
                    return false;
                } else if(isNaN(max)) {                    
                    max.setAttribute('class','error');
                    return false;
                } else {
                    return true;
                }                
            }
        }
    </script>
</body>
</html>


Dans ton code je ne vois pas le submit.

En ce qui concerne le parcours du dom, je t'invite à lire ou à relire le tuto de Koala64.
Modifié par niuxe (13 Apr 2012 - 23:28)
Merci pour ton aide, je l'analyse ligne par ligne, ca va m'aider...
Par contre j'imaginais que le champs serait en rouge si la valeur n'était pas un entier
.erreur 
{
  border-color:red;   
}


ou rajouter le submit ? J'ai bossé sur cet exo trouvé dans un livre et j'ai pas su quoi faire...
J'ai tellement bossé dessus que je ne vois plus rien, je suis dans le brouillard

Merci pour le tuto mais je ne vois pas trop ou il parle du DOM Smiley ohwell

La fin de l'exo, c'est :

Modifiez votre code pour que les messages d'erreur soient affichés dans la page (dans des div ou des span) et non par un alert. Il faudra trois zones de message d'erreur : une pour chaque zone de texte(quand une valeur non numérique a été saisie) et une pour le message global(quand les deux valeurs ne sont pas dans le bon ordre) Smiley bawling
Modifié par mactor (13 Apr 2012 - 23:59)
Modérateur
De mémoire le tuto de Koala répond en partie à tes attentes.

Sinon, regarde ce lien aussi. Il devrait t'aider également :
http://www.nyamsprod.com/tutorial-dom-00.html

Sinon pour répondre à ta question :
mactor a écrit :

Modifiez votre code pour que les messages d'erreur soient affichés dans la page (dans des div ou des span) et non par un alert. Il faudra trois zones de message d'erreur : une pour chaque zone de texte(quand une valeur non numérique a été saisie) et une pour le message global(quand les deux valeurs ne sont pas dans le bon ordre) Smiley bawling


Tu as le choix. Une methode simple mais loin d'être la meilleur :
- saisir dans le html des noeuds :

<li><label for="min">Minimum</label><input type="text" name="min" id="min"/><span class="txtError">error</span></li>

- le masquer en css et faire aparaitre en JS. nextSibling devrait t'aider Smiley cligne selfhtml

2e méthode nettement mieux mais plus délicate à mettre en oeuvre. C'est l'utilisation de createElement, createTextNode, appendChild, etc.
Modifié par niuxe (14 Apr 2012 - 00:38)
merci pour ton aide Smiley smile
je vais chercher cela dès demain et utiliser la méthode du DOM, le parcours d'arbre....

C'est un monde le développement web !
Modifié par mactor (14 Apr 2012 - 00:43)
Modérateur
J'ai réédité ma réponse au dessus.

Tu as répondu pendant que j'étais en train de rééditer ma réponse.

Au passage, c'est un très bon apprentissage d'aborder le JS avant un framework tel que Jquery ou Dojo ou Mootools. Smiley cligne
Modifié par niuxe (14 Apr 2012 - 01:02)
que de la m...
je suis vraiment mauvais, je perçois le parcours qu'il me reste à faire.
Ce n'est pas une mince affaire le developpement web, parfois cela me paraît plus dur que les maths. Purée faut être un génie !
Modérateur
Séance psycho....

Ton message donne une attitude de looser ! Smiley eek
a écrit :

face à la roche, l'eau l'emporte toujours, non par la force mais par la persévérance.


Une autre Maxime (qui c'est ça Maxime XD) :
a écrit :

Il ne faut pas regarder le haut de la montagne, il suivre de suivre le sentier et un voyage de mille lieues commence par un pas !


Tu fais bien d'apprendre la base !
il y a pas longtemps j'ai eu une petite expérience perso. Sur un projet, j'ai la maintenance de ce dernier. Mais interdiction d'utiliser un framework. Donc tout en natif. Sur ce projet, il y a une base très solide et rajouter un framework serait superflu.


Pour revenir à ton souci, ecris moi/nous en Français les étapes de la vérification du formulaire. ex :
1. soummision du formulaire
2. suppression du message d'erreur dans le cas où (au fait dans quel cas ?) Smiley cligne
3.etc.

Il est conseillé de coucher sur papier la logique du script. Vient ensuite le script en lui même. (Est ce que tu as saisie ce que je t'ai écrit en amont du sujet ? (le script))
Modifié par niuxe (15 Apr 2012 - 11:37)
Sujet clos
Aller à