使用javascript

Question

下面的代码显然有很多错误或其他遗漏的东西，但是我是JavaScript的初学者，试图创建自己的项目。

我试图用我自己的JavaScript验证方法来制作此联系表单，并尝试进行一点搜索，但由于验证表单根本不起作用，我陷入了困境。如果您能帮助我解决此问题，谢谢。

let name = document.querySelector('.name');
let email = document.querySelector('.email');
let submit = document.querySelector('.submit');

function validateName() {
  if (name === null) {
    error.innerHTML = 'Name cannot be blank';
    return false;
  } else if (name < characters.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
    return false;
  }
}

function validateEmail() {
  if (email === null) {
    error.innerHTML = 'Email cannot be blank';
    return false;
  } else if (email < characters.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
    return false;
  }
}

function submitForm() {
  document.querySelector('.submit').submit();
}

.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}

<div class="info">
  <div class="info-form">
    <input class="name" type="text" placeholder="Your Name">
    <br>
    <input class="email" type="email" placeholder="Your Email">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

Answer 1

好吧，您只定义了验证方法但不使用它们，这就是为什么它们无效的原因。

您应将onchange（或oninput之类的事件侦听器，根据您希望显示错误消息的时间）添加到字段中。

例如：

<input class="name" type="text" placeholder="Your Name" onchange="validateName()">

实际上，您还有多个问题：

• error未定义：您应该创建另一个元素并在JS中找到它
• 您必须使用element.value而不是element来访问输入值
• 您在支票中以奇怪的方式使用了未定义的characters；要检查内容的长度，请使用element.value.length

以下是这些修复程序的摘要：

let name = document.querySelector('.name');
let email = document.querySelector('.email');
let submit = document.querySelector('.submit');
let error = document.querySelector('.error');

function validateName() {
  if (!name.value) {
    error.innerHTML = 'Name cannot be blank';
    return false;
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
    return false;
  }
}

function validateEmail() {
  if (!email.value) {
    error.innerHTML = 'Email cannot be blank';
    return false;
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
    return false;
  }
}

function submitForm() {
  document.querySelector('.submit').submit();
}

.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}

<div class="info">
  <div class="info-form">
    <input class="name" type="text" placeholder="Your Name" onchange="validateName()">
    <br>
    <input class="email" type="email" placeholder="Your Email" onchange="validateEmail()">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <div class="error"></div>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

此外，我将对代码进行更多改进，

• 在事件处理程序中使用event.target而不是全局计算元素（也请注意html内部用法的不同）；
• 在内容正常时清除错误div！
• 为什么在处理程序的末尾使用多个return false而不是一个？
• 您不使用submit变量，请摆脱它； submitForm有什么用吗？ （提交时提交？？）不确定，但似乎也应将其删除

let error = document.querySelector('.error');

function validateName(event) {
  let name = event.target;
  if (!name.value) {
    error.innerHTML = 'Name cannot be blank';
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
  } else {
    error.innerHTML = '';
  }
  return false;
}

function validateEmail(event) {
  let email = event.target;
  if (!email.value) {
    error.innerHTML = 'Email cannot be blank';
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
  } else {
    error.innerHTML = '';
  }
  return false;
}

function submitForm() {
  document.querySelector('.submit').submit();
}

.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}

<div class="info">
  <div class="info-form">
    <input class="name" type="text" placeholder="Your Name" onchange="validateName(event)">
    <br>
    <input class="email" type="email" placeholder="Your Email" onchange="validateEmail(event)">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <div class="error"></div>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

Answer 2

您的许多语法和验证方法都已关闭。几点提示：您需要使用name.value和email.value来获取元素的值，还需要使用name.value.length而不是email < characters.length < 5并更改按钮类型以提交而且您可以不必在JS中调用它。

以下是根据您发布的代码的有效代码段。我相信它可以满足您的要求。

let error = document.getElementById('error');

function validateName() {
let name = document.getElementById('name');
  if (!name.value) {
    error.innerHTML = 'Name cannot be blank';
    return false;
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters on name';
    return false;
  }
}

function validateEmail() {
let email = document.getElementById('email');
  if (!email.value) {
    error.innerHTML = 'Email cannot be blank';
    return false;
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 5 characters on email';
    return false;
  }
}

function submitForm() {
  error.innerHTML = ""
  validateEmail()
  validateName()
}

.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}

<div class="info">
  <div class="info-form">
    <input id="name" type="text" placeholder="Your Name">
    <br>
    <input id="email" type="email" placeholder="Your Email">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <br>
    <button class="submit" type = "submit" action="/submit.php" onclick="submitForm()">Submit</button>
    <div id="error">
    </div>
  </div>
</div>

Answer 3

您已经编写了JS函数validateName和validateEmails，但没有在任何地方调用这些函数。而不是选择submitForm（）中的.submit按钮，而是调用这些函数。您在submitForm内部的行什么都不做。 HTML中的onclick（）处理了对函数SubmitForm（）的调用，然后SubmitForm（）应该验证您的表单。

编辑：在编辑电子邮件或姓名字段时，您还可以调用validateName和validateEmails。

Answer 4

是的，就像其他贡献者所说的那样，validate函数编写得很好，只是没有被调用。

您可以将它们添加到输入元素的onchange属性中，也可以像这样在submitform函数中调用它：

function validateName() {
    if (name === null) {
        error.innerHTML = 'Name cannot be blank';
        return false;
    } else if (name < characters.length < 3) {
        error.innerHTML = 'Use more than 3 characters';
        return false;
    }
    return true;
}
function validateEmail() {
    if (email === null) {
        error.innerHTML = 'Email cannot be blank';
        return false;
    } else if (email < characters.length < 5) {
        error.innerHTML = 'Use more than 3 characters on email';
        return false;
    }
    return true;
}

function submitForm(){
    if(validateName() && validateEmail()){
      //Do whatever submitting entails
    }
}

还请记住向您的html中添加一个错误div以显示错误，并像创建名称，电子邮件和提交一样创建一个错误querySelector变量。

您做得很棒！继续努力！

Answer 5

在这里，使用您当前的代码可以使工作最少。我添加了评论以解释发生了什么。不要犹豫，问我任何澄清。就像您说的那样，可以进一步改进代码，但我不想过多地更改并使您感到困惑。

let name = document.querySelector('.name');
let email = document.querySelector('.email');
let submit = document.querySelector('.submit');
let error = document.querySelector('#error'); //Get's the span in the html where the errors will be shown.

function validateName() {
  //Get the text value of name with name.value and care with an empty string.
  if (name.value === "") {
    error.innerHTML = 'Name cannot be blank';
    return false;
    //Get the number of character in the value of the name and see if you have less than 3.
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
    return false;
  }
}

function validateEmail() {
//Get the text value of name with name.value and compare with an empty string.
  if (email.value === "") {
    error.innerHTML = 'Email cannot be blank';
    return false;
    //Get the number of characters in the value of the email and see if you have less than 5.
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
    return false;
  }
}

function submitForm() {
//Instead of calling the function .submit (that doesn't exist). Call the verification functions that you made.
  validateName();
  validateEmail();
}

.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}

<div class="info">
  <div class="info-form">
    <span id="error"></span>
    <input class="name" type="text" placeholder="Your Name">
    <br>
    <input class="email" type="email" placeholder="Your Email">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>