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

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