Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2330 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Validation formulaire avec la touche Entrée [Résolu]

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Validation formulaire avec la touche Entrée [Résolu]

n°2424161
atumlousti​c
Posté le 12-08-2022 à 16:19:53  profilanswer
 

Bonjour,  
 
Je tente un truc depuis deux jours sans succès. J'écoute un événement en Javascript, celui dans mon input email de keypress (j'ai aussi essayé avec keydown, et keyup mais celui-ci ne semble pas efficient pour ce que je veux faire), afin de saisir par son keycode la touche Entrée, de la basculer en e.preventDefault, de simuler via cette touche un click sur mon bouton qui soumet le formulaire, grâce à des console.log, je sais que la simulation fonctionne, or le formulaire ne veut pas se transmettre. Tout ce que j'ai pu trouver jusque lors sur le net ne sait pas montrer opérant. Je précise que lorsque le bouton est cliqué manuellement, le formulaire est bien transmis.
 
Je poste un extrait de mon code :  
 
/*Fonction pour envoyer les données en méthode post, et récupérer un id
  de commande généré par le back, et le placer dans l'url de la page commande*/
const order = () => {
 
    if (/* Mes constantes pour les regex*/valueFirstName && valueLastName && valueAddress && valueCity && valueEmail) {
       
      orderSofa = JSON.parse(localStorage.getItem('sofaElements'))
      productOrder = []
 
      orderSofa.forEach((sofa) => {
        productOrder.push(sofa._id)
      })
 
      const customerInformation = {
        contact : {
          firstName : valueFirstName,
          lastName : valueLastName,
          address : valueAddress,
          city : valueCity,
          email : valueEmail
        },
        products : productOrder
      }
 
      fetch('http://localhost:3000/api/products/order', {
        method : 'POST',
        headers : {
        'Content-Type' : 'application/json'
        },
        body : JSON.stringify(customerInformation)
        })
        .then((resolve) => resolve.json())
        .then((promise) => {
        let responseServer = promise
 
      const orderDatas = {
        contact : responseServer.contact,
        orderId : responseServer.orderId,
        products : responseServer.products
      }
 
      if (orderProducts == null) {
        orderProducts = []
        orderProducts.push(orderDatas)
        localStorage.setItem('orderDatas', JSON.stringify(orderDatas))
      }
      else if (orderProducts != null) {
        orderProducts.push(orderDatas)
        localStorage.setItem('orderDatas', JSON.stringify(orderDatas))
      }
        localStorage.removeItem('sofaElements')
        return location.href = 'confirmation.html?id=' + responseServer.orderId
    })
  }
}
 
document.body.addEventListener('keypress', (e) => {
 
  if (e.keyCode === '13') {// && valueFirstName && valueLastName && valueAddress && valueCity && valueEmail) {
    e.preventDefault()
    let keyEnterSubmit = document.querySelector('#order')
    keyEnterSubmit.click()
  }
})
 
//// Appel de la fonction order()////
 
let orderButton = document.querySelector('.cart__order__form')
 
  orderButton.addEventListener('submit', () => {
    order()
})


Message édité par atumloustic le 13-08-2022 à 16:48:58
mood
Publicité
Posté le 12-08-2022 à 16:19:53  profilanswer
 

n°2424165
rat de com​bat
attention rongeur méchant!
Posté le 12-08-2022 à 16:31:04  profilanswer
 

Pour info, le code se met entre balises pour qu'il soit plus lisible.

Code :
  1. code ici

n°2424166
atumlousti​c
Posté le 12-08-2022 à 16:32:34  profilanswer
 

Je note, mais où se trouvent-elles ?


Message édité par atumloustic le 12-08-2022 à 16:33:49
n°2424168
atumlousti​c
Posté le 12-08-2022 à 16:37:25  profilanswer
 

