yazılımcı arkadaşlar bunu nasıl yapabilirim?

görseldeki gibi modal yaptım lakin eğer bunları boş bırakıp kayıt ettirirsem 2.görseldeki gibi sağ üste şöyle bir modal çıkmasını istiyorum bunu nasıl bağlantıyı sağlatıcam bilmiyorum sadece mantığını anlatabilir misiniz?

teşekkür ederim

Sweet Alert ile yapabilirsiniz. https://sweetalert.js.org/guides/

hocam şöyle bir inputum var mesala ben bunu boş kayıt edersem o hatayı verdirmek için sweet alertle baglantıyı nasıl kurdurcam burda takıldım

<div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="Email" class="form-control" placeholder="">
                                    </div>

jquery ile yapabilirsiniz. Form submit edildiğinde jquery event ile alıp kontrol ederseniz, ona göre alert çıkmasını sağlayabilirsiniz. Sorun yoksa da yine jquery yardımıyla urlye verileri post edebilirsiniz.

jQuery ve SweetAlert ile şu şekilde uyarı verdirebilirsiniz.

$("button").click(function(event){
    event.preventDefault();

    if ($("input[name=name_surname]").val() == "") {
        Swal.fire({
            icon: "warning",
            title: "Oops...",
            text: "Ad soyad girilmedi!",
            confirmButtonText: "Tamam"
        });
        return;
    } else if ($("input[name=email]").val() == "") {
        Swal.fire({
            icon: "warning",
            title: "Oops...",
            text: "E-posta girilmedi!",
            confirmButtonText: "Tamam"
        });
        return;
    } else if ($(".input[name=password]").val() == "") {
        Swal.fire({
            icon: "warning",
            title: "Oops...",
            text: "Şifre girilmedi!",
            confirmButtonText: "Tamam"
        });
        return;
    }

    $.ajax({
        url: "",
        type: "POST",
        dataType: "JSON",
        data: $("form").serialize(),
        success: function(json) {
            switch (json.status) {
                case "already":
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: "Kullanıcı zaten mevcut!",
                        confirmButtonText: "Tamam"
                    });
                break;
                case "ok":
                    Swal.fire({
                        icon: "success",
                        title: "Tebrikler",
                        text: "Başarıyla kayıt oldunuz.",
                        confirmButtonText: "Tamam"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "/";
                        }
                    })
                break;
            }
        }
    });
});

Nacizane tavsiyem empty bir siteye başlarken sıfırdan kodlayacaksanız bootstrap alt yapısını kullanın zaten eklenti olarak ekleyip test etmeniz gereken bir yapı kalmayacak. Çünkü bootstrap içerisinde default olarak modalbox ve alertbox gibi scriptler hazır gelir ve kullanmak daha kolaydır. Ayrıca responsive dir ekstra css ile de uğraşmazsınız. Example lar ile empty bir site kodlamaya başlayabilirsiniz.

https://getbootstrap.com/docs/5.2/examples/