How can I extract values from a Javascript input, but using HTML validation

Question

 <form><label for="NUMERO">Digite um número</label>
 <input type="number" name="num" id="NUMERO" min="0" max="100">
 <button type="submit">Enviar</button>
 </form>

I would like in javascript the number was extracted and the form validated, so that the page is not updated. Please explain step by step

Answer 1

Place the attribute required that when doing Submit the HTML will require the field to be populated. To cancel the Submit event, use preventDefault();, with this the form will not be sent and the page will not be reloaded.

To do this, you must create a function that receives the Submit event from the form. You can take the form with document.querySelector("form") and detect Submit with onsubmit:

document.querySelector("form").onsubmit = function(e){
   // o "e" recebe o evento submit.
   // Em vez de "e", você pode usar outra letra ou palavra,
   // como "event", "x", "y", "evento", "ev" etc..
   // Eu uso "e" por costume. Cada programador tem seus costumes
   // em criar nomes de variáveis
   e.preventDefault();
   console.log("Formulário ok!");
}

<form><label for="NUMERO">Digite um número</label>
<input type="number" name="num" id="NUMERO" min="0" max="100" required>
<button type="submit">Enviar</button>
</form>

The querySelector selects the element you specify in the selector. In the above case, I took the element form, which is the form.

Calling a non-announced function:

document.querySelector("form").onsubmit = f;
function f(){
   console.log("Formulário ok!");
   return false;
}

<form><label for="NUMERO">Digite um número</label>
<input type="number" name="num" id="NUMERO" min="0" max="100" required>
<button type="submit">Enviar</button>
</form>

The return false; will also cancel sending the form.

Answer 2

I recommend that you validate the Javascript itself because it is safer, because in HTML it is possible for the user to remove the validation tag through the element inspencionar, being as follows:

$(document).ready(function(){
  $("#formCadastro").on("submit", function(event) {
    var numero = $("#NUMERO").val();
    if(numero != ''){
    	if(numero >= 0 && numero <= 100){
        //realiza action do form
        return true;
      }
    }
    //não execute action do form
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formCadastro">
  <label for="NUMERO">Digite um número</label><br>
  <input type="number" name="num" id="NUMERO"><br>
  <button type="submit">Enviar</button>
 </form>