Отправка формы средствами JavaScript с прохождением встроенной валидации браузера HTML5

Получилось немного заумное название, но смысл от этого не меняется.

Итак, наша задача, чтоб при нажатии на кнопку отправки формы обработчику Submit, выполнилась встроенная в браузер проверка формы, например на обязательные поля, но после неё выполнилась не стандартная функция отправки формы, а наша, написанная на JavaScript.

В данном случаем будем использовать javascript framework jQuery. Так проще обращаться к дереву DOM.

Отправка формы средствами JavaScript с прохождением встроенной валидации браузера HTML5

Как же это сделать?
Предлагаю перехватить обработчик события отправки формы и заменить его на свой. В данном случае выполниться валидация формы, но отправка не произойдёт.

<form id="test-form">
    <input type="text" required="" id="test" /><br />
    <input type="submit" value="Отправить форму" />
</form>
<script type="text/javascript">
$("#test-form").on('submit', function(e){ // создаём обработчик события
    e.preventDefault(); // перехватываем стандартное событие и не выполняем его
    alert($('#test').val()); // выполняем свой код
});
</script>

Пример рабочий, можете пробовать!

Изменить цвет маркера для маркированного списка html

Есть несколько способов изменить цвет маркера в нумерованном списке
Я опишу тот, который выбрал сам)

Начнём с конструкции маркированного списка:
<ul>
      <li>текст 1</li>
      <li>текст 2</li>
      <li>текст 3</li>
</ul>

Для смены цвета маркера на красный создадим такие правила в таблице стилей CSS:
li{
    list-style-type: none; /* Прячем исходные маркеры */
}
li:before {
    color: red; /* Цвет маркера */
    content: "•"; /* Сам маркер */
    padding-right: 10px; /* Расстояние от маркера до текста */
}

Так же таким методом можно сменить и сам маркер, просто указав его символ в строке content: "•";

Обязательный выбор select при помощи атрибута required в HTML5

Многие вебмастера уже давно используют HTML5 в вёрстке своих сайтов. Не секрет, что HTML5 открывает нам некоторые удобства, при проверке ввода данных формы.

Одним из удобств является атрибут required. При его использовании форма не будет отправлена, если элемент с атрибутом required не заполнен.

select при помощи атрибута required в HTML5
С элементами input всё просто, но как быть с select. А очень просто, нужно указать первому (не результативному элементу) значение — «пусто».

Чтоб было проще понять, перейдём к примеру:
<select name="client[pay]" required="">
     <option value="">Выберите вариант оплаты</option>
     <option value="1">Оплата при получении</option>
     <option value="2">Оплата картой VISA / MASTERCARD</option>
</select>
В данном случае, по умолчанию будет выбран выриант
<option value="">Выберите вариант оплаты</option>
с пустым значением value="", а значит и валидатор HTML5 сработает правильно.