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

Question

I have a form with bootstrap and Google Apps Script. I need to configure a specific validation for a field. If the input field with the id "estado" has the value 1, the form should not be submitted. The value of the input field is generated by a google app script function and its updated when the input field "inputid" change.

This is my code:

<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>

When i submit the form, the form is sent in the same way and register the values on my spreadsheet when the value is equal to "1". Can you help me with this problem? Greetings!

Answer 1

I'm not sure what number you require to be present for the form validation, obviously not the number 1. So, you might try this:

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

Here's the 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();
  }
}

Not sure if this will work for you, you may have to play around with the number parameters in the "var regex" to get it to work on your page. This also prevents the user from putting in wrong data, or trying to do a copy/paste into the field.