Avviso se il campo è vuoto

Ho questo codice per il campo di ricerca, ci devo mettere un avviso del tipo "Il campo è vuoto" se l'utente clicca Cerca. In jQuery sarebbe meglio, così esce subito l'avviso senza caricare la pagina.
A me basta un piccolo script, poi il css lo metto io.

Forse ho sbagliato sezione, era meglio in JavaScript :shock:

Codice HTML:

---

<form class="boxricerca" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<label class="assistive-text"> <?php _e( 'Search', 'wp-portfolio' ); ?> </label>
<input type="search" placeholder="<?php esc_attr_e( 'Search', 'wp-portfolio' ); ?>" class="s field" name="s">
<input type="submit" class="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Cerca', 'submit button', 'wp-portfolio' ); ?>" />
  </form><!-- search-form -->

---

Modifica:

Codice HTML:

---

<input type="search" placeholder="<?php esc_attr_e( 'Search', 'wp-portfolio' ); ?>" class="s field" name="s">

---

In:

Codice HTML:

---

<input type="search" placeholder="<?php esc_attr_e( 'Search', 'wp-portfolio' ); ?>" class="s field" name="s" required>

---

Ciao!

Edit: alemoppo è stato più veloce!
Se ti basta il pop-up di default del browse usa la soluzione che ti ha proposto. Se hai bisogno di struttura/stile/interazioni ad-hoc, usa il JavaScript qui sotto:

Assegna un id al form, ad esempio search-form e, tramite jQuery:

Codice:

---

$(function () {
    $('#search-form').submit(function (event) {
        var s = $(this).find('input[name="s"]').val();
       
        if (!s) {
            alert("Il campo è vuoto.");
            event.preventDefault();
        }
    });
});

---