表單驗證成功時顯示隱藏的元素

Question

我試圖顯示一個div如果HTML表單的所有字段都至少填充了一個字符。

<input name="name" id="name" value="" required placeholder="Name"></input>
<input name="surname" id="surname" value="" required placeholder="Surname"></input>
<input name="email" id="email" value="" required placeholder="Email"></input>
<textarea name="comments" value="" required placeholder="Comments"></textarea>
<div id="test" style="display:none;">test</div>

我有這個劇本

<script type="text/javascript">
    if(document.getElementById('name').value!='' && 
       document.getElementById('surname').value!='' && 
       document.getElementById('email').value!='' && 
       document.getElementById('message').value!=''){
           document.getElementById('test').style.display = 'block';
    }
</script>

但這不起作用。 為什么？ 我試圖將腳本從文件的頂部移至底部，但div'test'始終處於隱藏狀態。 我的抄本怎么了？

Answer 1

您需要在每次更改字段時調用該腳本。

例如：

<input name="name" id="name" value="" required placeholder="Name" onchange="myFunction()"></input>
etc.

<script type="text/javascript">
    function myFunction() {
        if(document.getElementById('name').value!='' &&
           document.getElementById('surname').value!='' &&
           document.getElementById('email').value!='' &&
           document.getElementById('message').value!=''){
               document.getElementById('test').style.display = 'block';
        }
    }
</script>

Answer 2

我看到你鏈接了jQuery。 為什么不使用它呢？

$('input').on('change', function(){
    if($('#name').val() != '' && $('#surname').val() != '' && $('#email').val() != '' && $('#comments').val() != ''){
        $('#test').show();
    }else{
        //This part is optional
        $('#test').hide();
    }
});

您還應該在文本區域中添加id="comments"

Answer 3

您有兩個錯誤，首先您沒有為腳本中使用的textarea分配任何ID。 其次，每次用戶進行任何更改時都必須調用該函數，因此您需要綁定onchange事件。

因此，應為：

HTML：

<input name="name" id="name" value="" required placeholder="Name" onchange="myUpdateFunction()"></input>
<input name="surname" id="surname" value="" required placeholder="Surname" onchange="myUpdateFunction()"></input>
<input name="email" id="email" value="" required placeholder="Email" onchange="myUpdateFunction()"></input>
<textarea name="comments" id="message" value="" required placeholder="Comments" onchange="myUpdateFunction()"></textarea>
<div id="test" style="display:none;">test</div>

JavaScript：

<script type="text/javascript">
function myUpdateFunction() {
    if(document.getElementById('name').value!='' &&
       document.getElementById('surname').value!='' &&
       document.getElementById('email').value!='' &&
       document.getElementById('message').value!='') {
           document.getElementById('test').style.display = 'block';
    }
}
</script>

Answer 4

第一個問題是腳本何時運行。 按照編碼，它將在頁面呈現腳本后立即運行，並且不再運行。

您可能希望將其連接到每個文本框的on change事件，以便您知道何時顯示隱藏字段。

第二，“消息”元素在哪里？ 那應該是評論嗎？ 如果是這樣，則注釋缺少一個ID（具有名稱但沒有ID）

Answer 5

http://jsfiddle.net/7hafkwhj/1/

首先，將元素包裝在html標簽形式中可能是一個好主意：

<form id="form">
    <input name="name" type="text" placeholder="Name" required></input>
    <input name="surname" type="text" placeholder="Surname" required></input>
    <input name="email" type="email" placeholder="Email" required></input>
    <textarea name="comment" placeholder="Comments" required></textarea>
</form>
<div id="message">Ok, roger</div>

另外，我不明白為什么您應該使用jQuery來處理此類問題。 您可以使用本機Javascript做同樣的事情：

(function() {
    var form = document.getElementById('form'),
    message = document.getElementById('message');

    function makeCheck() 
    {
        i = 0;
        while(i < form.elements.length) {
            if(form.elements[i].value === '')
            {
                return false;
            }
            i++;
        }
        return true;
    }

    function displayMessage() 
    {
        if(makeCheck()) 
        {
            message.style.display = 'block';
        }
        else 
        {
            message.style.display = 'hide';
        }
    }

    for(i = 0; i < form.elements.length; i++)
    {
        form.elements[i].onkeyup = function () {
            displayMessage();
        };
    }
})();