11522 sujets

JavaScript, DOM et API Web HTML5

[Résolu] HTML5 : activer required sur un champs de formulaire

Bonjour
j'ai mis en place un formulaire en HTML5 en jouant sur les required etc pour éviter de faire des validations en Javascript. Mais je pense que là, je ne vais pas m'en sortir sans :
j'ai besoin de rendre un champs obligatoire si le champs précédent n'est pas vide.
Dans mon exemple, j'ai un champs "prénom" et "date de naissance"
et si le prénom est saisi, je veux forcer que la date de naissance soit saisie.
Pourriez vous m'aider sur la façon de mettre cela en place, si possible AVANT enregistrement ?
merci de votre aide
Modifié par jp.bond (09 May 2018 - 19:06)
Modérateur
mon validateur...

Tu as un exemple de ce que tu cherches à faire dans mon js exemple (à partir de la ligne 90) .

Je t'avoue ne pas avoir le temps en ce moment pour faire des exemples / démos de ma librairie. J'ai juste balancé mon code sur github.

Bien que je dois revoir quelques aspects, la lib fonctionne bien.
Modifié par niuxe (09 May 2018 - 20:16)
ok j'ai trouvé une méthode qui pour moi est plus simple : 


		$(document).ready(function(){

			//Si on relâche la touche, on verifie si le champs est vide
			$('input[name="prenom"]').keyup(function(){
				//Si le champs n'est pas vide, on rend l'age obligatoire
				if($.trim($('input[name="prenom"]').val()).length > 0)
				{
				  $('input[name="age"]').attr('required', true);
				} 
				else 
				{
				  $('input[name="age"]').removeAttr('required');
				}
			})

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>sans titre</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style type="text/css">
		label { display: inline-block; width: 8rem; text-align: right; }
	</style>
</head>
<body>
<form id="form1">
  <div>
    <label>Nom</label>
    <input name="nom" />
  </div>
  <div>
    <label>Prénom</label>
    <input name="prenom" />
  </div>
  <div>
    <label>Age</label>
    <input type="number" name="age" max="99" min="18" disabled />
  </div>
  <div>
    <label>&nbsp;</label>
    <input type="submit" />
  </div>
</form>
<script type="text/javascript">
'use strict';
const form1 = document.getElementById('form1');
form1.elements.prenom.addEventListener('change', function(event) {
  event.preventDefault();
  const prenomOk = this.value.trim().length > 0;
  form1.elements.age.disabled = !prenomOk;
  form1.elements.age.required = prenomOk;
});
</script>
</body>
</html>

JQuery est inutile.
L'évenement "onChange" me semble plus approprié
Modifié par bazooka07 (09 May 2018 - 23:59)
Modérateur
bazooka07 a écrit :

JQuery est inutile.

Dans l'absolue, oui. Mais s'il a jQuery installé pour autre chose.....

bazooka07 a écrit :

L'évenement "onChange" me semble plus approprié


Chaque fois que le champ a un changement ou une touche tapée (keyup), il regarde le DOM et test la valeur du champ.

C'est du n'importe quoi Smiley eek . "BLur" est plus adapté pour un champ number, text, etc. afin d'éviter un problème performance.

À noter que ton code HTML est un peu juste....
Modifié par niuxe (10 May 2018 - 13:53)
Modérateur
jp.bond a écrit :
et du coup, tu pronerais quoi comme code au final ?


Si je me réfère à ma librairie et en utilisant le bon event : 

<form action="monAction" methode="post" class="formToValidate">
    <div class="input text">
        <label for="monChampText">un champ</label>
        <input type="text" id="monChampText" name="monChampText" class="require" data-validationrules="notempty" data-errornotempty="Ne doit pas être vide">
    </div>
    <div class="input text">
        <label for="MonAutreChamp">un autre champ</label>
        <input type="text" id="MonAutreChamp" name="MonAutreChamp" data-validationrules="notempty" data-errornotempty="Ne doit pas être vide">
    </div>
    <div class="input submit">
        <button type="submit">envoyer</button>
    </div>
</form>



window.addEventListener('DOMContentLoaded', ()=>{
    let validate = new Validator({
        "mode" : "html",
    })
    validate.form();

    document.getElementById('monChampText').addEventListener("blur", (e)=>{
        if(e.target.value.trim() !== ''){
            validate.addRequireField(document.getElementById('MonAutreChamp'));
        }else{
            validate.removeRequireField(document.getElementById('MonAutreChamp'));
        }
    });
});

Modifié par niuxe (11 May 2018 - 23:45)
Sujet clos
Aller à