Po południu używam PHP, HTML5 i Bootstrap. Zbudowałem formularz, który jest rozdzielony na 5 zakładek, aw tym formularzu jest kilka wymaganych pól. Wszystkie wymagane pola wejściowe to „tekst”, a także oznaczone jako wymagane = „wymagane” aria-wymagane = „prawda”.

Po wysłaniu sprawdzanie poprawności html5 przechwytuje błędy, jeśli na bieżącej karcie, jednak chciałbym użyć trochę jquery, aby skupić się z powrotem na poprawnej karcie i polu wejściowym, które nie zostało wypełnione i wyświetlić okno alertu. Nie jestem pewien, czy to jest możliwe ..

Albo to, jeśli łatwiej jest sprawdzić, czy zakładki są wymagane przy zmianie zakładki.

Na stronie jest tylko 1 formularz.

Wielkie dzięki

** edit ** Mam po majsterkowaniu stworzyłem funkcję alertu dla wymaganych pól, ale nadal nie zmieni to zakładki, aby skupić się na wymaganym polu. „productbutton” to identyfikator mojego przycisku wysyłania dla całego formularza. „product_form” to identyfikator mojego formularza.

$('#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;
}
});

Zasadniczo, jeśli error = 1, wyświetli komunikat o błędzie z identyfikatorem wejściowym, który został pominięty. następnie nie przesyła formularza ze zwrotem false. Skupia się na nieodebranym polu i umieszcza czerwoną ramkę wokół pola. Ale nie skupia się na karcie. W przeciwnym razie prześle formularz.