使用javascript检查表单元素是否可见

下面是JavaScript函数，用于检查表单中的所有元素是否由用户填写

var frm_elements = envelopes.elements;
        for (i = 0; i < frm_elements.length; i++) 
        {
            field_type = frm_elements[i].type.toLowerCase(); 
            switch (field_type)     
            {     
                case "text":        
                if(frm_elements[i].value == "" || frm_elements[i].value == null)
                {
                    if(frm_elements[i].style.display == "block")
                    {
                            alert("Enter All Text Box details");
                        return false;
                        break;
                    }
                }
                case "select-one":
                case "select-multi":         
                if(frm_elements[i].selectedIndex == -1)
                {
                    if(frm_elements[i].style.display == "block")
                    {
                        alert("Select Any Field From Drop Down");
                        return false;
                        break;
                    }
                }

                default:
                break; 
            }

为了便于查看，我正在使用下面的一段代码

document.getElementById('stTxtMapName1').style.display = 'none';

所以我必须只检查用户可见的字段。。。所以我用这个条件来检查它是否可见

if(frm_elements[i].style.display == "block")
                        {
                                alert("Enter All Text Box details");
                            return false;
                            break;
                        }

---

上述代码不起作用。请提供其他检查方法。

如果不更改显示，则元素的样式为空。显示值为空。要检查元素是否可见，请使用：

document.getElementById('elementId').style.display != "none"

因此，在您的代码中：

if(frm_elements[i].style.display != "none")

---

---

我在fiddle中创建了一个案例演示：

您可以使用jQuery使用的相同实现并检查offsetHeight和offsetWidth，例如：

function isVisible(element) {
    return element.offsetWidth > 0 || element.offsetHeight > 0;
}

if(isVisible(frm_elements[i])) {
    // perform actions
}

Javascript代码

function validate()
{
    frm_elements = form1.elements;
     for (i = 0; i < frm_elements.length; i++) 
      {
          field_type = frm_elements[i].type.toLowerCase(); 
          switch (field_type)     
          {     
             case "text":        
             if(frm_elements[i].value == "" || frm_elements[i].value == null)
            {
                if(frm_elements[i].style.display == "block")
                {
                   alert("Enter All Text Box details");
                   return false;
                   break;
                }
            }
            case "select-one":
            case "select-multi":         
            if(frm_elements[i].selectedIndex == -1)
            {
                if(frm_elements[i].style.display == "block")
                {
                  alert("Select Any Field From Drop Down");
                   return false;
                   break;
                }
          }
          default:
          break; 
      }
   }
}

函数验证（）
{
frm_元素=表1.1元素；
对于（i=0；i

---

试试这个，这是工作。我想你错过了一个大括号。

document.getElementById（'sttxtmaname1'）。style.display='block'；为了让它可见！一般来说，表单元素可以是

inline

或

inline block

，但不能是

block

。检查

！=“没有”

。我甚至试过。。。那也没用。。。

<form name="form1" id="form1" onsubmit=" return validate()" >

  <input type="text" name="abc" id="abc" style="display:none;"> <br />
  <input type="text" name="xyz" id="xyz" style="display:none;"> <br />
  <input type="text" name="pqr" id="pqr" style="display:block;"> 
  <input type="submit" name="submit"  >
  </form>

function validate()
{
    frm_elements = form1.elements;
     for (i = 0; i < frm_elements.length; i++) 
      {
          field_type = frm_elements[i].type.toLowerCase(); 
          switch (field_type)     
          {     
             case "text":        
             if(frm_elements[i].value == "" || frm_elements[i].value == null)
            {
                if(frm_elements[i].style.display == "block")
                {
                   alert("Enter All Text Box details");
                   return false;
                   break;
                }
            }
            case "select-one":
            case "select-multi":         
            if(frm_elements[i].selectedIndex == -1)
            {
                if(frm_elements[i].style.display == "block")
                {
                  alert("Select Any Field From Drop Down");
                   return false;
                   break;
                }
          }
          default:
          break; 
      }
   }
}