Não consigo validar input number

[leonanthomaz]

Estou desenvolvendo um projeto para estudos e estou com uma dificuldade enorme para validar um input number. Já tentei diversas maneiras e sempre ou aparece "false" ou em branco. Não sei o que estou fazendo de errado. Só falta essa etapa pra conclusão. Alguém poderia ajudar? Obs: Sou iniciante, conheço mais HTML e CSS e estou me `aprofundando em Javascript.

`

<h1>Lanches</h1>

    

<article class="itens-container">
                                
                              
    <!-- Melancia -->

    <div class="item-info item-info-6">
        <div class="item-img">
            <img src="img/lanches/melancia.jpg" alt="">
        </div>
        <div class="item-txt">
            <strong>Melancia</strong>
            <span class="item-sub-txt"> Uma linda melancia</span>
        </div>

        <div class="item-numeros-container">
            <div class="item_valor">
                <div>R$ 4,00</div>
            </div>

            <div class="item_quant">
                <div>
                    <input type="checkbox" value=4,00 name="item-checkbox" class="item-checkbox"
                        id="Melancia">

                        <input type="number" value="" name="quantidade" class="quantidade">
                            


                </div>
            </div>
            <div class="item_add">
                <i class="fas fa-plus btnAdd6"></i>
            </div>
        </div>

        

        <div id="adicionais-6" class="adicionais hidden ">
            <div class="itens-adicionais">
                <strong>Adicionais</strong>
                <ul class="radios-add">
                    <li><input type="checkbox" class="input-add" value=3,00 name="" alt="Melancia"
                            id="Maça"> Maça</li>
                    <li>R$3,00</li>

                    <li><input type="radio" class="input-add" value=3,00 name="" alt="Melancia"
                            id="Banana"> Banana</li>
                    <li>R$3,00</li>

                </ul>
            </div>

        </div>
        
    </div>
                         
    </article>

<script>

        // Pedido Selecionado
    
    var pedido = "" 
    const pedidosDisponiveis = document.querySelectorAll("input[type=checkbox]")
    var pedidoSelecionado = ""
    var soma = 0; 
    for ( pedido of pedidosDisponiveis) {
        var pedidoSelecionados = pedido.checked
        
        if(pedido.checked == true) {
            pedidoSelecionado +=` ${pedido.id} -> ${pedido.value} Reais; ` 
            var pedidosValores  =  parseInt(pedido.value)
            soma += pedidosValores   
        }
    }

    
    var quantidadeDisponiveis = document.querySelectorAll("item_quant[type=number]")
    var quantidadeSelecionado = ""
    for ( quantidade of quantidadeDisponiveis) {
        var quantidadeSelecionado = quantidade.checked
        
        if(quantidade.checked == true) {
            quantidadeSelecionado +=` ${quantidade.id} -> ${quantidade.value} Reais;` 
            var quantidadesValores  =  parseInt(quantidade.value)
            pedidoSelecionado *= quantidadeValores   
        }
    }


    

    $(".btnAdd6").click(function(i){
    $('#adicionais-6').toggleClass('hidden')
    $('.item-info-6').toggleClass('alturaAuto')
    $('.item_quant').toggleClass('alturaAuto')


    })
    



    // Adicional Selecionado
    
    const AdicionaisDisponiveis = document.querySelectorAll("item_add[type=checkbox]")
    var adicionalSelecionado = ""
    for (adicional of AdicionaisDisponiveis){
        if(adicional.checked == true){
            adicionalSelecionado +=` ${adicional.alt} - Adicional: ${adicional.id} -> ${adicional.value} Reais;`
            var adicionaisValores = parseInt(adicional.value)
            soma += adicionaisValores
        }
        
    }

</script>

`

[brunoappneta]

Olá @leonanthomaz , que tipo de validação você deseja fazer? Quando o usuário digitar a quantidade de melancias você quer checar se é um número negativo ou positivo? Essa validação deve acontecer assim que o usuário clicar no botão de "+"?

[leonanthomaz]

Exatamente, @brunoappneta .. Obrigado por responder! Gostaria de validar para multiplicar com valor do produto e fazer com q seja incorporado no valor final. O problema é q não consigo fazer com que o number apareça nem na quantidade muito menos na soma final. Sempre mostra falso ou undefined. Nessa última modificação, aparece false..

vou enviar a modificação que fiz bem como o código completo dele..

`

