javascript - e.preventDefault() 不允许我提交表单
问题描述
我写了一些 Javascript 来验证表单。但是,如果表单字段通过所有验证,则表单永远不会提交!我的代码是否以某种方式错误地阻止了表单提交?如果我删除所有 Javascript 并使用浏览器的内置验证,则表单执行良好并将用户添加到数据库中。
const form = document.getElementById('form');
const first_name = document.getElementById('first_name');
const last_name = document.getElementById('last_name');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
// Show input error message
function showError(input, message) {
input.className = 'form-control is-invalid';
const small = input.parentElement.querySelector('small');
small.className = 'invalid-feedback';
small.innerText = message;
}
// Show success outline
function showSuccess(input, message) {
input.className = 'form-control is-valid';
const small = input.parentElement.querySelector('small');
small.className = 'valid-feedback';
small.innerText = message;
}
function checkRequired(inputArray) {
inputArray.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
return false;
} else {
showSuccess(input, "Looks Good!");
return true;
}
});
}
// Check email is valid
function checkEmail(input) {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input, 'Looks Good!');
return true;
} else {
showError(input, 'Email is not valid');
return false;
}
}
// Check input length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(
input,
`${getFieldName(input)} must be at least ${min} characters`
);
return false;
} else if (input.value.length > max) {
showError(
input,
`${getFieldName(input)} must be less than ${max} characters`
);
return false;
} else {
showSuccess(input, 'Looks Good!');
return true;
}
}
// Check passwords match
function checkPasswordsMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
return false;
}
return true;
}
// Get fieldname
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// Event listeners
form.addEventListener('submit', function(e) {
if (!checkRequired([first_name, last_name, username, email, password, password2])) {
e.preventDefault();
}
if (!checkLength(username, 3, 15)) {
e.preventDefault();
}
if (!checkLength(password, 6, 25)) {
e.preventDefault();
}
if (!checkEmail(email)) {
e.preventDefault();
}
if (!checkPasswordsMatch(password, password2)) {
e.preventDefault();
}
});
解决方案
您的checkRequired
函数目前永远不会返回任何内容:
function checkRequired(inputArray) {
inputArray.forEach(function (input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
return false;
} else {
showSuccess(input, "Looks Good!");
return true;
}
});
}
您在回调内部返回,但回调忽略了它的返回值(并且您仍然不想true
在循环内部返回,您只想true
在所有迭代完成后返回)
要查找第一个无效输入,请使用.find
:
function checkRequired(inputArray) {
const invalidInput = inputArray.find(input => input.value.trim() === '');
if (invalidInput) {
showError(input, `${getFieldName(invalidInput)} is required`);
return false;
}
return true;
}
如果要调用showError
每个无效输入,则:
function checkRequired(inputArray) {
let valid = true;
for (const input of inputArray) {
if (input.value.trim() === '') {
valid = false;
showError(input, `${getFieldName(input)} is required`);
}
}
return valid;
}
推荐阅读
- javascript - 有没有办法从 ejs 获取内容到 node-js 服务器?
- authentication - Not able to access WSO2 IoTS Device Management Console in wso2-iot-3.3.0 when logged in 'admin'
- php - Commas not found in file with php
- python - 为什么 Python 包在 IDLE 3.7 中运行而不在 Atom 中运行?
- java - 服务器在套接字中关闭后,我可以与同一个客户端建立自动先前连接吗
- rxjs - AngularFire2 承诺进入 Observable 类型问题
- ios - UITableView 中点击的单元格从数组中的最后一个单元格返回标签文本,而不是所选的单元格
- html - 如何使用 Angular 6 获取打字稿文件中多个复选框的值?
- angular - 订阅表单字段的特定列表并在 1 更改时访问其所有值
- docker - Kubernetes:如何将 pod 分配给具有特定标签的所有节点