Why does this form keep on submitting even if it fails the validation?

Question

I am new to javascript. I would like someone to explain to me why this form keeps getting submitted even if it fails the validation? I am not allowed to use any validation plugins hence I wrote several functions for validation.

/* EMAIL VALIDATION */
let validateEmailInput = (anEmail) => {
    let emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (anEmail.value.search(emailRegex) !== -1 || anEmail.value.match(emailRegex)) {
        document.getElementById("errorOutput1").innerText = "";
        return true;
    } else {
        document.getElementById("errorOutput1").innerText = "Invalid email!";
        anEmail.focus();
        return false;
    }
}

/* RADIO VALIDATION */
let validateRadioInput = (name) => {
    let radios = document.getElementsByName("part1_radio");
    let isCheckedRadio = false;
    let numRadioChecked = 0;
    let radioChosen;

    for (let i = 0; i < radios.length && !isCheckedRadio; i++) {
        if (radios[i].checked) {
            numRadioChecked++;
            document.getElementById("errorOutput2").innerText = "";
            radioChosen = radios.item(i).id;
            isCheckedRadio = true;
        }
    } //end for
    if (numRadioChecked === 0) {
        document.getElementById("errorOutput2").innerText = "Please select one season!";
        isCheckedRadio = false;
    }
    return isCheckedRadio;
}


/* CHECKBOX VALIDATION */
let validateCheckboxInput = (name) => {
    let checkboxGroup = document.getElementsByName("part1_checkbox");
    let isCheckedCheckbox = false;
    let numCheckboxChecked = 0;
    let checkboxChosen;

    for (let i = 0; i < checkboxGroup.length && !isCheckedCheckbox; i++) {
        if (checkboxGroup[i].checked) {
            numCheckboxChecked++;
            document.getElementById("errorOutput3").innerText = "";
            checkboxChosen = checkboxGroup[i];
            isCheckedCheckbox = true;
        } else {
           // if (numCheckboxChecked === 0) {
            document.getElementById("errorOutput3").innerText = "Please check at least one country!";
            isCheckedCheckbox = false;
        }
    } // end for

    return isCheckedCheckbox;
}

/* SELECT/OPTIONS VALIDATION */
let validateSelectInput = (aSelection) => {
    let selectGroup = document.getElementsByName("part1_select");
    let isCheckedSelect = false;
    let numCheckedSelect = 0;
    let selectedVar;

    if (!selectGroup.value) {
        document.getElementById("errorOutput4").innerText = "Please choose one!";
        isCheckedSelect = false;
    } else {
        isCheckedSelect = true;
        selectedVar = selectGroup.value;
    }
    return isCheckedSelect;
}

This function is called inline like this:

<form id="myForm_part1" name="myForm_part1"action="someemailhere" method="post" onsubmit="validateForm(this.form);" novalidate>

I need help understanding why this happens.

function validateForm(form) {

    let email = document.getElementById("part1_email");
    let radioChoice = document.getElementsByName("part1_radio");
    let checkboxChoice = document.getElementsByName("part1_checkbox");
    let selectChoice = document.getElementById("part1_select");

    $('#myForm_part1').submit(function() {
        if (!validateEmailInput(email) || !validateRadioInput(radioChoice)
        || !validateCheckboxInput(checkboxChoice) || !validateSelectInput(selectChoice)) {
        return false;
        }
    });
}

Answer 1

Use preventDefault() to stop submission if validation fails.

function validateForm(form) {

    let email = document.getElementById("part1_email");
    let radioChoice = document.getElementsByName("part1_radio");
    let checkboxChoice = document.getElementsByName("part1_checkbox");
    let selectChoice = document.getElementById("part1_select");

    $('#myForm_part1').submit(function(event) {
        if (!validateEmailInput(email) || !validateRadioInput(radioChoice)
        || !validateCheckboxInput(checkboxChoice) || !validateSelectInput(selectChoice)) {
            event.preventDefault();
        }
    });
}

Answer 2

There is an issue with the onsubmit handler. Try changing

   onsubmit="validateForm(this.form);"

to

   onsubmit = "return validateForm(this.form);"

Without the return statement the submit handler, which is a function compiled from the attribute value, returns undefined because it doesn't have a return statement.