Require at least one value for a group of inputs and a textarea

Question

I have five fields, four text and one textarea that need to be required. However, they all don't need a value. At least one does though. They have been grouped with the class 'onair' and what I want is to integrate them into my current validate() script in the header if possible or at least show an alert message indicating that at least one field must be entered.

Here's what I got for a form validator in the /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>

As you can see, for the most part, this does fine. However, these only work for a single field. This is the group I'm having trouble with.

<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>

What I'm wondering is, is there a way to validate by class name instead of by Id? Something that might add the values of each field to check for a count of null or zero?

I've done my searching around, but nothing I've seen actually shows an alert message window that I can customize myself. Also, I'm fairly new to jQuery and JavaScript, so if you could add the opening details and tell me where it goes if it cannot be integrated into my script already, that would be appreciated. Thanks!

You can view the page here... https://www.itsjustgenoj.com/wp-content/test.html

Note: I'm sorry about the CSS. I stripped it all out on the example above.

Answer 1

Here's Something to validate them fields.

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

I presume you want to us your validate method with your join form passed as an argument.

If yes you can use querySelectorAll to get your inputs

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

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

I see that you have some default values in your fields so you will want some custom logic there, as checking that value is simply empty will not work.

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