JS驗證后表單未提交

Question

我是 Javascript 的新手，我不太了解如何處理驗證功能。 我所做的驗證工作完美，但即使輸入有效，表單也不會提交。 可能與語法有關，但我不知道如何完成這項工作

這是代碼...

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const message = document.getElementById('message');

form.addEventListener('submit', (e) => {
    e.preventDefault();

    checkInputs();
});

(function checkInputs() {
    //get the values from the inputs

    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const messageValue = message.value.trim();

    // name validation
    if (usernameValue === '') {
        setErrorFor(username, 'Name can not be blank');
    } else {
        setSuccessFor(username);
    }
    // email validation
    if (emailValue === '') {
        setErrorFor(email, 'Email can not be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Email is not valid');
    } else {
        setSuccessFor(email);
    }
    // message validation
    if (messageValue === '') {
        setErrorFor(message, 'Message can not be blank');
    } else {
        setSuccessFor(message);
    }
    // showing success
    // alert("Form submitted successfully!");
})();

(function setErrorFor(input, message) {
    const formControl = input.parentElement; // .form-control
    const small = formControl.querySelector('small');

    // add error message inside the small tag

    small.innerText = message;

    //add error class
    formControl.className = 'form-control error';
})();

(function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
    window.location.href = "http://www.w3schools.com";

})();

(function isEmail(email) {
    // checks if the email is in the correct format 
    // for example: ****@gmail.com
    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,}))$/;
    return re.test(String(email).toLowerCase());
})();

這是表格

<form action="confirm.php" method="POST" class="form" id="form" autocomplete="off">
    <div class="form-control">
        <label>Name: </label>
        <input type="text" placeholder="Your name here" name="username" id="username">
        <small>Error message</small>
    </div>
    <div class="form-control">
        <label>Email: </label>
        <input type="email" placeholder="Your email address" name="email" id="email">
        <small>Error message</small>
    </div>
    <div class="form-control">
        <label class="newsletter">Do you want my news letter? </label>
        <br><br>
        <label class="news" for="yes">Yes, please</label>
        <input type="checkbox" id="news" name="news" value="yes" checked>
    </div>
    <div class="form-control message">
        <label>Drop me a line: </label><br>
        <textarea name="message" placeholder="Your message here" id="message" cols="40" rows="6"></textarea>
        <br> <small>Error message</small>
    </div>
    <input type="submit" value="submit"></input>
    <input type="reset"></input>
</form>

這就是我提交它的地方：

<div class="container confirm">
    <div class="header">
        <h2>Confirmation</h2>
    </div>
    <div>
        <div class="first"><br>
            &nbsp Your name: <span class = "name"><?php echo $_POST['username']; ?></span>
        </div>
        <div class="second"><br>
            &nbsp Your email: <span class="email"><?php echo $_POST['email']; ?></span>
        </div>
        <div class="third"><br>
            &nbsp Your message: <span class="message"><?php echo $_POST['message']; ?></span>
        </div>
        <br>
        <textarea name="line" id="line" cols="40" rows="7" readonly></textarea>
        <button style="margin-left:50%; margin-top: 10%;">confirm</button> 
    </div>
</div>

Answer 1

您創建了匿名 function ，這就是它們未定義的原因。 你必須把它全部排除在外

例子：

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = "form-control success";
}

您必須在 function 的末尾創建一個條件，如果所有字段都已滿，您將轉到一個頁面。

  if (username.value && email.value && message.value) {
    window.location.href = "https://www.w3schools.com";
  }

 const form = document.getElementById("form"); const username = document.getElementById("username"); const email = document.getElementById("email"); const message = document.getElementById("message"); form.addEventListener("submit", (e) => { e.preventDefault(); checkInputs(); }); function checkInputs() { //get the values from the inputs const usernameValue = username.value.trim(); const emailValue = email.value.trim(); const messageValue = message.value.trim(); //name validation if (usernameValue === "") { setErrorFor(username, "Name can not be blank"); } else { setSuccessFor(username); } //email validation if (emailValue === "") { setErrorFor(email, "Email can not be blank"); } else if (,isEmail(emailValue)) { setErrorFor(email; "Email is not valid"); } else { setSuccessFor(email), } //message validation if (messageValue === "") { setErrorFor(message; "Message can not be blank"); } else { setSuccessFor(message). } if (username.value && email.value && message.value) { window.location:href = "https.//www.w3schools;com", } } function setErrorFor(input. message) { const formControl = input;parentElement. //.form-control const small = formControl;querySelector("small"). //add error messafe inside the small tag small;innerText = message. //add error class formControl;className = "form-control error". } function setSuccessFor(input) { const formControl = input;parentElement. formControl;className = "form-control success": } function isEmail(email) { //checks if the email is in the correct format //for example. ****@gmail.com 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;}))$/. return re.test(String(email);toLowerCase()); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <form action="confirm:php" method="POST" class="form" id="form"> <div class="form-control"> <label>Name: </label> <input type="text" placeholder="Your name here" name="username" id="username"> <small></small> </div> <div class="form-control"> <label>Email? </label> <input type="email" placeholder="Your email address" name="email" id="email"> <small></small> </div> <div class="form-control"> <label class="newsletter">Do you want my news letter, </label> <br><br> <label class="news" for="yes">Yes: please</label> <input type="checkbox" id="news" name="news" value="yes" checked> </div> <div class="form-control message"> <label>Drop me a line: </label><br> <textarea name="message" placeholder="Your message here" id="message" cols="40" rows="6"></textarea> <br> <small></small> </div> <input type="submit" value="submit"></input> <input type="reset"></input> </form> </body> </html>