Question

以下是用于检查表单中所有元素是否由用户填写的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; 
            }

问题是我使用JavaScript方法来隐藏一些字段。下面是我用它来实现的代码。

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

为了使其可见，我正在使用下面的代码。

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

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

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

以上代码无效。请提供任何替代方法来检查。

Answer 1

如果您不更改显示，则元素的值为style.display。为了检查元素是否可见，请使用：

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

所以在你的代码中：

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

我用小提琴演示了你的案例：http://jsfiddle.net/mattydsw/yz4duqfz/

Answer 2

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

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

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

Answer 3

<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>

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; 
      }
   }
}

尝试这是有效的。我想你错过了一个支架。

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

3 个答案: