Bonjour,
Je suis débutante en HTML CSS. Je suis en train de finaliser un formulaire d'insciption mais j'ai un problème quand vient le moment de valider. Quand on appuie sur le bouton "Je participe" cela confirme notre présence malgré qu'aucun champs obligatoires soit rempli.
Comment faire pour empêcher la validation du formulaire quand les champs obligatoires ne sont pas remplis ?
<form id="surveyform">
<input type="text" id="name" placeholder= "Nom" required>
<input type= "email" id="email" placeholder= "Email"
pattern=".+@globex/.com" required>
<input type="number" id="test" placeholder= "Téléphone" required>
<input id="societe" placeholder= "Société" required>
<p>Choissisez une date :
<select id="date" name="date" required>
<option value ="18mars">18 mars</option>
<option value ="18mars">18 mars</option>
<option value ="18mars">18 mars</option>
</select>
</p>
<p> Vous acceptez de recevoir des invitations à nos prochains événements </p>
<label for ="j'accepte">J'accepte</label>
<input type= "radio" id = "j'accepte" name = "conditions" value="j'accepte" required>
<br/>
<label for ="je refuse">Je refuse</label>
<input type= "radio" style= "vertical-align:middle" id = "je refuse" name = "conditions" class="checkbox" value="j'accepte">
<button type= "confirm" formnovalidate> <a href= "confirmation.html">Je participe<a> </button>
</form>
6 réponses
Hello :) alors pour enregistrer la présence tu passes par PHP ou JS? Tu peux montrer le code back qui enregistre la présence?
Bonjour,
il manque le name à tes input
un id ne comporte aucun espace ni de caractère spéciale
tes inputs "conditions" ont le même value
number pour le téléphone ? plutot un text sinon le 0 et le + sauteront
Hello sans passer par du JS tu ne pourras pas le faire vue la maniere dont tu veux valider ton formulaire avec un lien dans le button.
Tu place un href dans ton button ca va forcément allez sur cette page sans JS pour bloqué la redirection et ton formulaire t'es control de champs seront totalement skip.
Ton formnovalidate empeche le control des champs required aussi, donc si tu souhaites qu'il soit required enleve l'attribut mais bon comme dit au dessus sans JS tu ne pourras de tte façon pas bloquer ton formulaire avec le lien dans le button.
L'autre solution est celle de popotte et de passer par du php, mais vue que tu débute, je penses que tu n'as ni encore appris le JS ni le PHP.
Sinon sémantiquement parlant tu ne dois pas placer un select dans un eleme <p> à la rigeur <div> mais <p> oublie, le mieux reste de placer un label a ton select et d'entourer le tout d'un div et ou de placer un </br> avant le label pour ton retour ligne.
Ta balise <a> n'est pas fermé correctement aussi.
Je le re dit aussi même si Carouge la fait ne met pas d'espace a tes attributs
Y'a de bon tuto pour apprendre sur ce site je te conseillerai d'aller les visionner pour continuer ton apprentissage ce qui te permettera de finir la validation de ton formulaire.
Ah oui je viens de voir plus en détail le code, et le formulaire n'est pas vraiment utilisé comme il faut, déjà le boutton ne doit pas contenir de balise <a>, c'est un simple boutton type="submit", le formualire doit avoir un champ action="/inscription", et en cliquant sur le bouton ça va rediriger vers l'adresse action du formulaire 127.0.0.1:8000/inscripiton ^^'
Ce serait trop compliqué d'expliquer par simple écris tout le fonctionnement de PHP de validation etc... Il faudrait suivre le cours PHP, ou bien il faudrait quelqu'un pour expliquer en visio comment faire la mise en place :p
le champ "action" n'est pas nécessaire. S'il n'est pas défini, cela redirige vers la même page
En théorie ça fonctionne, en pratique c'est mieux de passer par une autre route, plus clean :p
Bon en vrai je suis trop habitué aux frameworks c'est devenu automatique le fait d'utilise une action="{{ route('post.store') }}" ^^'