Validate fields with Javascript

Question

Validate fields with Javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I am working on a reservation system in which when a customer clicks on the type of payment without choosing the date, the input that defines día and valor is completed only with NaN . I do not know how to make it blank and make a red box or a simple text that says "choose a date".

<?php
date_default_timezone_set('America/Argentina/Buenos_Aires');
$tarjeta = 200;
$efectivo = $tarjeta*0.5;
?>

script.js

function data(valor){
var ingreso = document.getElementById("ingreso").value;
if(ingreso == '' || ingreso == null){
alert('Seleccione la Fecha de Ingreso');
document.getElementById("ingreso").value=null;
return false;
}

var retiro = document.getElementById("retiro").value;
if(retiro == '' || retiro == null){
alert('Seleccione la Fecha de retiro');
document.getElementById("ingreso").value=null;
return false;
}

//aqui hace el calculo de dias y lo multiplica por el valor para obtener un resultado
let fechaInicio = new Date(ingreso).getTime();
let fechaFin    = new Date(retiro).getTime();
let diff = fechaFin - fechaInicio + (24*60*60*1000); //Diferencia en milisegundos
let dias = diff/(1000*60*60*24); //Diferencia en dias

var totaldias = document.getElementById("totaldias").value = dia;
if(totaldias == '' || totaldias == null){
alert('Seleccione la Fecha de Ingreso');
document.getElementById("totaldias").value=null;
return false;
}

var valor = document.getElementById("valor").value = dias*valor;
if(valor == '' || valor == null){
alert('Seleccione la Fecha de retiro');
document.getElementById("valor").value=null;
return false;
}
//enviar formulario submit
//document.getElementById("formulario").submit();
}

form

<form action="" method="post">
<input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
<input type="date" name="salida" id="retiro" autocomplete="off" onChange="data(<?php echo $tarjeta;?>)"><br>
<input type="radio" id="efectivo" name="pago" value="efectivo" onChange="data(<?php echo $tarjeta;?>)">
<label for="efectivo">Tarjeta 100%</label><br>
<input type="radio" id="tarjeta" name="pago" value="tarjeta" onChange="data(<?php echo $efectivo;?>)">
<label for="tarjeta">Tarjeta 50%</label><br>
<label for="totaldias">Total dias</label>
<input type="text" name="dias" id="totaldias" readonly="readonly"><br>
<label for="valor">A pagar</label>
<input type="text" name="valor" id="valor" readonly="readonly">
</form>

javascript html php

asked by Stn 19.12.2018 в 15:16

source

2 answers

bootstrap-select behind input text Comment a line in a file.log separated by blank spaces? [duplicate]

score 1 · Answer 1

What I would do would be to check if you get NaN:

document.getElementById("valor").value = dias.isNan() ? null : dias * valor;

If days is not a number, you assign null to the value. If it's a number, then you do the calculation. The same for the other value.

score 1 · Answer 2

Greetings you should validate something like this:

<form action="" method="post" id="formulario">
<label for="">FEc. ingreso</label>
<input type="date" name="ingreso" id="ingreso" autocomplete="off"><br>
<label for="">Fec. salida</label>
<input type="date" name="salida" id="retiro" autocomplete="off" onChange="data(<?php echo $tarjeta;?>)"><br>
<input type="radio" id="efectivo" name="pago" value="efectivo" onChange="data(<?php echo $tarjeta;?>)">
<label for="efectivo">Tarjeta 100%</label><br>
<input type="radio" id="tarjeta" name="pago" value="tarjeta" onChange="data(<?php echo $efectivo;?>)">
<label for="tarjeta">Tarjeta 50%</label><br>
<label for="totaldias">Total dias</label>
<input type="text" name="dias" id="totaldias" readonly="readonly"><br>
<label for="valor">A pagar</label>
<input type="text" name="valor" id="valor" readonly="readonly"><br>
<input type="button" onclick="grabar_datos();" value="Grabar Datos">
</form>
<script>
function grabar_datos(){

  var ingreso = document.getElementById("ingreso").value;
  if(ingreso == '' || ingreso == null){
  alert('Seleccione la Fecha de Ingrese');
  document.getElementById("ingreso").value=null;
  return false;
  }

  var retiro = document.getElementById("retiro").value;
  if(retiro == '' || retiro == null){
  alert('Seleccione la Fecha de retiro');
  document.getElementById("ingreso").value=null;
  return false;
  }
  //enviar formulario submit
  document.getElementById("formulario").submit();
}
</script>

If you notice, I added a button and has the event onclick which calls the function record_dates this is responsible for receiving, validating and then send the data to where you want.

I only rely on simple conditions where valid if the value of an input is empty or null if it is so I show an alert and stable to null the input so that you can enter a new value the user, also this

return false;

What it does is that it does not advance or continue the function if it finds an error. I hope you guide and luck .. !!