Code :
  1. /*Fonction pour envoyer les données en méthode post, et récupérer un id
  2.   de commande généré par le back, et le placer dans l'url de la page commande*/
  3. const order = () => {
  4.     if (/* Mes constantes pour les regex*/valueFirstName && valueLastName && valueAddress && valueCity && valueEmail) {
  5.      
  6.       orderSofa = JSON.parse(localStorage.getItem('sofaElements'))
  7.       productOrder = []
  8.       orderSofa.forEach((sofa) => {
  9.         productOrder.push(sofa._id)
  10.       })
  11.       const customerInformation = {
  12.         contact : {
  13.           firstName : valueFirstName,
  14.           lastName : valueLastName,
  15.           address : valueAddress,
  16.           city : valueCity,
  17.           email : valueEmail
  18.         },
  19.         products : productOrder
  20.       }
  21.       fetch('http://localhost:3000/api/products/order', {
  22.         method : 'POST',
  23.         headers : {
  24.         'Content-Type' : 'application/json'
  25.         },
  26.         body : JSON.stringify(customerInformation)
  27.         })
  28.         .then((resolve) => resolve.json())
  29.         .then((promise) => {
  30.         let responseServer = promise
  31.       const orderDatas = {
  32.         contact : responseServer.contact,
  33.         orderId : responseServer.orderId,
  34.         products : responseServer.products
  35.       }
  36.       if (orderProducts == null) {
  37.         orderProducts = []
  38.         orderProducts.push(orderDatas)
  39.         localStorage.setItem('orderDatas', JSON.stringify(orderDatas))
  40.       }
  41.       else if (orderProducts != null) {
  42.         orderProducts.push(orderDatas)
  43.         localStorage.setItem('orderDatas', JSON.stringify(orderDatas))
  44.       }
  45.         localStorage.removeItem('sofaElements')
  46.         return location.href = 'confirmation.html?id=' + responseServer.orderId
  47.     })
  48.   }
  49. }
  50. document.body.addEventListener('keypress', (e) => {
  51.   if (e.keyCode === '13') {// && valueFirstName && valueLastName && valueAddress && valueCity && valueEmail) {
  52.     e.preventDefault()
  53.     let keyEnterSubmit = document.querySelector('#order')
  54.     keyEnterSubmit.click()
  55.   }
  56. })
  57. //// Appel de la fonction order()////
  58. let orderButton = document.querySelector('.cart__order__form')
  59.   orderButton.addEventListener('submit', () => {
  60.     order()
  61. })


n°2424240
atumlousti​c
Posté le 13-08-2022 à 16:44:19  profilanswer
 

Pour ceux et celles qui pourraient se trouver dans un problème similaire, il a été pour mon cas, simplement dû que ma regex email vérifiait les inscriptions de champ, non pas sur l'événement input, mais sur celui de la sortie du focus, soit le 'blur'.
 
Merci moi

n°2424323
gelatine_v​elue
Posté le 16-08-2022 à 14:30:49  profilanswer
 

La maniere propre de se rattacher a la validation dún formulaire avec la touche entree est de mettre une fonction sur le submit du form, par ex (onSubmit) ="validationForm" (en angular (ngSubmit)="onSubmit()" )
 
Le navigateur va nativement essayer de soumettre le formulaire avec la touche entree. Si c'est pas le cas c'est que le html du formulaire est pas correct (par ex les champs input sont pas dans un <form> ).

n°2424622
gatsu35
Blablaté par Harko
Posté le 21-08-2022 à 12:45:20  profilanswer
 

et il faut au moins 1 bouton de type submit


---------------
Blablaté par Harko

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Validation formulaire avec la touche Entrée [Résolu]

 

Sujets relatifs
Afficher un bouton "envoyer" après validation reCAPTCHAProblème reception mail depuis un formulaire (OVH)
Comment afficher une image provenant d'un formulaire type "radio"Site one page, bootstrap 4 et validation PHP
Devenir développeur Web (formation) : quels sont les tests d'entrée ?[RÉSOLU]Problème de traitement d'un formulaire
Erreur code Formulaire de saisie excelPowerShell Changement de nom de poste avec une entrée clavier
Pb javascript et formulaire avec validation par touche entréevalidation d'un formulaire ajax via la touche "entrée"
Plus de sujets relatifs à : Validation formulaire avec la touche Entrée [Résolu]


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR