Prevenire l'invio del modulo dopo la convalida di parsley.js

Question

Ho usato parsley.js molte volte e ho letteralmente copiato il codice dal mio ultimo uso di prezzemolo.

Tuttavia, ogni volta che invio il modulo la pagina si aggiorna. preventDefault sembra funzionare sulle mie altre pagine e interrompe la pagina di aggiornamento, ma per qualche motivo quando ho provato ora non funzionerà. Qualcuno può capire perché no?

<script> 
    $(function(){ 
     $("#register_signup").submit(function(e){ 
      e.preventDefault(); 
      var form = $(this); 
      if ($('#rform').parsley('isValid')){ 
       alert('valid'); 
      } 
     }); 
    }); 
</script> 

<form id='rform' name='rform' data-parsley-validate> 
    <input id='reg_password' class='register_input' type='text' autocomplete="off" data-parsley-trigger="change" placeholder='Password' required> 
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required> 

    <input id='register_signup' type="submit" onClick="javascript:$('#rform').parsley('validate');" value='Sign Up' /> 
</form> 

Answer 1

Si sta vincolando l'evento submit a un elemento input. Se si seleziona la jquery $.submit() documentation, si afferma che:

La pubblica un evento viene inviato ad un elemento quando l'utente sta tentando di inviare un modulo. Può essere collegato solo agli elementi <form>. I moduli possono essere inviati facendo clic su un esplicito <input type="submit">, <input type="image"> o <button type="submit"> o premendo Invio quando alcuni elementi del modulo hanno lo stato attivo.

Questo è il tuo problema principale ed è per questo che alert non verrà mai visualizzato (infatti, quel codice non viene mai eseguito).

Vorrei anche cambiare alcune cose:

1. $('#rform').parsley('validate') dovrebbe essere $('#rform').parsley().validate(), supponendo che si sta utilizzando Prezzemolo 2. *
2. $('#rform').parsley('isValid') dovrebbe essere $('#rform').parsley().isValid().
3. Utilizzare $.on() anziché $.submit().
4. Rimuovi onClick dall'elemento register_signup. Dato che stai già usando javascript, lo farei direttamente nel codice javascript invece di onclick. Questa è più una preferenza personale.

Così, il vostro codice sarà qualcosa di simile:

<form id='rform' name='rform'> 
    <input id='reg_password' class='register_input' type='text' autocomplete="off" 
     data-parsley-trigger="change" placeholder='Password' required> 
    <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" 
     placeholder='Confirm password' data-parsley-equalto="#reg_password" required> 

    <input id='register_signup' type="submit" value='Sign Up' /> 
</form> 

<script> 
    $(document).ready(function() { 
     $("#rform").on('submit', function(e){ 
      e.preventDefault(); 
      var form = $(this); 

      form.parsley().validate(); 

      if (form.parsley().isValid()){ 
       alert('valid'); 
      } 
     }); 
    }); 
</script> 

Answer 2

Quando si applica la convalida di pre-dati al modulo, non è necessario applicare javascript al modulo per interrompere l'invio fino all'esecuzione della convalida. Ma se si applica javascript return false quando parsely() non è valido. E assicurati di aver incluso il file di codice parsley.js.