Javascript顯示文本框後的驗證消息

我想驗證使用JavaScript的窗體。在按鈕點擊功能我已經調用了一個JavaScript函數，我已經在文本框後顯示了消息。我點擊按鈕的次數相同的次數消息顯示在現有驗證消息的正下方。請幫我這裏去我的代碼：Javascript顯示文本框後的驗證消息

function check() { 
     var v = true; 
     if ((document.getElementById('firstname').value == "")) { 

      $('#firstname').after('Validation message'); 
      document.getElementById('firstname').style.borderColor='#DA394B'; 

      v = false; 

     } 
     if ((document.getElementById('lastname').value == "")) { 
      $('#lastname').after('Some validation text'); 
      document.getElementById('lastname').style.borderColor = '#DA394B'; 

      v = false; 
     } 
     return v; 
    }

來源

2016-10-21 nwemember

假設我瞭解什麼是v實現。我可能不會因爲v（我討厭一個字母變量名...）。

試試這個：

function check() { 
     var v = true; 
     if ((document.getElementById('firstname').value == "")) { 

      if ($('#firstnameMessage').length <= 0) 
      { 
       $('#firstname').after('<p id="firstnameMessage">Validation message</p>'); 
       document.getElementById('firstname').style.borderColor='#DA394B'; 
      } 

      v = false; 
     } 

     if ((document.getElementById('lastname').value == "")) { 
      if ($('#lastnameMessage').length <= 0) 
      { 
       $('#lastname').after('<p id="lastnameMessage">Some validation text</p>'); 
       document.getElementById('lastname').style.borderColor = '#DA394B'; 
      } 

      v = false; 
     } 
     return v; 
}

簡單撥弄顯示此工作：https://jsfiddle.net/srLt7wo0/

來源

2016-10-21 16:23:37 user1289451

我很抱歉，其實我必須有書面的「IsValid的」，而不是唯一的「V」。謝謝你的答案，我會嘗試，請考慮這一些 – nwemember

仍然是同樣的問題。一些驗證文本顯示不止一次 – nwemember

@nwemember我更新了我的答案。單字母變量是完全可以接受的。我只是不在乎他們 – user1289451

使用下面的解決方案在HTML使用一個單獨的元素已顯示。之後將插入每http://api.jquery.com/after/ 的另一個元素錯誤信息。如果你使用。經過你必須檢查你尚未添加元素到你的HTML

HTML

<input id="firstname" type="text"/><div id="firstnameMessage"></div> 
<input id="lastname" type="text"/><div id="lastnameMessage"></div>

function check() { 
    $("#firstnameMessage,#lastnameMessage").text(''); // clear message, reset border color 
    document.getElementById('firstname').style.borderColor=''; 
    document.getElementById('lastname').style.borderColor=''; 

    var isValid = true; 
    if ((document.getElementById('firstname').value == "")) { 

     $('#firstnameMessage').text('First name is required'); 
     document.getElementById('firstname').style.borderColor='#DA394B'; 

     isValid = false; 
    } 

    if ((document.getElementById('lastname').value == "")) { 
     $('#lastnameMessage').text('Last name is required'); 
     document.getElementById('lastname').style.borderColor='#DA394B'; 

     isValid = false; 
    } 
    return isValid; 
}

來源

2016-10-21 16:49:55 silentsod

這可能會更好。在用戶將信息輸入到輸入並再次檢查後，它將刪除消息和樣式。 – user1289451

這兩個解決方案的工作，他可以處理其他地方的消息。更大的問題是他在使用之後不知道它有什麼影響。 – silentsod

我不知道已經明白你的問題但也許這可以幫助你:)

window.firstname = document.getElementById('firstname') 
 
window.lastname = document.getElementById('lastname') 
 
window.issue = document.getElementById('issue') 
 

 
function check() { 
 
    
 
    if(firstname.value == '' || lastname.value == '') { 
 
    issue.innerHTML = 'Please, use correct credentials.' 
 
    } else { 
 
    issue.innerHTML = '' 
 
    } 
 
    
 
}

<input id="firstname" /> 
 
<input id="lastname" /> 
 

 
<button onclick="check()"> 
 
Check 
 
</button> 
 

 
<div id="issue" style="color:red;"></div>

來源

2016-10-21 17:01:07

這應該工作，如果我理解你。

它將只添加一個消息，不管你有多少次點擊

function check() { 
    var v = true; 
    if ((document.getElementById('firstname').value == "")) { 

     $('#message').remove() 
     $('#firstname').after('<span id='message'>Validation message</span>'); 
     document.getElementById('firstname').style.borderColor='#DA394B'; 

     v = false; 

    } 
    if ((document.getElementById('lastname').value == "")) { 

     $('#message').remove() 
     $('#lastname').after('<span id='message'>Some validation text</span>'); 
     document.getElementById('lastname').style.borderColor = '#DA394B'; 

     v = false; 
    } 
    return v; 
}

來源

2016-10-21 18:56:16 Tonza

Javascript顯示文本框後的驗證消息

回答

相關問題