javascript return false or preventDefault is not working

Question

I know this has to be something obvious, but even after following instructions elsewhere, I'm getting the same result.

The alert on the JavaScript call comes up, but after clicking okay, it continues to submit the form.

function validateBadEmail(inputText)
{
    var mailformat = /.ru$/
    if(inputText.value.match(mailformat))
    {
        alert("This is not an accepted email address");
        inputText.preventDefault();
    }
}

Here is how I'm calling it:

<input type="button" id="submit-btn" class="btn btn-blue btn-less-padding" name="submit-btn" value="<?= $txt_submit_btn; ?>" tabindex="0" onclick="return validateBadEmail(document.the_form.email)"/>

I have tried this by using return false instead of preventDefault but that's having the same effect.

If I change the onclick to onsubmit it doesn't even call the javascript at all.

Edit: clearly preventDefault is the wrong way, but if I try to do it this way, I'm still getting the same results

function validateBadEmail(inputText)
{
    var mailformat = /.ru$/
    if(inputText.value.match(mailformat))
    {
        alert("This is not an accepted email address");
        return false;
    }
}

Answer 1

First: Your validateBadEmail function is missing a return instruction. Set one return value for either IF case.

EDIT

Second: Validating input data must be done in the onsubmit event handler of the containing FORM. Handling onclick events in the input controls won't prevent the form being sumbitted.