检查输入表单需要点击两次才能验证

Question

我需要在我的按钮上单击两次以验证我的表单，

我有一个这样的事件监听器：

btnCartSend.addEventListener('click', function(){
checkInput();
window.location="confirm.html "
})

然后调用

   function checkInput(){
 if (fristName.length == 0){
    alert("test 1");
 }else if(lastName.length == 0){
    alert("test 2");
 }else if(address.length == 0){
    alert("test 3");
 }else if(zip.length != 5){
    alert("test 4");
 }else if(city.length == 0){    
    alert("test 5");
 }else if(email.length == 0){
    alert("test 6");
 }else {    
    console.log('send to api'); 
    sendToApi();
 }
}

我将整个项目放在了我的 github 上，这里有包含功能和其他功能的购物车文件：https://github.com/lliolla/P5-onorico/blob/master/frontend/js/cart.js

Answer 1

我克隆了您的项目，发现您在各处都使用了shoppingCart.length 而shoppingCart 最初为null 时发现了一些遗漏，因此无论您在何处使用length 或任何其他属性，请首先检查该变量是否为null。

解决所有这些问题后，我运行了代码，只需单击一下即可验证表单。

检查您的代码或将cart.js 替换为我在某些地方已更正的以下代码。

//déclaration des variables
let shoppingCart = JSON.parse(localStorage.getItem('shoppingCart'));  // recuperer le panier convertit en javascript
console.log('shoppingCart',shoppingCart)
let orderInfos = JSON.parse(localStorage.getItem('orderInfos'));  // recuperer le retour API convertit en javascript
console.log('orderInfos',orderInfos)

let form =document.getElementById("form") // formulaire
let btnCartSend =document.getElementById("btnCartSend") // bouton envoi

let tableCartRows = document.getElementById("tableCartRows")// corps du tableau
let tableFoot = document.getElementById("tableFoot")//pied du tableau
let table=document.getElementById("table") // tableau entier
let tableTitle=document.getElementById("tableTitle") // h2

let orderModal = document.getElementById('orderModal')// modal de confirmation de commande

//variables info clients a vérifier
let fristName = document.getElementById("inputFristName").value;
let lastName= document.getElementById("inputLastName").value;
let address = document.getElementById("inputAddress").value;
let zip = document.getElementById("inputZip").value;
let city = document.getElementById("inputCity").value;
let email = document.getElementById("InputMail").value;



function showCart(){
//au chargement de la page génerer dynamiquement le panier si shoppingcart est plein sinon on affiche panier vide avec bouton de retour a teddiesHome.html
        if (shoppingCart && shoppingCart.length <= 0) {
            // on masque le cart le formulaire et son bouton et on affiche un retour à la page des produits
            tableTitle.style.display = "none";
            tableCart.style.display = "none";
            form.style.display = "none";
            btnCartSend.style.display = "none";

            let h2 = document.createElement("h2");
            table.appendChild(h2);
            h2.textContent ="Votre panier est vide ";
            let p = document.createElement("p");
            table.appendChild(p);
            p.textContent ="Faites un petit tour dans nos boutiques et laissez-vous tenter";

            var a = document.createElement("a");
            p.appendChild(a);
            a.setAttribute('class','btn btn-secondary btn-lg btn-block');
            a.setAttribute('href','teddiesHome.html');
            a.setAttribute('role','button');
            a.textContent = "Continuer mes achats";

            }else{
                
            totalCartPrice ();// total price du panier
            //verifier si il y a des doublons
            if(shoppingCart) {
                createTableCart();  //sinon afficher le panie
            }
        }
}
showCart()

 function delateItemCart(index){
    //supprimer un teddy en fonction de son index dans teddyArray
    console.log ("suprimer le teddy dans shopping cart",index, shoppingCart[index])
    shoppingCart.splice(index,1)
    console.log ("suprimer le teddy dans shopping cart", shoppingCart)
    //vide le localstorage
    localStorage.clear();
    //mettre à jour le local storage avec nouveau panier
     localStorage.setItem('shoppingCart',JSON.stringify(shoppingCart) ) ;
    totalCartPrice ();
     // recharger la page
     document.location.reload();
//}

 }

// on fait une boucle pour acceder à tous les boutons supprimer
 let bntDelated = document.querySelectorAll('.bntDelated') //boutons supprimer
 for (i=0 ;i<bntDelated.length ; i++ ){
    console.log("bntDelated", bntDelated[i])

    bntDelated[i].addEventListener("click", function(){ // au clic sur sup on suprimer le teddy coorepondant dans le shopping cart
            let index = Array.from(bntDelated).indexOf(event.target) ;

            console.log("click pour suprimer envoi l'index, ",index)
            delateItemCart(index);
            })
 }




// au clic sur le btn envoyer la commande
btnCartSend.addEventListener('click', function(){
    checkInput();// on verifie le format des input
    sendToApi(); // on envoi les donnees a l'api et on recuperer le num de commande
    //si tout est ok on affiche le modal avec un num de commande et le prix total
window.location="confirm.html "
})



