隱藏div正在驗證

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

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 2

喜歡的東西

如果（t.style.display == '無'）

在驗證

？

Answer 3

我會從文檔中刪除相應的輸入字段以防止這些字段被驗證。爲什麼不能使用單選按鈕中的信息來確定是否必須檢查輸入字段？

Answer 4

試試這個

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

Answer 5

一個類添加到所有領域中，這裏oauth_class

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

的div的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 6

只需選中的在 「可見性」 屬性DIV。

你的情況，你可以使用

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

不過，請注意，這會爲你的情況下工作，因爲我已經簽了DIV如何被隱藏。這在任何情況下都不起作用，因爲有幾種方法可以隱藏div，例如我們將「display」屬性設置爲none，或者將不透明度設置爲0. 爲了使其工作在一般情況下，您應該檢查它們是否爲weel，喜歡的東西

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*/ } 


}