jQuery：chzn-select的验证消息位置

Question

In a form of a web application I would like the message error validation to be showed under the select menu (in particular it is a chzn-select plugin menu). As you can see from this screenshot:

it works for "Metodo Pagamento" select while it does not work for "Cliente" select and this because, I think, Cliente is a chzn-select menu. My boss wants me to move that message under the select. Here is some code from the php-html page generation file:

<style>

 label[for="oggetto[]"] {
 padding: 76px 0px 0px 143px !important;
 }

 label[for="modalita_pagamento"] {  
 padding: 13px 0px 0px 130px !important;
 }

 div.selector {
 overflow: visible;
 }

 #filed-sel {
 padding: 19px !important;
 }

</style>

...

<p>
  <label>Cliente</label>
  <span class="field" id="filed-sel">
     <?php
        if (isset($progetto['id_cliente']))
          $sistema->clienti->selectMenuClienti($progetto['id_cliente']);
        else
          $sistema->clienti->selectMenuClienti(null);
     ?>
  </span>
</p>

...

<p>
  <label>Metodo pagamento</label>
  <span class="field" id="filed-sel">
     <?php
        if (isset($progetto['metodo_pagamento']))
        $sistema->progetti>setPagamentoMetodo($progetto['metodo_pagamento']);
        else
        $sistema->progetti->setPagamentoMetodo(null);
    ?>
  </span>
</p> 

...

public function selectMenuClienti($id_cli) {
    $list_cli = $this->allClienti("");
    echo '<select data-placeholder="Scegli un cliente..." id="client_prj"  name="client_prj" class="chzn-select">';
    echo '<option value=""></option>';

    for($i=0; $i<count($list_cli); $i++) {
        if (($id_cli != null) && ($id_cli == $list_cli[$i]["id"])) {
            echo '<option value="'.$list_cli[$i]["id"].'"  selected>'.$list_cli[$i]["id"].' - '.$list_cli[$i]["cognome"].' '.$list_cli[$i]["nome"].'</option>';
        }
        else {echo '<option value="'.$list_cli[$i]["id"].'">'.$list_cli[$i]["id"].' - '.$list_cli[$i]["cognome"].' '.$list_cli[$i]["nome"].'</option>';
        }
    }

    echo '</select>';
}

Answer 1

You can use the errorPlacement option to change the positioning of the error message

errorPlacement: function (error, element) {
    //check whether chosen plugin is initialized for the element
    if (element.data().chosen) { //or if (element.next().hasClass('chosen-container')) {
        element.next().after(error);
    } else {
        element.after(error);
    }
}

Demo: Fiddle