javascript表单未验证字段

Question

我正在尝试通过javascript onSubmit验证表单，然后运行php-catcha验证和电子邮件发送操作。问题是，每次我尝试检查字段时，我都只能看到其中一个字段与我的CSS类一起高亮显示(似乎与阻止我的"return false；"有关(。

有人知道线索吗？

这是我的HTML表单代码(你可以在这里看到它的工作原理：https://jsfiddle.net/xfmsLa95/2/(：

<form id="contact-form" class="contact" name="contact-form" method="POST" onsubmit="return checkInputs()" action="indexen.php">
<div class="fields">
<div class="field name">
<input type="text" name="name" id="name" placeholder="Name">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Message</small>
</div>
<div class="field email">
<input type="text" name="email" id="email" placeholder="Email">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Message</small>
</div>
</div>
<div class="field">
<input type="text" name="subject" id="subject" placeholder="Subject">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Message</small>
</div>
<div class="field textarea">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Message..."></textarea>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error Message</small>
</div>
<div class="button-area">
<button type="submit" name="submit">Submit</button>
</div>  
</form>

这是我的验证器.js文件：

const username = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const msg = document.getElementById('message');
function checkInputs() {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const subjectValue = subject.value.trim();
const msgValue = msg.value.trim();
if(usernameValue === '') {
setErrorForUser(username, 'Name cannot be blank');
return false;
}
else{
setSuccessForUser(username);
}
if(emailValue === '') {
setErrorForEmail(email, 'Email cannot be blank');
return false;
}
else if(!isEmail(emailValue)){
setErrorForEmail(email, 'Invalid email');
return false;
}
else {
setSuccessForEmail(email);
}

if(subjectValue === '') {
setErrorForSubject(subject, 'Subject cannot be blank');
return false;
}
else{
setSuccessForSubject(subject);
}
if(msgValue === '') {
setErrorForMsg(msg, 'Message cannot be blank');
return false;
}
else{
setSuccessForMsg(msg);
}
return true;
}
function setErrorForUser(input, message) {
const formControl = input.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field error name';
}
function setSuccessForUser(input) {
const formControl = input.parentElement;
formControl.className = 'field name success';
}
function setErrorForEmail(input, message) {
const formControl = input.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field email error';
}
function setSuccessForEmail(input) {
const formControl = input.parentElement;
formControl.className = 'field email success';
}
function setErrorForMsg(element, message) {
const formControl = element.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field textarea error';
}
function setSuccessForMsg(element) {
const formControl = element.parentElement;
formControl.className = 'field textarea success';
}

function setErrorForSubject(input, message) {
const formControl = input.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field error';
}
function setSuccessForSubject(input) {
const formControl = input.parentElement;
formControl.className = 'field success';
}
function isEmail(email) {
return /^(([^<>()[]\.,;: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,}))$/.test(email);
}

PHP正在运行。

我添加了一些图片来参考这个。这就是我得到的：

错误

但我想得到这样的东西：

示例

要验证每个字段，如下所示：

验证

提前感谢

Answer 1

正如Adwait_Nair所说，您需要在每个条件下删除所有return false。

在这种情况下，我所做的是设置一个变量errors(数组(，在其中添加每个有错误的字段。通过这种方式，我知道是否有错误，以及哪个领域出现了错误。

这样你就可以做一些类似的事情：

function checkInputs() {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const subjectValue = subject.value.trim();
const msgValue = msg.value.trim();
var errors = []; // add errors array
if(usernameValue === '') {
setErrorForUser(username, 'Name cannot be blank');
errors.push('username');
}
else{
setSuccessForUser(username);
}
if(emailValue === '') {
setErrorForEmail(email, 'Email cannot be blank');
errors.push('email');
}
else if(!isEmail(emailValue)){
setErrorForEmail(email, 'Invalid email');
errors.push('email');
}
else {
setSuccessForEmail(email);
}

if(subjectValue === '') {
setErrorForSubject(subject, 'Subject cannot be blank');
errors.push('subject');
}
else{
setSuccessForSubject(subject);
}
if(msgValue === '') {
setErrorForMsg(msg, 'Message cannot be blank');
errors.push('message');
}
else{
setSuccessForMsg(msg);
}
if (errors.length > 0) {
// here you can display error message with fields list
return false;
}
return true;
}

Answer 2

在validator.js中尝试此操作

const username = document.getElementById('name');
const email = document.getElementById('email');
const subject = document.getElementById('subject');
const msg = document.getElementById('message');
function checkInputs() {
let isValid = true;
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const subjectValue = subject.value.trim();
const msgValue = msg.value.trim();
if(usernameValue === '') {
setErrorForUser(username, 'Name cannot be blank');
isValid = false;
}
else{
setSuccessForUser(username);
}
if(emailValue === '') {
setErrorForEmail(email, 'Email cannot be blank');
isValid = false;
}
else if(!isEmail(emailValue)){
setErrorForEmail(email, 'Invalid email');
isValid = false;
}
else {
setSuccessForEmail(email);
}

if(subjectValue === '') {
setErrorForSubject(subject, 'Subject cannot be blank');
isValid = false;
}
else{
setSuccessForSubject(subject);
}
if(msgValue === '') {
setErrorForMsg(msg, 'Message cannot be blank');
isValid = false;
}
else{
setSuccessForMsg(msg);
}
return isValid;
}
function setErrorForUser(input, message) {
const formControl = input.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field error name';
}
function setSuccessForUser(input) {
const formControl = input.parentElement;
formControl.className = 'field name success';
}
function setErrorForEmail(input, message) {
const formControl = input.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field email error';
}
function setSuccessForEmail(input) {
const formControl = input.parentElement;
formControl.className = 'field email success';
}
function setErrorForMsg(element, message) {
const formControl = element.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field textarea error';
}
function setSuccessForMsg(element) {
const formControl = element.parentElement;
formControl.className = 'field textarea success';
}

function setErrorForSubject(input, message) {
const formControl = input.parentElement;

const small = formControl.querySelector('small');
small.innerText = message;
formControl.className = 'field error';
}
function setSuccessForSubject(input) {
const formControl = input.parentElement;
formControl.className = 'field success';
}
function isEmail(email) {
return /^(([^<>()[]\.,;: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,}))$/.test(email);
}

我在这里所做的是声明一个名为isValid的变量，并将其设置为true，每当用户在文件中放入无效内容时，它都会将isValid更改为false，在函数的最后，它会返回isValid。

假设你把用户名和密码放错了，

if(usernameValue === '') {
setErrorForUser(username, 'Name cannot be blank');
isValid = false;
}

运行上面的代码，并且isValid现在为false。当函数被调用时，它将返回isValid，这是false。

现在，假设你把所有东西都放对了，那么isValid永远不会被分配给false。因为isValid默认为true，这意味着它将返回true，意味着所有内容都是有效的

Answer 3

您返回了函数外，这就是为什么它只适用于名称，而不适用于其他任何内容。

基本上，它发现usernameValue等于零，因此运行setErrorForUser(username, 'Name cannot be blank');并返回false。

当您在函数中调用return时，它将返回一些内容，之后将不会运行任何内容。

例如，

如果我们有以下代码-

function doSomething() {
console.log('Cake')
return false;
console.log('Zebra')
}
doSomething()

当我们运行它时，我们会得到"蛋糕"，但不会得到"斑马"，因为我们退出了功能。

所以尽量不要返回false，看看会发生什么