<h1>Lanches</h1>

    

<article class="itens-container">
                                
                              
    <!-- Melancia -->

    <div class="item-info item-info-6">
        <div class="item-img">
            <img src="img/lanches/melancia.jpg" alt="">
        </div>
        <div class="item-txt">
            <strong>Melancia</strong>
            <span class="item-sub-txt"> Uma linda melancia</span>
        </div>

        <div class="item-numeros-container">
            <div class="item_valor">
                <div>R$ 4,00</div>
            </div>

            <div class="item_quant">
                <div>
                    <input type="checkbox" value=4,00 name="item-checkbox" class="item-checkbox"
                        id="Melancia">

                        <input type="number" value="" name="quantidade" class="quantidade" min="0">
                            


                </div>
            </div>
            <div class="item_add">
                <i class="fas fa-plus btnAdd6"></i>
            </div>
        </div>

        

        <div id="adicionais-6" class="adicionais hidden ">
            <div class="itens-adicionais">
                <strong>Adicionais</strong>
                <ul class="radios-add">
                    <li><input type="checkbox" class="input-add" value=3,00 name="" alt="Melancia"
                            id="Maça"> Maça</li>
                    <li>R$3,00</li>

                    <li><input type="radio" class="input-add" value=3,00 name="" alt="Melancia"
                            id="Banana"> Banana</li>
                    <li>R$3,00</li>

                </ul>
            </div>

        </div>
        
    </div>
                         
    </article>

