validazione semplice semplice con jquery

[ecmedia]

Ciao a tutti,
ho il seguente form:

        
<form action="#" method="post" id="fm_contatti" name="fm_contatti">
          <div class="form_row">
            <div class="form_label">
              <label for="destinatario">Scegli un destinatario:* </label>
            </div>
            <div class="form_input">
              <select name="destinatario" id="destinatario" class="required">
                <option value="">Seleziona</option>
                <option value="">direzione generale</option>
                <option value="">responsabile vendite</option>
                <option value="">responsabile acquisti</option>
                <option value="">gestione preventivi</option>
                <option value="">responsabile forniture su progetto</option>
                <option value="">agente per l'estero</option>
                <option value="">responsabile c.e.d.</option>
              </select>
            </div>
            <div class="spacer"></div>
          </div>
          <fieldset>
            <legend>I tuoi dati</legend>
            <div class="form_row">
              <div class="form_label">
                <label for="cognome">Cognome:*</label>
              </div>
              <div class="form_input">
                <input type="text" id="cognome" name="cognome" class="txtinput required" />
              </div>
              <div class="spacer"></div>
            </div>
            <div class="form_row">
              <div class="form_label">
                <label for="nome">Nome:*</label>
              </div>
              <div class="form_input">
                <input type="text" id="nome" name="nome" class="txtinput required" />
              </div>
              <div class="spacer"></div>
            </div>
            <div class="form_row">
              <div class="form_label">
                <label for="azienda">Azienda:*</label>
              </div>
              <div class="form_input">
                <input type="text" id="azienda" name="azienda" class="txtinput required" />
              </div>
              <div class="spacer"></div>
            </div>
            <div class="form_row">
              <div class="form_label">
                <label for="telefono">Telefono:*</label>
              </div>
              <div class="form_input">
                <input type="text" id="telefono" name="telefono" class="txtinput required" />
              </div>
              <div class="spacer"></div>
            </div>
            <div class="form_row">
              <div class="form_label">
                <label for="fax">Fax:</label>
              </div>
              <div class="form_input">
                <input type="text" id="fax" name="fax" class="txtinput" />
              </div>
              <div class="spacer"></div>
            </div>
            <div class="form_row">
              <div class="form_label">
                <label for="email">Email:*</label>
              </div>
              <div class="form_input">
                <input type="text" id="email" name="email" class="txtinput required" />
              </div>
              <div class="spacer"></div>
            </div>
            <div class="form_submit">
            <input type="submit" name="sb_contatto" id="sb_contatto" value="[ Invia ]" class="sb_button" />
          </div>
        </form>

e ho scritto il seguente codice jquery perchè al submit del form, se un campo ha valore 0 o vuoto, venga circondato da un bordo rosso:

<script type="text/javascript"> $(document).ready(function(){      $("#fm_contatti").submit(function() {       $('.required').each(function() {         if(this.value=='' || this.value==0) { this.css("border","1px dotted #F00");}       });     }); }); </script> 

però non fa assolutamente nulla, e non dà neanche errore... dove sbaglio?

[fcaldera]

riesci a formattare un po' il codice js?
comunque, prova così

$('.required').each(function() {         
  
   var this = $(this).get(0);

   if(this.value=='' || this.value==0) {
      $(this).css("border","1px dotted #F00");
   }   

});

[ecmedia]

Originariamente inviato da fcaldera
riesci a formattare un po' il codice js?
comunque, prova così

$('.required').each(function() {         
  
   var this = $(this).get(0);

   if(this.value=='' || this.value==0) {
      $(this).css("border","1px dotted #F00");
   }   

});

uhmmmm... adesso mette il bordino rosso ma solo per un secondo, poi lo toglie :master:

[fcaldera]

direi che devi aggiungere un return false dentro l'if
o il submit verrà eseguito...

[ecmedia]

Infatti credo sia proprio quello il problema, ma anche mettendo return false non si blocca... ora guardo la documentazione di jquery!

[fcaldera]

Originariamente inviato da ecmedia
Infatti credo sia proprio quello il problema, ma anche mettendo return false non si blocca... ora guardo la documentazione di jquery!

devi far ritornare false al submit:
scrivila così

$("#fm_contatti").submit(function() {      

  return (function() {

      $('.required').each(function() {         
          var this = $(this).get(0);

          if(this.value=='' || this.value==0) {
             $(this).css("border","1px dotted #F00");
             return false;
          }; 
      });
      
      return true;
   })();  

});

Ciao

[ecmedia]

Originariamente inviato da fcaldera
devi far ritornare false al submit:
scrivila così

$("#fm_contatti").submit(function() {      

  return (function() {

      $('.required').each(function() {         
          var this = $(this).get(0);

          if(this.value=='' || this.value==0) {
             $(this).css("border","1px dotted #F00");
             return false;
          }; 
      });
      
      return true;
   })();  

});

Ciao

ho provato ma non cambia nulla!

[ecmedia]

niente, anche con il return false continua ad eseguire il submit :master:
qualcosa non mi torna...

[fcaldera]

Originariamente inviato da ecmedia
niente, anche con il return false continua ad eseguire il submit :master:
qualcosa non mi torna...

sicura di averla ricopiata correttamente? :master: dovrebbe andare senza problemi


per come è scritta però se hai più di un form in pagina potrebbe non funzionare. Posta un link aggiornato alla pagina in questione se puoi