javascript 表单未验证字段

Question

我正在尝试通过 javascript onSubmit 验证表单，然后运行 php 验证码验证和电子邮件发送操作。问题是，每次我尝试检查这些字段时，我只能看到其中一个用我的 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>

这是我的 validator.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 正在工作。

我正在添加一些图片以供参考。这是我得到的：

error

但我想得到这样的东西：

example

要像这样验证每个字段的字段：

validation

提前致谢，

Answer 1

您 return 退出了函数，这就是为什么它只适用于名称，而不适用于其他任何东西。

基本上，发生的事情是发现 usernameValue 等于零，所以运行 setErrorForUser(username, 'Name cannot be blank'); return错误。

当您在函数中调用 return 时，它会 return 一些东西，之后不会运行任何东西。

例如，

如果我们有以下代码 -

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

doSomething()

而我们运行它，我们会得到 'Cake' 而不是 'Zebra' 因为我们 return 退出了函数。

所以尽量不要 return 错误，看看会发生什么

Answer 2

正如Advait_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 3

在 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，并且在最后函数，它将 return isValid.

假设您将用户名和密码输入错误，

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

上面的代码运行，isValid 现在是 false。当函数被调用时，它会 return isValid，这是 false.

现在，假设您输入的所有内容都正确，那么 isValid 永远不会被分配 false。因为 isValid 默认为 true，这意味着它将 return true 意味着一切都有效

javascript 表单未验证字段

javascript form not validating fields

html

javascript

php

forms

validation