`

'
<script>

        //Botão de enviar as informações no WhatsApp

$(document).ready(function(){

$("#enviar").click(function(){
   var nome=$("#nome").val()
   var endereco=$("#endereco").val()
   var numero=$("#numero").val()
   var bairro=$("#bairro").val()
   var observacao = $("textarea").val()
   
   // FORMA de pagamento selecionada
   const formasDePagamento= document.querySelectorAll("form input[type=radio]")
   var formaSelecionada = ""
   if(formasDePagamento[0].checked){
       formaSelecionada = "Dinheiro"
    } else if (formasDePagamento[1].checked) {
        formaSelecionada =" Cartão de Crédito"
    } else {
        formaSelecionada = "Cartão de Débito"
        
    }

  
    // Pedido Selecionado
    
    var pedido = "" 
    const pedidosDisponiveis = document.querySelectorAll("input[type=checkbox]")
    var pedidoSelecionado = ""
    var soma = 0; 
    for ( pedido of pedidosDisponiveis) {
        var pedidoSelecionados = pedido.checked
        
        if(pedido.checked == true) {
            pedidoSelecionado +=` ${pedido.id} -> ${pedido.value} Reais; ` 
            var pedidosValores  =  parseInt(pedido.value)
            soma += pedidosValores   
        }
    }

    
    
       //esse number que não consigo
    var quantidadeDisponiveis = document.querySelectorAll("input[type=number]")
    var quantidadeSelecionado = ""
    for ( quantidade of quantidadeDisponiveis) {
        var quantidadeSelecionado = quantidade.checked
        
        if(quantidade.checked == true) {
            quantidadeSelecionado +=` ${quantidade.id} -> ${quantidade.value} Reais;` 
            var quantidadeValores  =  parseInt(quantidade.value)
            soma *= quantidadeValores   
        }
    }


    



    // Adicional Selecionado
    
    const AdicionaisDisponiveis = document.querySelectorAll("item_add[type=checkbox]")
    var adicionalSelecionado = ""
    for (adicional of AdicionaisDisponiveis){

        if(adicional.checked == true){
            adicionalSelecionado +=` ${adicional.alt} - Adicional: ${adicional.id} -> ${adicional.value} Reais;`
            var adicionaisValores = parseInt(adicional.value)
            soma += adicionaisValores
        }
        
    }


    
    //Taxa de entrega
    var TaxaDeEntrega = 0;
    var bairro = ""
    const Bairros = document.querySelectorAll("option")
    if(Bairros[1].selected==true){
        bairro = '#'
        TaxaDeEntrega += parseInt(Bairros[1].value)
        
    } else if(Bairros[2].selected==true){
        TaxaDeEntrega += parseInt(Bairros[2].value)
        bairro = '#'
    } else if(Bairros[3].selected==true) {
        TaxaDeEntrega += parseInt(Bairros[3].value)
        bairro = '#'
        
    } else if(Bairros[4].selected==true) {
        TaxaDeEntrega += parseInt(Bairros[4].value)
        bairro = '#'
        
    } else if (Bairros[5].selected==true) {
        TaxaDeEntrega += parseInt(Bairros[5].value)
        bairro = '#'

    } else if (Bairros[6].selected==true) {
        TaxaDeEntrega += parseInt(Bairros[5].value)
        bairro = '#'
        
    } else {
        TaxaDeEntrega += parseInt(Bairros[7].value)
        bairro = '#'
    }

    var cupom = $("#cupom").val()
       if( cupom == 'cupom10' ) {
       var desconto = 10
    }else{ 
    if( cupom == '' ) {
    var desconto = 0
 }       
}


var texto=`${nome};${endereco}; ${bairro}; ${numero}; ${observacao}; 
// Forma de pagamento: ${formaSelecionada}, Pedido: ${pedidoSelecionado}, ${adicionalSelecionado}, Quantidade: ${quantidadeSelecionado}
Valor do Pedido = ${soma},00 
;Taxa de entrega = ${TaxaDeEntrega},00
;Desconto = ${desconto},00 
;Valor Total: ${(soma+TaxaDeEntrega) - desconto},00`

var site="&text="+texto.replace(" ","%20","%0a")

if(confirm("Confirma seu pedido?")){
    window.location.href=site;
} else {
}

})
})

</script>

'

[brunoappneta]

1. Parece que o input que guarda a informação de quantidades não possui um campo id e nessa linha ele utiliza o id e value do campo quantidadeSelecionado +=` ${quantidade.id} -> ${quantidade.value} Reais;` . Então seria bom atualizar o HTML para algo como:
   <input type="number" value="" id="quantidade" name="quantidade" class="quantidade" min="0">

2. Aqui var quantidadeSelecionado = quantidade.checked você está atribuindo o valor de checked em quantidadeSelecionado, o que você quer é o que está em value, ou seja var quantidadeSelecionado = quantidade.value

3. Após as mudanças acima, logo abaixo da linha var quantidadeSelecionado = quantidade.value você pode adicionar uma validação usando if, exemplo:

if (quantidadeSelecionado <= 0) {
  alert("Informe uma quantidade maior que zero")
  return
}		

Algumas considerações

• Vi que no HTML há alguns campos value inválidos, por exemplo -> value=3,00. Eles deveriam ter aspas: value="3,00"

• Vi que você está usando jQuery, para iniciantes eu não recomendo misturar jQuery com Javascript puro. Digo isso por experiência própria, comecei com javascript + jQuery e após um ano usando dessa forma eu ainda não sabia o que era JS puro e o que só existia no jQuery. Tive que estudar JS do zero para deixar as más práticas de lado. Além do mais, hoje em dia o JS puro está com funções excelentes que podem substituir o jQuery com menos esforço.

• Uma dica para casos como esse, onde você está com dificuldade em um ponto específico e o código está começando a ficar grande: recomendo tentar isolar o problema em outro lugar, exemplo, você quer pegar o valor de um input mas não sabe bem como fazer isso ou onde fazer isso. Tente criar um arquivo HTML em branco, adicionar um <input> e um <button> e com javascript pegar o valor que está no input assim que o botão for clicado. Dessa forma você treina esse aspecto específico sem misturar essa lógica com outras coisas, que no começo podem ser informações demais... Enfim, tentar entender o que cada linha está fazendo é difícil mas bem iluminador.

[leonanthomaz]

@brunoappneta Cara muito obrigado! Bastante explicativo.. To apanhando pra caramba nessa nova empreitada, mas farei como vc disse.. Vou revisar os códigos.. Uma coisa que esqueci foi de não por a fórmula no resultado final.. Assim, não estava aparecendo pra mim de fato.. Valeu de verdade pelo tempo disponibilizado.. Me ajudou muito!