防止html表单根据输入值提交

问题描述

我有一个带有引导程序和Google Apps脚本的表单。我需要为字段配置特定的验证。如果ID为“ estado”的输入字段的值为1，则不应提交表单。输入字段的值由google app脚本函数生成，并在输入字段“ inputid”更改时更新。

这是我的代码：

<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" onchange="onchangeestado()" required>
        <div class="invalid-feedback">
            No ha ingresado un identificador de viaje.
        </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">
            El viaje señalado ya se encuentra cerrado.
        </div>
    </div> 
</div>
<div class="form-row">
    <div class="form-group col-md-6">
        <label for="kminicial">Kilometraje Final</label>
        <input type="number" class="form-control" id="kmfinal" required>
        <div class="invalid-feedback">
            No ha ingresado el kilometraje inicial del vehículo.
        </div>
    </div>
</div> 
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal" onclick="verifyError()">Enviar datos</button>
<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> 
<script>
    var arrayOfValues;
    function verifyError() {
        var estado = document.getElementById("estado");
        var inputid = document.getElementById("inputid");
        if(estado == 1) {
            inputid.classList.add("is-invalid");
        }
        else{
  document.getElementById("enviar").addEventListener("click",afterButtonClicked);
        }
    }  
    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("loading").remove();
</script>

当我提交表单时，表单以相同的方式发送，并且当值等于“ 1”时在我的电子表格中注册这些值。 您能帮我解决这个问题吗？ 问候！

解决方法

我不确定表单验证需要显示什么数字，显然不是数字1。因此，您可以尝试以下方法：

<input type="text" class="form-control" id="estado" onkeypress='validate(event)' required disabled>

这是JavaScript。

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[2-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

不确定是否适合您，您可能需要使用“ var regex”中的number参数来使其在页面上起作用。 这也可以防止用户输入错误的数据，或试图在字段中进行复制/粘贴。