Entonces, tengo un formulario con los pasos 1, 2, 3, etc., donde solo hay 1 formulario enviado al servidor al final del paso 3 (lo que quiero decir con paso, por ejemplo, como este ).

Por ejemplo, el código del formulario se ve así:

HTML

 <div class="form-group"> <label for="jepen_editpro1" class="control-label">Jenjang Pendidikan <span class="required">*</span></label> <select id="jepen_editpro1" name="jepen_editpro[]" class="select form-control cst-profile" required="required"> <option disabled selected value> -- Pilih jenjang -- </option> @foreach ($list_edustage as $dataEdustage) <option value="{{ $dataEdustage->id_jenjang }}" data-jenjang1="{{ $dataEdustage->id_jenjang }}">{{$dataEdustage->nama_jenjang }}</option> @endforeach </select> </div>

Y, por ejemplo, la validación usando Javascript que uso así:

JS

 var jepen_editpro1 = document.getElementById('jepen_editpro1'); if (!jepen_editpro1.checkValidity()) { alert(jepen_editpro1.validationMessage); } else { alert("Enter OK"); }

La validación de JS funciona bien y muestra un mensaje de error de acuerdo con el atributo que especifiqué en el HTML anterior, donde se required .
Pero mi pregunta es, ¿cómo hago un cuadro de advertencia similar al HTML estándar como se muestra a continuación, junto con la función de enfoque automático y el mensaje de error?

Investigué aquí y allá, pero no puedo encontrar la manera. ¿Tengo que hacer un manual para la función de enfoque y el cuadro de mensaje? Gracias por tu ayuda