使用JavaScript

Question

我需要使用JavaScript验证我的表单，因为iPhone / Safari无法识别required属性。我希望在每个空的input字段下方显示单独的错误消息。

我的代码有效，但是当填写字段时，单个错误消息不会消失。此外，我希望所有消息最初出现，对于所有空字段（不是一个一个）。抱歉，我对JavaScript非常陌生。

我的HTML：

<form onsubmit="return validateForm()" method="post" action="form.php" name="english_registration_form" id="english_registration_form">
        <input type="text" id="name" name="name" aria-describedby="name-format" required placeholder="Name">
        <span class="error"><p id="name_error"></p></span>
        <input type="email" id="email" name="email" required placeholder="Email">
        <span class="error"><p id="email_error"></p></span>
        <input type="tel" id="telephone" name="telephone" required placeholder="Telephone">
        <span class="error"><p id="telephone_error"></p></span>
        <button class="register_button" type="submit" value="submit">Register Now</button>
    </form>

我的JavaScript：

<script>
function validateForm() {
var x = document.forms["english_registration_form"]["name"].value;
var y = document.forms["english_registration_form"]["email"].value;
var z = document.forms["english_registration_form"]["telephone"].value;

if (x == null || x == "") {
    nameError = "Please enter your name";
    document.getElementById("name_error").innerHTML = nameError; 
    return false;
} 

else if (y == null || y == "") {
    emailError = "Please enter your email";
    document.getElementById("email_error").innerHTML = emailError;
    return false;
} 

else if (z == null || z == "") {        
    telephoneError = "Please enter your telephone";
    document.getElementById("telephone_error").innerHTML = telephoneError;
    return false;
} 

else {return true;}
}
</script>

感谢您的帮助。

Answer 1

这是一个解决方案，在首次提交表单时显示所有相关错误，并在用户修改相关输入元素中的文本时删除错误。

为了让它在首次运行时显示所有错误，我使用了if语句而不是if else，并使用了一个标志来确定是否应该提交表单。要在修改输入时删除警告，我绑定了输入的onkeyup事件。

我最终删除了输入上的required属性，以便演示可以在支持它们的现代浏览器中运行。

现场演示：

＆＃13;

＆＃13;

document.getElementById("english_registration_form").onsubmit = function () {
    var x = document.forms["english_registration_form"]["name"].value;
    var y = document.forms["english_registration_form"]["email"].value;
    var z = document.forms["english_registration_form"]["telephone"].value;

    var submit = true;

    if (x == null || x == "") {
        nameError = "Please enter your name";
        document.getElementById("name_error").innerHTML = nameError;
        submit = false;
    }

    if (y == null || y == "") {
        emailError = "Please enter your email";
        document.getElementById("email_error").innerHTML = emailError;
        submit = false;
    }

    if (z == null || z == "") {
        telephoneError = "Please enter your telephone";
        document.getElementById("telephone_error").innerHTML = telephoneError;
        submit = false;
    }

    return submit;
}

function removeWarning() {
    document.getElementById(this.id + "_error").innerHTML = "";
}

document.getElementById("name").onkeyup = removeWarning;
document.getElementById("email").onkeyup = removeWarning;
document.getElementById("telephone").onkeyup = removeWarning;

＆＃13;

<form method="post" action="form.php" name="english_registration_form" id="english_registration_form">
    <input type="text" id="name" name="name" aria-describedby="name-format" placeholder="Name"> <span class="error"><p id="name_error"></p></span>

    <input type="email" id="email" name="email" placeholder="Email"> <span class="error"><p id="email_error"></p></span>

    <input type="tel" id="telephone" name="telephone" placeholder="Telephone"> <span class="error"><p id="telephone_error"></p></span>

    <button class="register_button" type="submit" value="submit">Register Now</button>
</form>

＆＃13;

＆＃13;

＆＃13;

JSFiddle版本：https://jsfiddle.net/xga2shec/

Answer 2

首先，我们更改您的函数validateForm，以便它可以处理多个验证。

然后，我们在文档上创建一个DOMContentLoaded事件处理程序，我们调用validateForm函数，因此我们在页面加载时验证字段。

要完成，我们会在输入上创建input事件处理程序，因此每当有人更改其中的任何数据时，表单都会再次验证。

查看已评论的代码，并查看正在运行的工作版本！

＆＃13;

＆＃13;

function validateForm() {
  var valid = true; // creates a boolean variable to return if the form's valid
  
  if (!validateField(this, 'name')) // validates the name
    valid = false;
  
  if (!validateField(this, 'email')) // validates the email (look that we're not using else if)
    valid = false;
  
  if (!validateField(this, 'telephone')) // validates the telephone 
    valid = false;
  
  return valid; // if all the fields are valid, this variable will be true
}

