How to validate an input?

Asked

Viewed 13,363 times

5

I have a form that sends the values entered in input to another page. I want to do a validation between inputs, if a number is larger than another, and if it is not, do not go to the second page and warn with a alert.

This is my HTML code:

<form action="_graphes.php" method="post"> 
  <input type="time" id="time_debut" name="time_debut" step="1" value=''>
  <input type="time" id="time_fin" name="time_fin" step="1" value='' >
  <input id=btn type=submit name=go value=ok>
</form>

And the javascript:

if(document.getElementById("time_debut").value > document.getElementById("time_fin").value){
    alert("Maior");
}
javascript form submit-form

3 answers

4


You can validate the form by following the example below, complementing put the validation to check if one or both fields are empty:

html

<form action="_graphes.php" method="post" id="formulario"> 
    <input type="time" id="time_debut" name="time_debut" step="1" value="">
    <input type="time" id="time_fin" name="time_fin" step="1" value="" >
    <input id="btn" type="button" onclick="return envia()" name="go" value="ok">
</form>

The input 'btn' when it is clicked it calls the function envia() below, where the validation and sending of the form.

js

function envia() {
        var time_debut = document.getElementById("time_debut").value;
        var time_fin = document.getElementById("time_fin").value;
        if(time_debut == '' || time_fin == '') {
            alert("Preencha todos os campos!");
        }
        else if (time_debut > time_fin){
            alert("Maior");
        }
        else {
            document.getElementById("formulario").submit();
        }   
    }

js (Not validating whether fields are empty)

function envia() {
            var time_debut = document.getElementById("time_debut").value;
            var time_fin = document.getElementById("time_fin").value;
            if (time_debut > time_fin){
                alert("Maior");
            }
            else {
                document.getElementById("formulario").submit();
            }   
        }

  • The button type has to be button, or with Submit it always goes to the next page.

  • @akm switched to 'button', thanks.

3

Try putting Submit only in javascript.

This is your HTML:

<form id="frm" action="_graphes.php" method="post"> 
  <input type="time" id="time_debut" name="time_debut" step="1" value=''>
  <input type="time" id="time_fin" name="time_fin" step="1" value='' >
  <input id="btn" type="button" onclick="javascript: btn_click()" name="go" value="ok">
</form>

And the javascript:

function btn_click() {
    if (document.getElementById("time_debut").value > document.getElementById("time_fin").value) {
        alert("Maior");
        return;
    }
    document.getElementById("frm").submit();
}

3

Tag form, add a call to the form validation function.

<form action="_graphes.php" method="post" onsubmit="validar()">

The validation function will contain the code snippet you’ve already built:

function validar() {
    if(document.getElementById("time_debut").value > document.getElementById("time_fin").value) {
        alert("Maior");
        return (false);
    }
    else {
        return (true);
    }
}

The return(false) will cause the form submission to be stopped, and the next page will not be called.

Browser other questions tagged javascript form submit-form

You are not signed in. Login or sign up in order to post.