JS Form validation does not happen

Question

When I test this form, the function validateJob works correctly, but nothing seems to happen relating to validateCheckbox or validateEmail. I don't get an error.

For this project, I don't need the form to actually do anything but validate. I'm a beginner, so I'm hoping to discover a small fix rather than totally restructuring what I've got so far.

Here is my script:

<script type="text/javascript">
/* <![CDATA[ */
function validateForm(form){
  var validation = true;
  validation &= validateJob(form);
  validation &= validateEmail(form);
  validation &= validateCheckbox(form);
  return validation;
}
function validateJob(){
    var jobSelected=false;

    for (var i=0; i<3; ++i) {
        if (document.forms[0].job[i].checked == true) {
        jobSelected=true;
        break;
        }
    }
    if (jobSelected == false) {
        window.alert("You must select a job option.");
        return false;
    }
    else {
       return true;
    }
//function to check check box
 function validateCheckbox() {
      var contactSelected = false;
    if (document.forms[0].contact.checked==true) {
       contactSelected=true;
    }
    if (contactSelected == false) {
    window.alert("You must approve being contacted.");
    return false;
    }
    else
    return true;
    }
//end checkbox check
}

function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail() {
    var error="";
    var tfld = trim(document.forms[0].email);                       
 //     value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (document.forms[0].email.value == "") {
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {             
 //test email for illegal characters
        error = "Please enter a valid email address.\n";
    } else if (document.forms[0].email.value.match(illegalChars)) {
        error = "The email address contains illegal characters.\n";
    } 
    window.alert(error);
}

function confirmReset() {
        return resetForm;
}

/* ]]> */
</script>    

Here is my html:

    <form onSubmit="return validateForm(this)">
    <p> <label for="name">Full name: </label>
    <input type="text" name="fullname"></p>
    <p> <label for="email">Email: </label>
    <input type="text" name="email"></p>

    <p> <label for="job">I am applying to be a: </label><br/>
    <input type="radio" name="job">Waiter<br/>
    <input type="radio" name="job">Line cook<br/>
    <input type="radio" name="job">Other</p>
    <p> <label for="contact">Yes, you may contact me </label>
    <input type="checkbox" name="contact" ></p> 
   <input type="submit" value="Submit">
   <input type="reset" /></p>
</form>

Answer 1

You can utilize html required , title attributes, adjust <label> elements placement to after <input> elements; css :invalid , content , adjacent sibling selector +

 :not([type=radio]):invalid + [for]:after { content:attr(title); } [type=radio]:invalid ~ [for]:after, [type=checkbox]:invalid ~ [for]:after { content: attr(title); } :invalid + [for] { color:red; font-style:italic; } 

 <form> <p> Full name: <input type="text" minlength="1" pattern="\\w+" name="fullname" required /> <label title="You must enter full name" for="name"></label> </p> <p> Email: <input type="text" name="email" required /> <label title="Please enter a valid email address" for="email"></label> </p> <p> I am applying to be a: <br/> <input type="radio" name="job" required />Waiter <br/> <input type="radio" name="job" />Line cook <br/> <input type="radio" name="job" />Other <label title="You must select a job option." for="job"></label> <p> Yes, you may contact me <input type="checkbox" name="contact" required /> <label title="You must approve being contacted." for="contact"></label> </p> <p> <input type="submit" value="Submit" /> <input type="reset" /> </p> </form>