function totalCartPrice (){
    if(shoppingCart) {
        let totalCart = 0;
         for ( let i=0; i<shoppingCart.length ; i++ ){
            let cartQte =  shoppingCart[i].qte;
            let cartprice =  shoppingCart[i].price;
            totalCart += cartQte * cartprice
         localStorage.setItem('totalCart',JSON.stringify(totalCart) );
     }
    }
}

function createTableCart(){// on affiche dynamiquement le panier sous forme de tableau

// on boucle le shopping cart pour afficher une ligne par teddy
     for ( let i=0; i<shoppingCart.length ; i++ ){

        let tr1 = document.createElement("tr");
        tableCartRows.appendChild(tr1);

        let th7 = document.createElement("th");
        tr1.appendChild(th7);
        th7.setAttribute('scoop','row');
        th7.textContent="counter ligne";

        let td = document.createElement("td");
        tr1.appendChild(td);
        let teddyname =shoppingCart[i].name ;
        td.textContent= teddyname;
        td.setAttribute("id","Name")

        let td1 = document.createElement("td");
        tr1.appendChild(td1);
        let teddyColor = shoppingCart[i].colors;
        td1.textContent=teddyColor;
        td.setAttribute("id","Color")

        let price = shoppingCart[i].price  + "€";
        let td2 = document.createElement("td");
        tr1.appendChild(td2);
        td2.textContent=price;

        let td3 = document.createElement("td");
        tr1.appendChild(td3);
        td3.setAttribute("class","counter");

        let div = document.createElement("div");
        td3.appendChild(div);
        div.setAttribute("class","number");
        div.setAttribute("id","number");

        div.textContent=shoppingCart[i].qte;

        // let div1 = document.createElement("div")
        // td3.appendChild(div1)
        // div1.setAttribute("class","counter-clic")

        // let i1 = document.createElement("i")
        // div1.appendChild(i1)
        // i1.setAttribute("class","fas fa-plus plus")

        // let i2 = document.createElement("i")
        // div1.appendChild(i2)
        // i2.setAttribute("class","fas fa-minus minus")

        // let td4 = document.createElement("td")
        // tr1.appendChild(td4)
        // td4.textContent= subTotal

        let td5 = document.createElement("td");
        tr1.appendChild(td5);
        td5.setAttribute("class","text-center");

        let i3 = document.createElement("i");
        td5.appendChild(i3);
        i3.setAttribute("class","fas fa-times-circle bntDelated");



    }
    let tr2 = document.createElement("tr");
    tableFoot.appendChild(tr2);

    let td6 = document.createElement("td");
    tr2.appendChild(td6);
    td6.setAttribute("colspan","2");

    let td7 = document.createElement("td");
    tr2.appendChild(td7);
    td7.textContent = "Total"

    let totalCart = localStorage.getItem('totalCart')
    let td8 = document.createElement("td");
    tr2.appendChild(td8);
    td8.setAttribute("colspan","3");
    td8.setAttribute('class','text-right');
    td8.textContent = totalCart + "€";

}


function checkInput(){
    if (fristName.length == 0){
         alert("test 1");
    }else if(lastName.length == 0){
         alert("test 2");
    }else if(address.length == 0){
         alert("test 3");
    }else if(zip.length != 5){
         alert("test 4");
    }else if(city.length == 0){
         alert("test 5");
    }else if(email.length == 0){
         alert("test 6");
    }else {
         console.log('send to api');
         sendToApi();
    }
 }


function sendToApi(){
// crerer un objet qui va recuperer la value de chaque input du formulaire
    //creation de la class client
    class customer{
        constructor(fristName,lastName,address,city,email){
            this.lastName = lastName;
            this.fristName = fristName;
            this.address = address;
            this.city = city;
            this.email = email;
        }
    }
    // objet contenant les infos du formulaire
    let newCustumer = new customer (lastName,fristName, address,city,email)

// creer un tableau pour envoyer uniquement les ID des teddy
    //recupérer le shoppingCart
    let apiCart =JSON.parse(localStorage.getItem("shoppingCart")) ;
    console.log("apiCart",apiCart)
    let apiCartArray = []; // tableau des id des teddy

    //parcourir le tableau et recuperer les id des teddy
    if(apiCart) {
        for (let i=0; i<apiCart.length; i++){

            apiCartArray.push(apiCart[i].id)
            console.log("send api id",apiCartArray)
        }
    }

// POST API
     fetch("http://localhost:3000/api/teddies/order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contact: {
            firstName: newCustumer.fristName,
            lastName: newCustumer.lastName,
            address: newCustumer.address,
            city: newCustumer.city,
            email: newCustumer.email,
          },
          products: apiCartArray,
        }),
       })
       .then((response) => {
        if (response.ok) {
          return response.json();
        }
       })
       .then((data) => {
        localStorage.setItem("orderInfos", JSON.stringify(data));
       })
       .catch((error) => console.log("erreur de type : ", error));
}