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

Validation formulaire avec la touche Entrée [Résolu] - Javascript/Node.js - Programmation

Marsh Posté le 12-08-2022 à 16:19:53    

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
Reply

Marsh Posté le 12-08-2022 à 16:19:53   

Reply

Marsh Posté le 12-08-2022 à 16:31:04    

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

Code :
  1. code ici

Reply

Marsh Posté le 12-08-2022 à 16:32:34    

Je note, mais où se trouvent-elles ?


Message édité par atumloustic le 12-08-2022 à 16:33:49
Reply

Marsh Posté le 12-08-2022 à 16:37:25    

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. })


Reply

Marsh Posté le 13-08-2022 à 16:44:19    

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

Reply

Marsh Posté le 16-08-2022 à 14:30:49    

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> ).

Reply

Marsh Posté le 21-08-2022 à 12:45:20    

et il faut au moins 1 bouton de type submit


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed