javascript表單不驗證欄位-有解無憂

我正在嘗試通過 javascript onSubmit 驗證表單，然后運行 ??php captcha 驗證和電子郵件發送操作。問題是，每次我嘗試檢查這些欄位時，我只能看到其中一個用我的 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 正在作業。

我正在添加一些圖片來參考這個。這就是我得到的：

錯誤

但我想得到這樣的東西：

例子

要像這樣驗證每個欄位的欄位：

驗證

提前致謝，

uj5u.com熱心網友回復：

正如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;
}

uj5u.com熱心網友回復：

試試這個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現在是假的。當函式被呼叫時，它會回傳isValid，這是假的。

現在，假設您正確放置了所有內容，然后isValid永遠不會分配false。因為 isValid 是默認的true，這意味著它將回傳true意味著一切都是有效的

uj5u.com熱心網友回復：

您從函式中回傳，這就是為什么它只適用于名稱，而不適用于其他任何東西。

基本上，發生的事情是它發現usernameValue等于沒有，所以它運行setErrorForUser(username, 'Name cannot be blank'); 并回傳錯誤。

當你呼叫return一個函式時，它會回傳一些東西，之后不會運行任何東西。

例如，

如果我們有以下代碼 -

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

doSomething()

我們運行它，當我們從函式中回傳時，我們會得到 'Cake' 而不是 'Zebra'。

所以盡量不要回傳 false 看看會發生什么

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/419159.html

標籤：

上一篇：如何/在哪里可以測驗xml應用程式

下一篇：第一次=注冊