So I have a form with steps 1, 2, 3 and so on, where there is only 1 form submit to the server at the end of step 3 (what I mean by step for example like this).

For example, the form code looks like this:

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>

And for example validation using Javascript I use like this:

JS

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

The JS validation is running well, displaying an error message according to the attribute I specified in the HTML above, where it is required.
But my question is, how do I make a warning box similar to the standard HTML as shown below, along with the auto focus function and the error message?

I've done research here and there but can't find a way.. Do I have to make a manual for the focus function and the message box? Thank you for your help