2017-04-10 72 views
0

我有一個表單,並且正在驗證字段「onblur」。我想要做的是,當用戶點擊提交使任何領域是空的。如何將值傳遞給函數並繼續執行

我想要做的是將值傳遞給一個函數,並在用戶單擊「提交」時運行該函數,但我在這樣做時遇到問題。

有人可以指出我在正確的方向如何解決我的問題。

HTML:

<form method="post" name="registerForms" > 
    <div class="form-group"> 
    <label for="nusernames">Username: <span id="nusernamesErr" class="error">* </span></label> 
    <input type="text" class="form-control" id="nusernames" name="nusernames" onblur="validateForm('nusernames')"> 
    </div> 
    <div class="form-group"> 
    <label for="nemail">Email: <span id="nemailErr" class="error">* </span></label> 
    <input type="email" class="form-control" id="nemail" name="nemail" onblur="validateForm('nemail')"> 
    </div> 
    <input type="submit" class="btn btn-default" value="Submit" id="registerButton"> 
</form> 

JS:

function validateForm(id) 
{ 
    var value = document.getElementById(id).value; 
    var ok = true; 

    if(value === "" || value == null) 
    { 
     document.getElementById(id+'Err').innerHTML = "* <img src='images/unchecked.gif'> Field is required"; 
     ok = false 
     yesNo(ok); 
    } 
    else 
    { 
     document.getElementById(id+'Err').innerHTML = "* "; 
    } 
} 

var button = document.getElementById('#registerButton'); 

button.onclick = function yesNo(ok) 
{ 
    alert("There's something wrong with your information!") 
    if(ok == false) 
    { 
     alert("There's something wrong with your information!") 
     return false; 
    } 
} 

回答

1

像對待模糊事件一樣重複每個輸入字段的驗證。

此外,我建議您將ok值作爲每個輸入字段的屬性。將這些屬性設置爲false,並在validateForm函數中將其更改爲true/false。

提交時,運行您的valodator函數並測試錯誤字段是個好主意。

您可以使用addEventListener來註冊事件處理程序querySelectorAll以選擇元素。

的片段:

function validateForm(id) { 
 
    var value = document.getElementById(id).value; 
 

 
    if (value === "" || value == null) { 
 
     document.getElementById(id+'Err').innerHTML = "* <img src='images/unchecked.gif'> Field is required"; 
 
     document.getElementById(id).setAttribute('yesNo', 'false'); 
 
    } else { 
 
     document.getElementById(id+'Err').innerHTML = "* "; 
 
     document.getElementById(id).setAttribute('yesNo', 'true'); 
 
    } 
 
} 
 

 
document.addEventListener('DOMContentLoaded', function(e) { 
 
    document.querySelectorAll('form[name="registerForms"] input:not([type="submit"])').forEach(function(ele, idx) { 
 
     ele.setAttribute('yesNo', 'false'); 
 
    }); 
 
    document.getElementById('registerButton').addEventListener('click', function(e) { 
 

 
     var ok = true; 
 

 
     document.querySelectorAll('form[name="registerForms"] input:not([type="submit"])').forEach(function(ele, idx) { 
 
      validateForm(ele.id); 
 
      if (ele.getAttribute('yesNo') == 'false') { 
 
       ok = false; 
 
      } 
 
     }); 
 

 
     if (ok == false) { 
 
      console.log("There's something wrong with your information!") 
 
      e.preventDefault(); 
 
     } 
 
    }); 
 
});
<form method="post" name="registerForms" action="http://www.google.com"> 
 
    <div class="form-group"> 
 
     <label for="nusernames">Username: <span id="nusernamesErr" class="error">* </span></label> 
 
     <input type="text" class="form-control" id="nusernames" name="nusernames" onblur="validateForm('nusernames')"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="nemail">Email: <span id="nemailErr" class="error">* </span></label> 
 
     <input type="email" class="form-control" id="nemail" name="nemail" onblur="validateForm('nemail')"> 
 
    </div> 
 
    <input type="submit" class="btn btn-default" value="Submit" id="registerButton"> 
 
</form>

0

你試圖用這種 VAR鍵定義VAR鍵=的document.getElementById( '#registerButton');

,但它需要這與常規的JavaScript

var button = document.getElementById('registerButton'); 

這似乎如果你要附加的驗證上的click事件爲您的提交按鈕,我建議你去解決問題