單擊事件發生時驗證聯系表單 Javascript

Question

我正在嘗試在單擊按鈕時驗證聯系表單。
當輸入為空時，我有 window 警報顯示，它們基於 html 文件。 這是一個學校項目，我必須從 js.file 鏈接到它們，但是當該字段為空時沒有任何顯示。

我的 html 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Card Game</title>


    <!-- Bootstrap style sheet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
<header>
    <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="index.html"> <h1><i class="fa fa-gamepad" aria-hidden="true"></i> Card Game</h1></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li class="active"><a href="contact.html">Contact</a></li>
              </ul>  
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
    </nav>
</header>
<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <form id="signUpForm">
                <h2>Contact us Form<h2>
            </div>
        </div>
         <div class="row">
            <div class="col-sm-12">
                <br>Name: <br>
                <input type="text" name="firstName" id="firstName">
                <span class="error" id="firstNameError">This field cannot be blank</span>
            </div>
            <div class="col-sm-12">
                <br>Last Name: <br>
                <input type="text" name="lastName" id="lastName">
                <span class="error" id="lastNameError">This field cannot be blank</span>
            </div>
            <div class="col-sm-12">
                <br>Telephone: <br>
                <input type="text" name="phone" id="phone">
                <span class="error" id="phoneError">Please enter a correct phone number</span>
            </div>
            <div class="col-sm-12">
                <br>Email: <br>
                <input type="text" name="email" id="email">
                <span class="error" id="emailError">Please enter a correct email address</span>
            </div>
            <div class="col-sm-12">
                <button type="submit" onclick="submit()" id="submitContact" class="m-t-30">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
            </div>
            </form>
        </div>
    </div>
</section>
<footer>
    Copyright <i class="fa fa-copyright" aria-hidden="true"></i> Noroff
</footer>
<script src="scripts/contact.js"></script>
</body>
</html>

我的 Javascript 代碼：

    var name =  document.getElementById('firstName');
    var lName = document.getElementById('lastName');
    var phone = document.getElementById('phone');
    var email = document.getElementById('email');
    var validateForm = document.getElementById('submitContact');
    var signUpForm = document.getElementById('signUpForm');

//Function that validates wether or not there is input on first and last name
    function validateName(){
    if (name.length == 0) {
        window.alert(document.getElementById(firstNameError));
        return false;
}
    if (lName.length == 0) {
        window.alert(document.getElementById(lastNameError));
        return false;
    }}


//Function for validating that there is input in the phone input, and that the input matches the phone value
function validatePhone() {
    if(phone.length == 0){
        window.alert(document.getElementById(phoneError));
        return false; 
    }
    if (phone.matches(/^(\+{1}\d{2,3}\s?[(]{1}\d{1,3}[)]{1}\s?\d+|\+\d{2,3}\s{1}\d+|\d+){1}[\s|-]?\d+([\s|-]?\d+){1,2}$/)){
        window.alert(document.getElementById(phoneError));
    }}

//Function for validating that there is input in the email, and that the email matches the email value
function validateEmail (){
    if(email.length == 0){
        window.alert(document.getElementById(emailError));
        return false;
    }
    if (email.value == /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) {
        window.alert(document.getElementById(emailError));
        return false;
}}


validateForm.addEventListener('click', function (event) {
    signUpForm.submit();
});

誰能幫助我？ 謝謝

Answer 1

據我所知，有兩件事你做的不對。

您正在直接調用submit() ，這是您不應該的。 這是因為您已經在底部跟蹤單擊事件偵聽器。 刪除onclick和type="submit"部分。 如果您有type="submit" ，它將刷新頁面。

<button id="submitContact" class="m-t-30">Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></button>

在驗證輸入之前，您在事件偵聽器中調用submit() 。

validateForm.addEventListener('click', function (event) {
    // TODO: Put your validation codes here.
    signUpForm.submit();
});

單擊事件發生時驗證聯系表單 Javascript

問題描述

1 個解決方案

解決方案1
0 2019-11-05 21:09:58

單擊事件發生時驗證聯系表單 Javascript

問題描述

1 個解決方案

解決方案1 0 2019-11-05 21:09:58

解決方案1
0 2019-11-05 21:09:58