有没有人可以帮助我进行联系人表单验证？
有没有人可以帮助我进行联系人表单验证？
提问于 2020-11-15 21:15:36
我正在尝试将输入验证函数与提交函数相结合，以便拥有功能齐全的简单联系人表单，它可以对错误/正确的输入类型和空字段做出反应。使用boostrap 4，阅读验证文档，但我不明白为什么发送联系人表单，即使只填写了一个字段，它不需要电子邮件:/ :(。我是JS的新手，不能做到这一点，在那里疯狂了8个小时的-stacked。script.js中的注释代码在那里，因为我试图组合不同的东西。
有没有人，可以重写我的函数？
以下是表单的代码：
'use strict';
//---------Contact form SEND-----------
window.addEventListener("DOMContentLoaded", function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// get the form elements defined in your form HTML above
var form = document.getElementById("bootstrapForm");
// var button = document.getElementById("my-form-button");
var status = document.getElementById("status");
// Success and Error fn-s after form submission
function success() {
form.reset();
status.classList.add("success");
status.innerHTML = "Správa bola úspešne odoslaná.";
}
function error() {
status.classList.add("error");
status.innerHTML = "Pri odosielaní správy sa vyskytol problém";
}
var validation = Array.prototype.filter.call(forms, function(form) {
// handle the form submission event
form.addEventListener('submit', function(e) {
if (form.checkValidity() === false) {
e.preventDefault();
e.stopPropagation();
var data = new FormData(form);
ajax(form.method, form.action, data, success, error);
}
form.classList.add('was-validated');
}, false);
});
}, false);
// helper function for sending an AJAX request
function ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success(xhr.response, xhr.responseType);
} else {
error(xhr.status, xhr.response, xhr.responseType);
}
};
xhr.send(data);
}
$(function()
{
// Contact forms
"use strict";
// Detect when form-control inputs are not empty
$(".cool-b4-form .form-control").on("input", function() {
if ($(this).val()) {
$(this).addClass("hasValue");
} else {
$(this).removeClass("hasValue");
}
});
});
这是我的网站(表格在底部)，这样你就可以在移动中看到它：https://marekcmarko.sk
回答 1
Stack Overflow用户
发布于 2020-11-15 23:45:43
我在这里也是新手，不知道如何编写您需要的函数。但是，通过阅读这个问题，我想您可以通过直接将"required“属性添加到您的html中来解决它。这样，如果表单中的某个字段未填写，则不会发送该表单。此外，type属性可以帮助验证正确的输入类型。
<form>
<div>
<label for="Name">First Name:</label>
<input id="Name" type="text" name="Name" placeholder="John" required>
<label for="Last Name">Last Name:</label>
<input id="Last Name" type="text" name="Last Name" placeholder="Smith" required>
</div>
<div>
<label>
Male
<input type="radio" name="Gender" value="Male">
</label>
<label>
Female
<input type="radio" name="Gender" value="Female">
</label>
<label>
Other
<input type="radio" name="Gender" value="Other">
</label>
</div>
<div>
<label for="email">Email:</label>
<input id="email" type="email" name="email" required>
<label>
Password:
<input type="password" name="password" pattern=".{5,10}" required title="Enter 5 to 10 characters">
</label>
</div>
<div>
<fieldset>
<legend>Birthday:</legend>
<label for="month">Month:</label>
<select name="month" id="month">
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
<option value="april">Apr</option>
</select>
<label for="day">Day</label>
<select name="day" id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label for="year">Year</label>
<select name="year" id="year">
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</select>
</fieldset>
</div>
<div>
<label for="Terms">I agree to the terms and conditions</label>
<input id="Terms" type="checkbox" name="Terms" value="x">
</div>
<button>Submit</button>
</form>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64844844
复制相关文章
相似问题
腾讯云开发者
