0

我有一个带有引导程序和 Google Apps 脚本的表单。我已经为表单定义了一个通用的验证，但是现在我需要为一个字段配置一个特定的验证。如果 ID 为“estado”的输入字段的值为“Terminado”，则不应提交表单。输入字段的值由谷歌应用脚​​本函数生成，并在输入字段“inputid”更改时更新。

输入字段 estado 由“inputid”上的值确定。当我更改 inputid 的值时，我的脚本转到数据库并获取 estado 的值，就像来自 excel 的 vlookup 一样。然后，当我更改 inputid 时，我的代码搜索或查找数据库列 estado 上的值。

这是我的代码：

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Formulario Llegada</title>
  <?!=include("userformarrive-css");?>    
  </head>
  <body>
  
  <h4 align="center">Formulario de llegada</h4>
  
  <div class ="container">
   <form id = "userform">

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="inputid">Identificador de viaje</label>
    <input type="text" class="form-control" id="inputid" required>
    <div class="invalid-feedback">
      No ha ingresado los datos o el viaje señalado ya se encuentra cerrado.
    </div>
  </div>
  <div class="form-group col-md-6">
    <label for="estado">Estado</label>
    <input type="text" class="form-control" id="estado" required disabled>
    <div class="invalid-feedback">
      No ha ingresado los datos o estos no son válidos.
    </div>
  </div>
</div>
       <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal">Enviar datos</button>

    
  
  </div>
  </form>
  
  
  <!-- Acá van las notificaciones -->
  
  <div id="notifications">
  
  <div id="errornotification" class="toast" style="position: absolute; top: 0; right: 0;" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
  <div class="toast-header">
    <strong class="mr-auto">Error</strong>
    <small>Notificación</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Uno o más campos requeridos no han sido completados dentro del formulario
  </div>
</div>
  
   <div id="successnotification"  class="toast" style="position: absolute; top: 0; right: 0;" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
  <div class="toast-header">
    <strong class="mr-auto">Datos correctos</strong>
    <small>Notificación</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    El formulario ha sido enviado de forma correcta. Recibirá un correo con el número de la operación ID para luego cerrar la llegada.
  </div>
</div>
    
  </div>
 
      <div id="loading" class="loading pt-40">
         <div class="d-flex justify-content-center">
         <div>
        
        <div class="spinner-border text-primary" style="width: 4rem; height: 4rem;"role="status">
        <span class="sr-only">Cargando</span>
        </div>
         <div> Cargando</div>
       </div>
      </div>
     
     </div>
     
<div id="modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Envío de Formulario</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>¿Desea enviar el registro?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button class="btn btn-outline-primary" id ="enviar" >Registrar Salida</button>
      </div>
    </div>
  </div>
</div>  





var arrayOfValues;

function afterButtonClicked() {

  if (validate()) {

    var cuenta = document.getElementById("cuenta");
    var inputid = document.getElementById("inputid");
    var estado = document.getElementById("estado");
    var kmfinal = document.getElementById("kmfinal");

    var rowDataarrive = {
      cuenta: cuenta.value,
      inputid: inputid.value,
      estado: estado.value,
      kmfinal: kmfinal.value,
    };

    google.script.run.addNewRowarrive(rowDataarrive);
    $('#modal').modal('hide')
    $('#successnotification').toast('show')
    setTimeout(function () {
      location.reload()
    }, 6000);
  } else {
    $('#modal').modal('hide')
    $('#errornotification').toast('show')
  }
}

function validate() {
  var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
  Array.prototype.forEach.call(fieldsToValidate, function (el) {
    if (el.checkValidity()) {
      el.classList.remove("is-invalid");
    } else {
      el.classList.add("is-invalid");
    }
  });

  return Array.prototype.every.call(fieldsToValidate, function (el) {
    return el.checkValidity();
  });
}

function getId() {
  var idCode = document.getElementById("inputid").value;
  google.script.run.withSuccessHandler(updateIdcode).getId(idCode);
}

