[M-ka]

$(document).ready(function() {
    $('#email').blur(function() {onMailHandler();}); // запуск по событию blur (я так понял, можно выкинуть)
    //$('#email').on('blur', onMailHandler); //мне так больше нравиться
});

function onMailHandler() {
    var mail = $('#email'),
        hasError = true;
    if(mail.val() != '') {
        var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
        if(pattern.test(mail.val())){
            showMessage('Верно');
            hasError = false;
        } else {
            showMessage('Не верно');
        }
    } else {
        showMessage('Поле email не должно быть пустым');
    }

    function showMessage(mgs) {
        var color = '#569b44';
        if (!msg) {return;}
        if (hasError) {color = '#ff0000';}
        mail.css({'border' : '1px solid ' + color});
        $('#valid').text(mgs);
    }
    return hasError;
}

onMailHandler(); -- запуск ф-ии валидации с любого доступного места, возвтращает true на ошибку... можно переименовать по вашему вкусу или сделать другой возврат для проверки, была ли ошибка...

Вставить вызов перед if (err==0) $(form).submit();

if(onMailHandler()) {err++;} // увеличили счетчик при ответе с наличием ошибки... хотя в коде выше глупо чето с ним делать, просто с false заменить на true при наличии ошибки и не париться (ну или наоборот, ну как вот у меня сделано с hasError)

Вроде как то так, может че пропустил, но уже мелочи.
Валидации не трогал и логику, просто разделил для более удобного чтения, правда не уверен в куске "1px solid ' + color", если цвет будет приходить но все же не ставиться, тогда сделать иф с полным прописыванием параметров ну или разделить, отдельно установив толщину, тип и цвет бордера... Просто мне не приходилось с ходу так собирать бордеры, но должно работать