如果输入字段值等于特定文本，则不要提交表单

我有一个带有引导程序和谷歌应用程序脚本的表单。我已经为表单定义了一个通用验证，但现在我需要为字段配置一个特定的验证。如果id为"0"的输入字段是"0"；estado"；具有值"0"；Terminado"；，表格不应提交。输入字段的值由谷歌应用程序脚本函数生成；inputid"；改变

输入字段estado由"0"上的值确定；inputid"；。当我更改inputid的值时，我的脚本会转到一个DB，并从excel中获得estado的值，就像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();

现在，我尝试了很多方法来配置特定输入的字段验证，但都没有成功。我试图设置值"；"空"；如果输入值具有值"0"；Terminado"；使用一个函数，并利用我的一般验证，但它不起作用
你有办法解决我的问题吗？

Like@Fritzdtultimate说你可能需要使用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) {是一样的，所以这应该没有什么区别。

我发现解决方案在第一个实例中调用特定的验证，如果返回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();

相关内容

最新更新

热门标签：