PopUp. Модальное окно. Форма
 

Добрый вечер, помогите разобраться с ошибкой. Плиз. Дана форма
<div id="popup_contact" class="feedback popup_block">
<div class="form">
<form name="contact_form" action="#" method="post" id="form_main"></form> <!--onsubmit="return validateForm();"-->
</div>
</div>

решила перенести событие onsubmit из HTML разметки в JS файл. Слетело.
document.getElementById('form_main').addEventListe ner('submit', function validateForm() {
valid = true;
if ( document.contact_form.username.value == '' ) {
document.contact_form.username.style.border = '2px solid red';
valid = false;
}
if ( document.contact_form.email.value == '' ) {
document.contact_form.email.style.border = '2px solid red';
valid = false;
}
return valid;
});

Необходимо сделать проверку полей формы при отправке на валидацию, если поля пустые то подсветка поля

NastyaNewer,
У вас в форме нет полей - форма пустая. Что проверять?

<div id="popup_contact" class="feedback popup_block">
<div class="form">
<form name="contact_form" action="#" method="post" class="form_main"></form> <!--onsubmit="return validateForm();"-->
<label><input type="text" id="username" name="username" class="username field_name field"></label>
<label><input type="text" id="useremail" name="email" class="email_text field_email field" ></label>
<label><textarea class="space_message field_message field" name="message_people" id="message" rows="10"></textarea></label></p>
<label for="submit"></label>
<label><input type="submit" id="submit" value="Отправить" class="button_message"></label>
<label for="popup_contact" class="close_block"></label>

</div>
</div>

<form name="contact_form" action="#" method="post" class="form_main"></form>

и далее по коду

</form>

Это ошибка, поля формы находятся вне ее, а закрывающий тег формы не понять что закрывает.

Должно быть

<form name="contact_form" action="#" method="post" class="form_main">
... далее ее поля

Спасибо. Как отработчик события настроить в JS?

Может это сначала, а для древних браузеров JS?

http://htmlbook.ru/html/input/required
http://htmlbook.ru/html/input/placeholder
http://htmlbook.ru/html/input/pattern

http://htmlbook.ru/css/required
http://htmlbook.ru/css/invalid
http://htmlbook.ru/css/valid

Спасибо. Мне необходимо сделать это все чисто в отдельном файле JS. Чтобы HTML, CSS были чистыми. Использовать DOM и События

Уже не получится, форма то уже "замарала" HTML. )

Форма всегда есть на странице или добавляется на не динамически?

У меня она работала первоначально, мне поставили задачу использовать DOM и события, вызова функций из HTML убрать:))))