function validateField(context, fieldName) { // function to dynamically validates a field by its name
  var field = document.forms['english_registration_form'][fieldName], // gets the field
      msg = 'Please enter your ' + fieldName, // dynamic message
      errorField = document.getElementById(fieldName + '_error'); // gets the error field
console.log(context);
  // if the context is the form, it's because the Register Now button was clicked, if not, check the caller
  if (context instanceof HTMLFormElement || context.id === fieldName)
    errorField.innerHTML = (field.value === '') ? msg : '';

  return field.value !== ''; // return if the field is fulfilled
}


document.addEventListener('DOMContentLoaded', function() { // when the DOM is ready
  // add event handlers when changing the fields' value
  document.getElementById('name').addEventListener('input', validateForm);
  document.getElementById('email').addEventListener('input', validateForm);
  document.getElementById('telephone').addEventListener('input', validateForm);
  
  // add the event handler for the submit event
  document.getElementById('english_registration_form').addEventListener('submit', validateForm);
});

＆＃13;

<form method="post" action="form.php" name="english_registration_form" id="english_registration_form">
  <input type="text" id="name" name="name" aria-describedby="name-format" required placeholder="Name">
  <span class="error"><p id="name_error"></p></span>
  <input type="email" id="email" name="email" required placeholder="Email">
  <span class="error"><p id="email_error"></p></span>
  <input type="tel" id="telephone" name="telephone" required placeholder="Telephone">
  <span class="error"><p id="telephone_error"></p></span>
  <button class="register_button" type="submit" value="submit">Register Now</button>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您必须使用style.display="none"来隐藏错误 和style.display="block"显示错误

 <script>
    function validateForm() {
    var x = document.forms["english_registration_form"]["name"].value;
    var y = document.forms["english_registration_form"]["email"].value;
    var z = document.forms["english_registration_form"]["telephone"].value;

    if (x == null || x == "") {
        nameError = "Please enter your name";
document.getElementById("name_error").style.display="block";
        document.getElementById("name_error").innerHTML = nameError; 
        return false;
    } 
    else if (x != null || x != "") {
        nameError = "Please enter your name";
        document.getElementById("name_error").style.display="none"; 
        return false;
    } 

     if (y == null || y == "") {
        emailError = "Please enter your email";
 document.getElementById("email_error").style.display="block"; 
        document.getElementById("email_error").innerHTML = emailError;
        return false;
    } 
    else if (y != null || y != "") {
        emailError = "Please enter your email";
        document.getElementById("email_error").style.display="none"; 
        return false;
    } 

     if (z == null || z == "") {        
        telephoneError = "Please enter your telephone";
 document.getElementById("telephone_error").style.display="block"; 
        document.getElementById("telephone_error").innerHTML = telephoneError;
        return false;
    } 

     else if (z != null || z != "") {        
        telephoneError = "Please enter your telephone";
        document.getElementById("telephone_error").style.display="none"; 
        return false;
    } 

    else {return true;}
    }
    </script>

Answer 4

＆＃13;

＆＃13;

function validateForm() {
  var valid = true; // creates a boolean variable to return if the form's valid
  
  if (!validateField(this, 'name')) // validates the name
    valid = false;
  
  if (!validateField(this, 'email')) // validates the email (look that we're not using else if)
    valid = false;
  
  if (!validateField(this, 'telephone')) // validates the telephone 
    valid = false;
  
  return valid; // if all the fields are valid, this variable will be true
}

function validateField(context, fieldName) { // function to dynamically validates a field by its name
  var field = document.forms['english_registration_form'][fieldName], // gets the field
      msg = 'Please enter your ' + fieldName, // dynamic message
      errorField = document.getElementById(fieldName + '_error'); // gets the error field
console.log(context);
  // if the context is the form, it's because the Register Now button was clicked, if not, check the caller
  if (context instanceof HTMLFormElement || context.id === fieldName)
    errorField.innerHTML = (field.value === '') ? msg : '';

  return field.value !== ''; // return if the field is fulfilled
}


document.addEventListener('DOMContentLoaded', function() { // when the DOM is ready
  // add event handlers when changing the fields' value
  document.getElementById('name').addEventListener('input', validateForm);
  document.getElementById('email').addEventListener('input', validateForm);
  document.getElementById('telephone').addEventListener('input', validateForm);
  
  // add the event handler for the submit event
  document.getElementById('english_registration_form').addEventListener('submit', validateForm);
});

＆＃13;

<form method="post" action="form.php" name="english_registration_form" id="english_registration_form">
  <input type="text" id="name" name="name" aria-describedby="name-format" required placeholder="Name">
  <span class="error"><p id="name_error"></p></span>
  <input type="email" id="email" name="email" required placeholder="Email">
  <span class="error"><p id="email_error"></p></span>
  <input type="tel" id="telephone" name="telephone" required placeholder="Telephone">
  <span class="error"><p id="telephone_error"></p></span>
  <button class="register_button" type="submit" value="submit">Register Now</button>
</form>

＆＃13;

＆＃13;

＆＃13;