Question

在这两个单选按钮中存在。

点击此按钮后会显示div并隐藏。

点击提交按钮验证。

当div显示验证正在进行时。

但是当隐藏div时，验证也会发生。

如何防止隐藏div的验证。

这是我的代码：

    <script type="text/javascript">

function checkRadio(frmName, rbGroupName)
{ 
    var radios = frmName.elements[rbGroupName]; 
    for (var i=0; i <radios.length; i++)
    { 
        if (radios[i].checked)
        { 
            return true; 
        } 
    } 
    return false; 
} 
    function chk_oauth(objForm)
   {
  var user = objForm.user.value;
  var pass = objForm.password.value;

  if(user =="")
  {
        alert("Type email");
        return false;
  }

  if(pass =="")
  {
        alert("Type pasword");
        return false;
  }

  if (!checkRadio(objForm,"oauth_option"))
  {
        alert("Please select option");
        return false;
  }
  }          
  </script>
  <form name = "frmOauth" enctype="multipart/form-data" action = "" method = "post"    onsubmit="javascript:return chk_oauth(this);">
   <label><input type="radio" name="oauth_option" id="oauth_yes" value="Yes" onclick="toggle(this)" >Yes</label>
    <label><input type="radio" name="oauth_option" id="oauth_no" value="No" onclick="toggle(this)">No</label>
     <div class="oauth_div" id="oauth_div" >
     Email Address* <br />
      <input type="text" class="input-profile-other" placeholder="Email" id="user" name="user" />
      Password * <br/>
     <input type="password" class="input-profile-other" type="password" id="password" name="password" placeholder="password" />
        </div>
       <input class="btn-home-search1" type="submit" value="Go" name="oauth_submit" id="oauth_submit">
        </form>

             <script type="text/javascript">
            var t = document.getElementById('oauth_div');

         function toggle(switchElement) {
          if (switchElement.id == 'oauth_yes'){
          t.style.display = '';
          //email.setAttribute('type','email');
             t.style.visibility = 'visible';
           }else{
            t.style.display = 'none';
             //email.setAttribute('type','text');
              t.style.visibility = 'hidden';
            }
          }

               [].forEach.call( document.forms.frmOauth.oauth_option, function(radio){
             if( radio.checked ) {
                     toggle( radio );   
             }
               });
                </script>

Answer 1

在此oauth_class

中为该div中的所有字段添加一个类

<form name = "frmOauth" enctype="multipart/form-data" action = "" method = "post" onsubmit="javascript:return chk_oauth(this);">
<label><input type="radio" name="oauth_option" id="oauth_yes" value="Yes" onclick="toggle(this)" >Yes</label>
<label><input type="radio" name="oauth_option" id="oauth_no" value="No" onclick="toggle(this)">No</label>
<div class="oauth_div" id="oauth_div" >
Email Address* <br />
<input type="text" class="input-profile-other oauth_class" placeholder="Email" id="user" name="user" />
Password * <br/>
<input type="password" class="input-profile-other oauth_class" type="password" id="password" name="password" placeholder="password" />
</div>
<input class="btn-home-search1" type="submit" value="Go" name="oauth_submit" id="oauth_submit">
</form>

的Javascript

var t = document.getElementById('oauth_div');
function toggle(switchElement) {
if (switchElement.id == 'oauth_yes'){
t.style.display = '';
var temp = document.getElementByClass('oauth_class');
temp.style.display = ''
//email.setAttribute('type','email');
t.style.visibility = 'visible';
}else{
t.style.display = 'none';
//email.setAttribute('type','text');
t.style.visibility = 'hidden';
t.style.visibility = 'hidden';

}
}

Answer 2

像

这样的东西

if（t.style.display =='none'）

验证中的

？

Answer 3

function chk_oauth(objForm)
   {
if(document.getElementById('oauth_div').style.display=='none')
return;
  var user = objForm.user.value;
  var pass = objForm.password.value;

  if(user =="")
  {
        alert("Type email");
        return false;
  }

  if(pass =="")
  {
        alert("Type pasword");
        return false;
  }

  if (!checkRadio(objForm,"oauth_option"))
  {
        alert("Please select option");
        return false;
  }
  }

Answer 4

只需检查div的“visibility”属性。

在您的情况下，您可以使用

 document.getElementById("oauth_div").style.visibility == "visible"

但请注意，这样可以适用于您的情况，因为我已经检查了div是如何隐藏的。这在每种情况下都不起作用，因为有几种方法可以隐藏div，例如我们将“display”属性设置为none，或者将opacity设置为0。为了使它一般工作，你应该检查这些，如

function isVisible(elem) {
var cmpstyle = window.getComputedStyle(elem,null);
if (parseFloat(cmpstyle.opacity) > 0 &&
cmpstyle.visibility != 'hidden' &&
cmpstyle.display != 'none') {
return true;
} else return false;
}

所以：

function chk_oauth(objForm)
{
    var oauth_div = document.getElementById("oauth_div");

if (isVisible(oauth_div)) {
                var user = objForm.user.value;
          var pass = objForm.password.value;

          if(user =="")
          {
                alert("Type email");
                return false;
          }

          if(pass =="")
          {
                alert("Type pasword");
                return false;
          }

          if (!checkRadio(objForm,"oauth_option"))
          {
                alert("Please select option");
                return false;
          }
} else { /*Do whatever you want to happen when div is hidden*/ }


}

Answer 5

我会从文档中删除相应的输入字段，以防止验证这些字段。为什么你不能使用单选按钮中的信息来确定是否必须检查输入字段？

Answer 6

试试这个

function chk_oauth(objForm)
   {
  var user = objForm.user.value;
  var pass = objForm.password.value;

    if(document.getElementById("oauth_div").style.visibility != "none"){
      if(user =="")
      {
            alert("Type email");
            return false;
      }

      if(pass =="")
      {
            alert("Type pasword");
            return false;
      }
    }
      if (!checkRadio(objForm,"oauth_option"))
      {
            alert("Please select option");
            return false;
      }
      }

隐藏的div正在进行验证

6 个答案: