Question

所以我尝试创建一个循环遍历表单元素的函数并检查元素的长度，如果是，则更改类，以便可以对它们进行不同的样式设置。我假设的代码可以工作，我在控制台中没有出现任何错误，所以我无法确切地指出出了什么问题。如果有人能告诉我为什么这不起作用或如何修复它会很棒！三江源！

function validate_form(){
 var form = document.forms['form_name']; //store form into a variable
 var validated = true; // store return value for onsubmit attribute
     for(i=0; i<form.elements.length; i++){
      if(form.elements[i].value.length){  // check if form elements are empty
           form.elements[i].className = "validate_failed";  // if elements are empty, add a class that will style them
           validated = false;
           return validated;
    } else{
        validated = true;
        return validated;
    }
    return validated;
}
return validated;
}

Answer 1

尝试

function validate_form(){
  var form = document.forms['form_name']; //store form into a variable
  for(var i=0; i<form.elements.length; i++){
    if(form.elements[i].value.length===0){  // check if form elements are empty
      form.elements[i].className = "validate_failed";  // if elements are empty, add a class that will style them
      return false;
  }
  return true;
}

假设

<form onsubmit="return validate_form()" ...

或使其全部不引人注目

window.onload=function() {
  document.forms['form_name'].onsubmit=function() {
    for(var i=0; i<this.elements.length; i++){
      this.elements[i].className = "";
      if(this.elements[i].value.length===0){  // check if form elements are empty
        this.elements[i].className = "validate_failed";  // if elements are empty, add a class that will style them
        return false;
      }
      return true;
    }
  }
}

Answer 2

因为你在第一次循环中返回validated，所以你只会检查表单的第一个元素。您只需要设置validated，并在循环后返回它（或者在您第一次将其设置为false时返回，具体取决于您要执行的操作）。

此外，像Joe评论的那样，您应该var i而不仅仅是i，以便i不是全球性的。

Answer 3

以下代码适用于空元素

if(!form.elements[i].value.length){

OR

if(form.elements[i].value.length === 0){

我的表单验证功能失败了什么？

3 个答案: