驗證表單中單擊提交按鈕上的輸入
[英]Validation of input on click submit button in a form
問題描述
我正在嘗試驗證我的表單，但控制台從不顯示錯誤。 我已經完成了 Bootstrap 文檔所說的，但什么也沒發生。 例如，我希望在單擊按鈕時，如果任何字段為空，它會在該字段中顯示警報或錯誤。 如果有人可以幫助我，我將非常感激。
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e6233a0317.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/help.css">
<link rel="stylesheet" href="./css/tags.css">
<title>TejidosPulido E-Commerce</title>
</head>
<body>
<header id="header_menu"></header>
<br>
<main role="main">
<div class="container rounded" style="background-color: rgb(228, 225, 225);">
<br>
<form class="needs-validation" novalidate style="padding: 15px 40px;">
<div class="row">
<div class="col-sm-6" style="margin-bottom: 50px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="validationDefault01">Número de producto</span>
<input type="text" class="form-control" id="inputNum" style="text-align: end;" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-text title" for="inputNum">Visible</span>
<div class="input-group-text" style="background: white">
<span class="input-group-addon"><input type="radio" id="visible" name="visibilidad" value="always"> Si</span>
<span class="input-group-addon"><input type="radio" id="invisible" name="visibilidad" value="never"> No</span>
</div>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-4">
<span class="input-group-text title">Imagen de producto</span>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom: 15px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="inputName">Nombre del producto</span>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputImage" accept="image/*">
</div>
</div>
<div class="col-sm-1"></div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text precio title">Precio</span>
<input type="text" class="form-control" id="inputPrecio" placeholder='0.00' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">€/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text peso title">Peso</span>
<input type="text" class="form-control" id="inputPeso" placeholder='0' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">gr/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<label class="input-group-text tipo-large" for="product_type" style="background: #0bbe83; color: white; font-weight: bold;">Tipo de producto</label>
<select class="form-select" id="product_type">
<option selected>Selecciona...</option>
<option value="referencia">Referencia</option>
<option value="color">Color</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<span class="input-group-text title" for="inputDescripcion">Descripción:</span>
<textarea id="inputDescripcion" name="inputDescripcion" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
<div class="col-sm-6">
<span class="input-group-text title" for="inputFunciones">Funciones bàsicas:</span>
<textarea id="inputFunciones" name="inputFunciones" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
</div>
<br>
<div class="btn-group" role="group" style="float:right">
<button class="btn btn-dark" id="guardarButton" type="submit" class="btn btn-sm btn-outline-secondary">Guardar </button>
</div>
<br>
<br>
<br>
</form>
</div>
<hr class="featurette-divider">
<footer class="container" id= "footer"></footer>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src='./js/firebaseConfig.js'></script>
<script src="./js/session.js"></script>
<script src="./js/header.js"></script>
<script src="./js/newproducto.js"></script>
<script src="./js/footer.js"></script>
</body>
</html>
這是 javascript function：
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
2 個解決方案
解決方案1
0 2021-04-09 12:11:08
跨度for輸入id應該相同。
在您的情況下，錯誤實際上是檢測到但無法分配給正確的id w.r.t for
解決方案2
0 2021-04-09 12:55:29
“我正在嘗試驗證我的表單，但控制台從不顯示錯誤”
控制台不應顯示錯誤，因為代碼按預期工作。
很可能與您環境中包含的許多其他 JS 文件之一存在沖突。 HTML 的結構也很差（按鈕上有 2 個 class 屬性），並且invalid-feedback 。
Javascript表單驗證，並在“提交”按鈕下方顯示輸入/選定的結果
[英]Javascript form validation and show the input/selected result below the submit button
在表單驗證啟用提交按鈕后，如果單擊提交按鈕，使用 jQuery 打開模式彈出窗口？
[英]After form Validation enable submit button and if click submit button open modal popup using jQuery?
如何在不提交整個表單的情況下單擊輸入類型“提交”按鈕
[英]How to click on an input type“submit” button without submiting the whole form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.