javascript - 有没有人可以帮助我进行联系表单验证?
问题描述
我正在尝试将输入验证功能与提交功能结合起来,以便拥有对错误/正确输入类型和空字段做出反应的功能齐全的简单联系表单。使用boostrap 4,阅读验证文档,但我不明白为什么即使只填写了一个字段并且不需要电子邮件也会发送联系表格:/ :(。我是JS的菜鸟,无法做到这一点并且发疯了——在那里堆了 8 个小时。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
解决方案
我也是菜鸟,不知道如何编写您需要的功能。但是,通过阅读问题,我想您可以通过将“必需”属性直接添加到您的 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>
推荐阅读
- ansible - 使用 ansible iptables 模块更新 iptables
- javascript - 我无法解决这个问题 (node:15320) UnhandledPromiseRejectionWarning: DiscordAPIError: Cannot send an empty message
- javascript - 在将 JSON 字符串解析为对象后,您如何访问这些属性?
- javascript - 如何使用参数更改组件本地状态?
- windows - 将 Hive 与 PowerBI 集成
- react-native - React-native-modal - 使用 TransformIgnorePatterns 的带有 Jest 的意外令牌
- reactjs - 来自路由器的链接在不应该刷新整个页面时
- css - 文本修改,使用“内容”?
- c# - 如何使用 Azure IoT 获取设备的当前位置
- regex - 正则表达式查找单词并替换为记事本++中包含该单词的行