1

我在 JavaScript 中有点菜鸟。我正在尝试验证联系表单，但我的 JavaScript 都没有工作，但我想我的事件监听器是问题，因为我的页面仍然在单击按钮时刷新。它在控制台中返回错误Uncaught TypeError: Cannot read property 'addEventListener' of null请帮忙！

const form = document.getElementById('form');
const client = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('text-message');

// Show input error message
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const small = formControl.querySelector('small');
  small.innerText = message;
}

// Show success outline
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

// Check email is valid
function checkEmail(input) {
  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,}))$/;
  if (re.test(input.value.trim())) {
    showSuccess(input);
  } else {
    showError(input, 'Email is not valid');
  }

}

// Check required fields
function checkRequired(inputArr) {
  inputArr.forEach(function(input) {
    if (input.value.trim() === '') {
      showError(input, `${getFieldName(input)} is required`);
    } else {
      showSuccess(input);
    }
  });
}


// Get fieldname
function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

// Event listeners
form.addEventListener('submit', function(e) {
  e.preventDefault();

  checkRequired([client, email, message]);
  checkEmail(email);
  
});
.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 30rem;
  padding: 0rem 10rem; }
  .container .submit-btn {
    margin-top: 4rem; }
  .container input {
    width: 20rem;
    height: 2rem;
    background-color: var(--color-blue);
    border: 1px solid #0652b9;
    border-color: #0652b9;
    border-radius: 2.5rem;
    display: block;
    color: #161616;
    text-indent: 15px; }
  .container input:focus {
    outline: 0;
    border-color: #ff8b2c; }
  .container textarea {
    width: 20rem;
    height: 10rem;
    background-color: var(--color-blue);
    border: 1px solid #0652b9;
    border-color: #0652b9;
    border-radius: 1.5rem;
    color: #161616;
    text-indent: 15px; }
  .container textarea:focus {
    outline: 0;
    border-color: #ff8b2c; }
  .container ::placeholder {
    color: #161616;
    opacity: 0.5; }
  .container .form-control {
    position: relative; }
  .container .form-control.success input {
    border-color: green; }
  .container .form-control.error input {
    border-color: red; }
  .container .form-control small {
    color: red;
    bottom: 0;
    left: 0;
    visibility: hidden; }
  .container .form-control.error small {
    visibility: visible; }
    
    
button {
  width: 7rem;
  height: 3rem;
  background: #0652b9;
  border-style: none;
  border-radius: 2.5rem;
  color: #ffffff; }
<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="../css/main.css" />
</head>
<body>

      <section class="container">
        <form action="/" method="GET" id="form" class="form">
            <div class="form-control">
                <!-- <label for="name">Name</label> -->
                <input type="text" id="client" placeholder="Your name">
                <small>Error message</small>
            </div>

            <div class="form-control">
                <!-- <label for="email">Email</label> -->
                <input type="text" id="email" placeholder="Your email">
                <small>Error message</small>
            </div>

            <div class="form-control">
                <!-- <label for="message">Message</label> -->
                <textarea name="message" id="text-message"  rows="7" placeholder="Say something about your project"></textarea>
                <small>Error message</small>
            </div>
            <button class="submit-btn" type="submit">Send message</button>
            
        </form>
    </section>
 
      <script src="validation.js"></script>
</body>
</html>

4

2 回答 2

1

您的变量客户端选择器应该是客户端而不是名称

const form = document.getElementById('form');
const client = document.getElementById('client');
const email = document.getElementById('email');
const message = document.getElementById('text-message');

// Show input error message
function showError(input, message) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
  const small = formControl.querySelector('small');
  small.innerText = message;
}

// Show success outline
function showSuccess(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

// Check email is valid
function checkEmail(input) {
  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,}))$/;
  if (re.test(input.value.trim())) {
    showSuccess(input);
  } else {
    showError(input, 'Email is not valid');
  }

}

// Check required fields
function checkRequired(inputArr) {
  inputArr.forEach(function(input) {
    if (input.value.trim() === '') {
      showError(input, `${getFieldName(input)} is required`);
    } else {
      showSuccess(input);
    }
  });
}


// Get fieldname
function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

// Event listeners
form.addEventListener('submit', function(e) {
  e.preventDefault();

  checkRequired([client, email, message]);
  checkEmail(email);
  
});
.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 30rem;
  padding: 0rem 10rem; }
  .container .submit-btn {
    margin-top: 4rem; }
  .container input {
    width: 20rem;
    height: 2rem;
    background-color: var(--color-blue);
    border: 1px solid #0652b9;
    border-color: #0652b9;
    border-radius: 2.5rem;
    display: block;
    color: #161616;
    text-indent: 15px; }
  .container input:focus {
    outline: 0;
    border-color: #ff8b2c; }
  .container textarea {
    width: 20rem;
    height: 10rem;
    background-color: var(--color-blue);
    border: 1px solid #0652b9;
    border-color: #0652b9;
    border-radius: 1.5rem;
    color: #161616;
    text-indent: 15px; }
  .container textarea:focus {
    outline: 0;
    border-color: #ff8b2c; }
  .container ::placeholder {
    color: #161616;
    opacity: 0.5; }
  .container .form-control {
    position: relative; }
  .container .form-control.success input {
    border-color: green; }
  .container .form-control.error input {
    border-color: red; }
  .container .form-control small {
    color: red;
    bottom: 0;
    left: 0;
    visibility: hidden; }
  .container .form-control.error small {
    visibility: visible; }
    
    
button {
  width: 7rem;
  height: 3rem;
  background: #0652b9;
  border-style: none;
  border-radius: 2.5rem;
  color: #ffffff; }
<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="../css/main.css" />
</head>
<body>

      <section class="container">
        <form action="/" method="GET" id="form" class="form">
            <div class="form-control">
                <!-- <label for="name">Name</label> -->
                <input type="text" id="client" placeholder="Your name">
                <small>Error message</small>
            </div>

            <div class="form-control">
                <!-- <label for="email">Email</label> -->
                <input type="text" id="email" placeholder="Your email">
                <small>Error message</small>
            </div>

            <div class="form-control">
                <!-- <label for="message">Message</label> -->
                <textarea name="message" id="text-message"  rows="7" placeholder="Say something about your project"></textarea>
                <small>Error message</small>
            </div>
            <button class="submit-btn" type="submit">Send message</button>
            
        </form>
    </section>
 
      <script src="validation.js"></script>
</body>
</html>

于 2021-03-23T08:22:39.023 回答
1

它被提交，因为那里有一个错误。只是改变：

const client = document.getElementById('name');

至

const client = document.getElementById('client');
于 2021-03-23T08:28:10.970 回答