一组输入和一个文本区域至少需要一个值

Question

我有五个字段、四个文本和一个文本区域需要填写。但是，它们都不需要值。不过至少有一个。它们已与“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 进行验证？可能会添加每个字段的值以检查 null 或零的计数？

我已经完成了搜索，但我所看到的实际上并没有显示我可以自定义的警报消息窗口。另外，我对 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

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

Answer 3

我假设您希望我们使用您的验证方法，并将您的连接表单作为参数传递。

如果是，您可以使用querySelectorAll 获取您的输入

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

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

我发现您的字段中有一些默认值，因此您需要一些自定义逻辑，因为检查该值是否为空是行不通的。