单击事件发生时验证联系表单 Javascript

Question

I'm trying to validate a contact form as the button is clicked.我正在尝试在单击按钮时验证联系表单。
I have window alerts to display when an input is empty, they are based in the html file.当输入为空时，我有 window 警报显示，它们基于 html 文件。 This is a school project and I have to link to them from the js.file, but nothing shows up when the field is empty.这是一个学校项目，我必须从 js.file 链接到它们，但是当该字段为空时没有任何显示。

My html code:我的 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>

My Javascript code:我的 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();
});

Anyone who can help me?谁能帮助我？ Thanks谢谢

Answer 1

As far as I can see, there are two things that you are not doing correctly.据我所知，有两件事你做的不对。

You are calling submit() directly, which you shouldn't.您正在直接调用submit() ，这是您不应该的。 It's because you're tracking the click event listener at the bottom already.这是因为您已经在底部跟踪单击事件侦听器。 Remove the onclick and type="submit" part.删除onclick和type="submit"部分。 It'll refresh the page if you have type="submit" .如果您有type="submit" ，它将刷新页面。

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

You're calling submit() in your event listener before validating the inputs.在验证输入之前，您在事件侦听器中调用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