Javascript Girl
  1. Javascript Girl
  3. Comment empêcher de soumettre si les entrées sont vides avec javascript
Intereting Posts
JavaScript Object.create – héritage des propriétés imbriquées Est-il vraiment impossible d'exposer le prototype d'un élément html dans IE (<8)? Possibilité d'ignorer Impossible de lire la propriété '0' de indéfinie? Vérifier la collision entre certaines divs? Comment passer de la valeur de php à javascript Comment commencer à apprendre Ajax? Comment cloner le noeud dans l'arbre UI angulaire? Ng-click ne lance pas dans AngularJS alors que onclick ne fonctionne La longueur du tableau retourne 0 Pourquoi l'acquisition de Backbone Collection ne retourne-t-elle pas une promesse? GRID extensible (ExtJS) à l'aide de PHP + MySQL Comment vérifier si un plugin jQuery UI est attaché à un élément? Alternatives à eval () pour plusieurs objets imbriqués Comment ajouter un tableau PHP à un tableau JS dans Highcharts Javascript getters / setters dans IE?

Comment empêcher de soumettre si les entrées sont vides avec javascript

J'ai un formulaire de connexion, mais je veux vérifier si les champs sont vides, puis ne pas soumettre. J'ai fait «renvoyer des faux» sur soumettre mais le navigateur charge toujours une nouvelle page. Comment puis-je arrêter cela?

JS: 

var username = document.getElementById('usernameField'); var password = document.getElementById('passwordField'); var loginBtn = document.getElementById('loginBtn'); var infoBox = document.getElementById('formInfo'); var isEmpty = /^\s*$/; var addEventTo = function(id, type, fn, capture) { if (document.addEventListener) { id.addEventListener(type, fn, capture); } else { id.attachEvent('on'+type, fn); } }; function checkIfAllEmpty() { var loginForm = document.getElementById('loginform'), allInputs = loginForm.getElementsByTagName('input'), max = allInputs.length, i; for (i = 0; i < max; i++) { if (allInputs[i].type !== 'submit') { if (allInputs[i].match(isEmpty)) { infoBox.innerHTML = 'All your fields are empty'; return false; } } } } //addEventTo(loginBtn, 'click', checkIfAllEmpty, false); if (document.addEventListener) { loginBtn.addEventListener('submit', checkIfAllEmpty, false); } else { loginBtn.attachEvent('onsubmit', checkIfAllEmpty); }

HTML: 

 <p id="formInfo"></p> <form id="loginForm" method="post" action="#"> <fieldset id="loginFieldset"> <legend>Sign in</legend> <ol> <li> <label for="usernameField">Username</label><input type="text" placeholder="Enter username" id="usernameField" /> <span>Please type in your username</span> </li> <li> <label for="passwordField">Password</label><input type="password" placeholder="Enter password" id="passwordField" /> <span>Please type your password</span> </li> <li> <input type="submit" value="Sign in" id="loginBtn" /> </li> </ol> </fieldset> </form>

Merci beaucoup

Si cela va bien avec html5 (fonctionne bien avec les versions plus récentes de Safari, Chrome, Firefox, Opera> 11.00 mais pas d'IE comme d'habitude), vous pouvez ajouter la balise requise dans votre champ de saisie. 

 <p id="formInfo"></p> <form id="loginForm" method="post" action="#"> <fieldset id="loginFieldset"> <legend>Sign in</legend> <ol> <li> <label for="usernameField">Username</label> <input type="text" placeholder="Enter username" id="usernameField" required /> <span>Please type in your username</span> </li> <li> <label for="passwordField">Password</label> <input type="password" placeholder="Enter password" id="passwordField" required /> <span>Please type your password</span> </li> <li> <input type="submit" value="Sign in" id="loginBtn" /> </li> </ol> </fieldset>

On dirait que l'auditeur d'événement de l'onsubmit ne soit pas ajouté correctement. De toutes façons, la façon la plus simple de le faire est d'ajouter onsubmit = "renvoyer certains ValidationFuncThatReturnTrueOrFalse ()" dans votre formulaire: 

 <form id="loginForm" method="post" action="#" onsubmit="return validate()">

Puis-je vous demander pourquoi vous utilisez cette approche sur votre code js? Cela pourrait être fait très facilement si votre formulaire est statique … 

 function validate() { if (document.getElementById("usernameField").value == "" && document.getElementById("usernameField").value == "") { alert("all fields are empty"); return false; } else { return true; } }

ou quelque chose comme ça …

Vous pouvez utiliser l'attribut disabled = "disabled" pour les entrées de formulaire:

http://www.w3schools.com/tags/att_input_disabled.asp

Définissez le bouton de soumission comme désactivé, puis ajoutez un écouteur de change à chaque champ de saisie de sorte que si chaque champ est rempli, vous supprimez l'attribut de désactivation et l'utilisateur peut sous-traiter le formulaire.

J'utilise Prototype (en tant que javascript framework) et ce code devrait fonctionner:

Js: 

 function checkEmpties() { var usr = $('username'); var pass = $('pass'); var frm = $('formId'); if (usr.value && pass.value) { //frm.submit(); alert('submit'); } else { alert('failed'); } } Event.observe(window, 'DomReady', function() { var btn = $('submitBtn'); Event.observe('submitBtn', 'click', checkEmpties); }

Html: 

 <form id="formId"> <input type="text" name="username" id="username" /> <input type="password" name="pass" id="pass" /> <input type="button" id="submitBtn" value="Send" /> </form>

Ce qu'il fait: Une fois que le document a chargé, attache un observateur d'événement au bouton, alors quand il est cliqué sur la fonction checkEmpties s'appelle. Cette fonction récupère la valeur des entrées et, si elles ne sont pas vides, soumettez le formulaire.

J'espère que cela aide