Во второй половине дня я использую PHP, HTML5 и Bootstrap. Я построил форму, которая разделена на 5 вкладок, и в этой форме есть несколько обязательных полей. Все обязательные поля ввода являются 'текстовыми' и также помечены обязательными = "обязательными" aria-required = "true".

При отправке проверки html5 ловит ошибки, если на текущей вкладке, однако я хотел бы использовать немного jquery, чтобы сосредоточиться на правильной вкладке и поле ввода, которое не было заполнено, и отобразить окно предупреждения. Я не уверен, если это возможно ..

Либо так, если проще проверить, что вкладки обязательны для заполнения, поля на вкладке меняются.

На странице только 1 форма.

Большое спасибо

** редактировать ** После того как я повозился, я создал функцию оповещения для обязательных полей, но она все равно не изменит вкладку, чтобы сосредоточиться на нужном поле. 'productbutton' - это идентификатор моей кнопки отправки для всей формы. «product_form» - это идентификатор моей формы.

$('#productbutton').click(function(){
var error = 0;
var msg = 'An Error Has Occured.\n\nRequired Fields missed are :\n';
$(':input[required]', '#product_form').each(function(){
    $(this).css('border','2px solid green');
    if($(this).val() == ''){
        msg += '\n' + $(this).attr('id') + ' Is A Required Field..';
        $(this).css('border','2px solid red');
        if(error == 0){ $(this).focus(); }
        error = 1;
    }
});
if(error == 1) {
    alert(msg);
    return false;
} else {
    return true;
}
});

Ба, если ошибка = 1, появится сообщение об ошибке с пропущенным идентификатором ввода. затем он не может отправить форму с возвратом false. Он фокусируется на пропущенном поле и размещает красную рамку вокруг поля. Но он не фокусируется на вкладке. В противном случае он отправит форму.