Показать собственное сообщение проверки в JavaScript

Question

В настоящее время я разрабатываю форму, которая будет работать на основе функций HTML5 и jQuery. Одна из задач, с которой мне было поручено - убедиться, что собственное сообщение «Пожалуйста, заполните это поле» все еще доступно для браузеров, которые изначально поддерживают проверку.

Моя настройка выглядит так:

|----------|
|   FORM   |
|----------|
===BUTTON===

Форма состоит из нескольких частей, поэтому на всех них находится кнопка global. Затем форма перемещается к следующему разделу, если заполнена.

Вот то, что у меня сейчас, это корректно запускает событие кнопки в форму и вызывает событие submit.

$(".next").click(function() {
    var $incoming = $(".nextPart #" + (currentSlide));
    var incomingID = $incoming.data("cardid");
    var partCode = "form-" + incomingID;

    $("form[name='" + partCode + "']").trigger("submit");
});

$("form").bind('submit', function(event) {
    var goForth = true;

    if(!event.currentTarget.checkValidity()) goForth = false;

    if(!goForth) return false;

    /* Do some stuff with progress bar and more things */

    return true;
});

Однако, несмотря на сбой при отправке формы, сообщения проверки нет. Есть ли способ прагматически запустить это на элементе, или я сделал что-то глупое?

Для пояснения, это скриншот сообщения о проверке, о котором я говорю.

Answer 1

вместо event.currentTarget.checkValidity - сделайте это ...

function checkValidity(elem) {
 // check validity here
 // retun true/false
}

и затем в вашем обработчике отправки сделайте это ...

if(checkValidity(event.currentTarget)) { ... 

Кроме того, обычно это НЕхорошая идея для trigger событий собственного браузера - trigger подходит для пользовательских событий - если вам нужно отправить форму, вы можете вызвать метод submit() объекта формы, подобный этому.

$("form[name='" + partCode + "']").get(0).submit();

Answer 2

Как я описал в своем первом посте, я использовал событие click для кнопки, которая находилась в глобальной области видимости.Затем он отправлял в форму действие submit, которое, хотя и отправляло форму для отправки, не вызывало событие пузыря (каким бы чертом это ни было) для элементов.

Чтобы исправитьэто, я обернул все мои слайды в одну форму вместо кратных.Я сохранил кнопку отправки за пределами слайдов, чтобы она по-прежнему действовала как global элемент навигации.

Удаление события click из этой кнопки и изменение его типа на submit теперь отображается пузырь.

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