如果输入字段值等于特定文本，请不要提交表单 [英] Don't submit the form if input field value is equal to a specific text
问题描述
我有一个带有引导程序和Google Apps脚本的表单.我已经为表单定义了常规验证，但是现在我需要为字段配置特定的验证.如果输入框的ID为"estado"，的值是"Terminado"，则不应提交该表格.输入字段的值由google app脚本函数生成，并在输入字段"inputid"被输入时更新.改变.
I have a form with bootstrap and Google Apps Script. I have defined a general validation for the form, but now I need to configure a specific validation for a field. If the input field with the id "estado" has the value "Terminado", 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.
输入字段estado由"inputid"上的值确定.当我更改inputid的值时，我的脚本进入数据库，并像excel的vlookup一样获得estado的值.然后，当我更改inputid时，我的代码将搜索或查找数据库的estado列中的值.
The input fields estado is determined by the value on "inputid". When i change the value of inputid My script go to a DB and get the value of estado like a vlookup from excel. Then, When i change inputid My code search or lookup for the value on the column estado of the Data Base.
这是我的代码:
<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">×</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">×</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">×</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();
现在，我尝试了许多方法来配置特定输入的字段验证，但是没有任何效果.我试图将值"empty"设置为如果输入值具有值"Terminado"，则返回"0".具有功能并利用我的常规验证，但没有用.
您有解决我问题的想法吗?
Now, I tried a lot of ways to configure the specific input's field validation, but nothing worked. I tried to set the value "empty" if the input value had the value "Terminado" with a function and take advantage of my general validation, but it didn't work.
Do you have an idea to solve my problem?
推荐答案
就像@Fritzdultimate所说，您可能需要使用 event.preventDefault()，但是我认为您的validate函数中还有一个问题
Like @Fritzdultimate said you probably need to use event.preventDefault() but I think there is also a problem in your validate function.
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:
Instead of Array.prototype you should have the actual array you want to run the function on like this:
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){，这样就不会有所不同.
@dwmorrin is correct, fieldsToValidate.forEach(function (el) { is the same as Array.prototype.forEach.call(fieldsToValidate, function (el) { so that shouldn't make a difference.
这篇关于如果输入字段值等于特定文本，请不要提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
