JavaScript表單驗證不顯示警報或更改輸入背景色

Question

我制作了此腳本來驗證表單，但是，當我將文本字段保留為空白時，什么也沒發生，輸入框或警報消息沒有紅色的背景，正如我期望的那樣。

function validateForm()
{
/* For all forms in the document */
for(var i in document.forms)
{
    /* Get the forms inputs */
    var inputs = document.forms[i].getElementsByTagName("input");

    for(var j in inputs)
    {
        /* Make sure we don't try to validate the submit button */
        if(inputs[j].type == "text")
        {
            if(inputs[j].value.trim() == "" || inputs[j].value.trim() == null)
            {
                inputs[j].style.backgroundColor = "red";
                alert("Please ensure all boxes are filled in");
                return false;
            }
        }
    }
}
}

這是我的一種形式，如果有幫助的話：

<form name="searchArtists" method="get" onsubmit="return validateForm()">
    <input type="text" name="artists" placeholder="Search Artists" maxlength="255" size="32" />
    <input type="submit" name="submit" value="Search"/>
</form>

Answer 1

將占位符屬性用於占位符文本

<input type="text" name="artists" placeholder="Search Artists"...

我建議不要再留空格

if(inputs[j].value.trim() == "") { ...

Answer 2

在您的代碼中， i是形式， j是輸入。 因此， document.forms[i]和inputs[j]不起作用。

固定的JavaScript函數：

function validateForm()
{
    /* For all forms in the document */
    for(var i in document.forms)
    {
        /* Get the forms inputs */
        var inputs = i.getElementsByTagName("input");

        for(var j in inputs)
        {
            /* Make sure we don't try to validate the submit button */
            /* Trim value to not allow values with only spaces */
            if(j.type == "text")
            {
                if(j.value == null || j.value.trim() == "")
                {
                    j.style.backgroundColor = "red";
                    alert("Please ensure all boxes are filled in");
                    return false;
                }
            }
        }
    }
}

HTML：

<form name="searchArtists" method="get" onsubmit="return validateForm()">
    <input type="text" name="artists" placeholder="Search Artists" maxlength="255" size="32" />
    <button type="submit">Search</button>
</form>

Answer 3

讓我們減少一點，首先為要驗證的元素添加一個ID，我還建議將當前的“值”更改為“占位符”，如下所示：

<input id="artistQueryInput" type="text" name="artists" placeholder="Search Artists" maxlength="255" size="32" />

現在到Javascript：

function validateForm(){
    //Get element
    var inputElement = document.getElementById('artistQueryInput');

    //Get value
    var rawArtistQueryString = inputElement.value;

    //Strip all whitespace
    var baseArtistQueryString = rawArtistQueryString.replace(/ /g, "");

    //Validate string without whitespace
    if((baseArtistQueryString == '') || (baseArtistQueryString == NULL) ||){
         //Assuming j is artistQueryInput
         inputElement.style.backgroundColor = "red";
         alert("Please ensure all boxes are filled in");
         return false;
    }
}