function updateIdcode(estadolist) {
  document.getElementById("estado").value = estadolist;
}

google.script.url.getLocation(function (location) {
  document.getElementById("inputid").value =
    location.parameters.inputid[0];
  getId();
});

document.getElementById("inputid").addEventListener("input", getId);
document.getElementById("enviar").addEventListener("click", afterButtonClicked);
document.getElementById("loading").remove();

现在，我尝试了很多方法来配置特定输入的字段验证，但没有任何效果。如果输入值具有带有函数的值“Terminado”并利用我的一般验证，我尝试将值设置为“空”，但它不起作用。
你有想法解决我的问题吗？

4

2 回答 2

2

就像@Fritzdultimate 说的你可能需要使用event.preventDefault()，但我认为你的验证功能也有问题。

function validate() {
  var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
  Array.prototype.forEach.call(fieldsToValidate, function (el) {
    if (el.checkValidity()) {
      el.classList.remove("is-invalid");
    } else {
      el.classList.add("is-invalid");
    }
  });

  return Array.prototype.every.call(fieldsToValidate, function (el) {
    return el.checkValidity();
  });
}

而不是 Array.prototype 你应该有你想要运行函数的实际数组，如下所示：

function validate() {
  var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
  fieldsToValidate.forEach(function (el) {
    if (el.checkValidity()) {
      el.classList.remove("is-invalid");
    } else {
      el.classList.add("is-invalid");
    }
  });

  return fieldsToValidate.every(function (el) {
    return el.checkValidity();
  });
}

编辑：@dwmorrin 是正确的，fieldsToValidate.forEach(function (el) {是一样的，Array.prototype.forEach.call(fieldsToValidate, function (el) {所以不应该有所作为。

于 2020-08-06T21:29:51.653 回答
0

我发现解决方案在第一个实例中调用特定验证，如果返回 true，则进入第二个验证，这是 javascript 代码： 

var arrayOfValues;


function buttonClickAction(){
var isValid = document.getElementById("estado").value
if(isValid == 1){

$('#errornotificationestado').toast('show')
$('#modal').modal('hide')

isValid.classList.add("is-invalid")

}else {

afterButtonClicked()

}
}


function afterButtonClicked(){

if(validates()){


var cuenta = document.getElementById("cuenta");   
var inputid = document.getElementById("inputid");
var estado = document.getElementById("estado");
var kmfinal = document.getElementById("kmfinal");


    
var rowDataarrive = {cuenta: cuenta.value,inputid:inputid.value,
               estado: estado.value,kmfinal:kmfinal.value,
                          
               };
     
             
               
google.script.run.addNewRowarrive(rowDataarrive);
$('#modal').modal('hide')
$('#successnotification').toast('show')
setTimeout(function(){location.reload()}, 6000);
} else{
$('#modal').modal('hide')
$('#errornotification').toast('show')
}
}

function validates(){

var fieldsToValidate = document.querySelectorAll("#userform input, #userform select");
Array.prototype.forEach.call(fieldsToValidate, function(el){
if(el.checkValidity()){
el.classList.remove("is-invalid");

}else{
el.classList.add("is-invalid");


}
   
});

return Array.prototype.every.call(fieldsToValidate, function(el){
return el.checkValidity();

});

}
function getId(){

var idCode = document.getElementById("inputid").value;

google.script.run.withSuccessHandler(updateIdcode).getId(idCode);

}

function updateIdcode(estadolist){
document.getElementById("estado").value = estadolist; 

}
 
google.script.url.getLocation(function(location) {
document.getElementById("inputid").value = location.parameters.inputid[0];
getId(); 
});
     
document.getElementById("inputid").addEventListener("input",getId);
document.getElementById("enviar").addEventListener("click",buttonClickAction);
document.getElementById("loading").remove();
于 2020-08-11T03:20:07.013 回答