一組輸入和一個文本區域至少需要一個值

Question

我有五個字段，四個文本和一個textarea是必需的。 但是，它們都不需要值。 至少有一個。 它們已與“ onair”類組合在一起，如果可能的話，我想將它們集成到我當前的validate（）腳本中，或者至少顯示一條警告消息，指示必須輸入至少一個字段。

這是我在/ head中獲得表單驗證器的內容。

<script language="javascript">
<!--
function validate(join) 
{
    //
    // Check for a first name.
    //
    if (join.fname.value.length == 0)
{
        alert("Please enter your first name.");
        join.fname.focus();
            return false;
}
    //
    // Check for a last name.
    //
    if (join.lname.value.length == 0)
{
        alert("Please enter your last name.");
        join.lname.focus();
        return false;
}
    //
    // Check for an e-mail address.
    //
    if (join.email.value.length < 5)
{
        alert("An email address is required to proceed.");
        join.email.focus();
        return false;
}
    //
    // Check for a valid e-mail address.
    //
    if (join.email.value.indexOf("@",".") == -1)
{
        alert("A valid e-mail address is required to proceed.");
        join.email.focus();
        return false;
}
    // It continues.

</script>

如您所見，在大多數情況下，這樣做確實很好。 但是，這些僅適用於單個字段。 這是我遇到的問題。

<input type="text" class="onair" id="facebook" name="facebook" />
<input type="text" class="onair" id="skype" name="skype"" />
<input type="text" class="onair" id="twitter" name="twitter" />
<input type="text" class="onair" id="web" name="website" />
<textarea class="onair" id="other" name="other"></textarea>

我想知道的是，有沒有一種方法可以通過類名而不是ID進行驗證？ 可能會添加每個字段的值以檢查是否為空或零的計數？

我已經進行了搜索，但是實際上我所看到的都沒有顯示可以自定義的警報消息窗口。 另外，我對jQuery和JavaScript還是很陌生，因此如果您可以添加開頭的詳細信息並告訴我如果它不能已經集成到腳本中的話，將不勝枚舉。 謝謝！

您可以在此處查看頁面... https://www.itsjustgenoj.com/wp-content/test.html

注意：對CSS很抱歉。 我在上面的示例中將其全部刪除。

Answer 1

這是一些可以驗證它們的字段。

var all = document.querySelectorAll(".onair");
var supplied = 0;
for(var i = 0;i < all.length;i++){
    var input = all[i];
    if(input.value.length > 0)
    {
        //get the value by "input.value"
        supplied++;
    }
}

if(supplied < 1){ alert("Your Message Here"); }
else{
    //do whatever after 
}

Answer 2

我想您想讓我們將您的join方法作為參數傳遞給您的validate方法。

如果是，則可以使用querySelectorAll來獲取輸入

function validate(join) {
  onairInputs = join.querySelectorAll('.onair')

  onairInputs.forEach((x) => console.log(x.value))
}

我看到您的字段中有一些默認值，因此您將需要一些自定義邏輯，因為檢查該值是否為空將不起作用。

Answer 3

function validate(join) 
{
//
// Check for a first name.
//
if (join.fname.value.length > 0)
{   
    // do more validation if you want
    return true;
}
//
// Check for a last name.
//
else if (join.lname.value.length > 0)
{
    return true;
}
//
// Check for an e-mail address.
//
else if (join.email.value.length >0)
{
    if (join.email.value.length < 5)
    {
       alert("An email address is required to proceed.");
       join.email.focus();
       return false;
    }
    else if (join.email.value.indexOf("@",".") == -1)
    {
      alert("A valid e-mail address is required to proceed.");
      join.email.focus();
      return false;
    }
    else
    {
        return true;
    }  
}


// It continues.

else if(join.fname.value.length == 0)
{  
    alert("Please enter your first name.");
    join.fname.focus();
    return false
}
else if(join.lname.value.length == 0)
{
   alert("Please enter your last  name.");
   join.lname.focus();
   return false
}
// It continues.
} End function