Início / coding / Perguntas / 79011753
Accepted
Fravadona
Asked: 2024-09-22 21:44:25 +0800 CST

Como posicionar a mensagem de validação do navegador ao usar um componente Select2

  • 772

Estou tentando substituir um padrão <select>por um Select2 em um formulário existente. A lógica do formulário foi escrita em Vanilla JS, com a validação do lado do cliente deixada para o navegador.

O problema é o posicionamento da mensagem de erro gerada pelo navegador quando utilizo um componente Select2:

document.querySelectorAll("[data-is=select2]").forEach(el => {
  // the Select2 component only works with JQuery objects
  let $jqo = $(el);
  $jqo.select2({
    width: "auto",
    placeholder: el.firstElementChild.textContent
  });
  // making sure select2 works with the existing handlers
  $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change")));
});
form {
  width: 20rem;
}
label {
  display: flex;
  align-items: center;
  column-gap: 1ch;
}
/* making select and Select2 occupy the remaining space */
select, .select2-container {
  flex-grow: 1;
}
<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<!-- Standard select example --!>
<form>
  <p>
    <label>
      Greetings:
      <select name="greetings" required>
        <option hidden disabled value="" selected>Select a Greetings</option>
      </select>
    </label>
  <p>
    <input type="submit" value="Standard select">
</form>

<hr>

<!-- Standard select replaced with a Select2 component !-->
<form>
  <p>
    <label>
      Greetings:
      <select data-is="select2" name="greetings" required>
        <option hidden disabled value="" selected>Select2 a Greetings</option>
      </select>
    </label>
  <p>
    <input type="submit" value="Select2 select">
</form>

Como você pode ver depois de clicar nos botões, a mensagem de validação do Select2 é colocada em <label>vez de <select>.

Como posso consertar isso? De preferência sem JQuery.

javascript

1 respostas

  1. Best Answer

    Aplicar label { display: inline-grid; }e posicionar levemente <select>:

    document.querySelectorAll("[data-is=select2]").forEach(el => {
  // the Select2 component only works with JQuery objects
  let $jqo = $(el);
  $jqo.select2({
    width: "auto",
    placeholder: el.firstElementChild.textContent
  });
  // making sure select2 works with the existing handlers
  $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change")));
});
    form {
  width: 20rem;
}
label {
  align-items: center;
  column-gap: 1ch;
  
  display: inline-grid;
  grid-template-columns: auto 1fr;
  position: relative;
  width: 100%;

  .select2-hidden-accessible {
    grid-column-start: 2;
    left: 8px;
    bottom: 0;
  }
}
    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<!-- Standard select example --!>
<form>
  <p>
    <label>
      Greetings:
      <select name="greetings" required>
        <option hidden disabled value="" selected>Select a Greetings</option>
      </select>
    </label>
  <p>
    <input type="submit" value="Standard select">
</form>

<hr>

<!-- Standard select replaced with a Select2 component !-->
<form>
  <p>
    <label>
      Greetings:
      <select data-is="select2" name="greetings" required>
        <option hidden disabled value="" selected>Select2 a Greetings</option>
      </select>
    </label>
  <p>
    <input type="submit" value="Select2 select">
</form>

    • 1

relate perguntas