2012-07-05 17 views
6

Sto utilizzando la convalida jquery per il mio modulo di registrazione, funziona perfettamente ma sto incontrando un problema. Controllo se esiste l'e-mail, se esiste un'e-mail, sto ricevendo un messaggio di errore. Ora vorrei modificare questo, quindi, se l'email è gratuita. Il messaggio di errore cambierà in: Questa email è gratuita.jQuery Form convalida Regola remota, messaggio di successo

$(document).ready(function(){ 
    $("#registratieform").validate({ 
     rules: { 
      email: { 
       required: true, 
       email: true, 
       remote: { 
        url: "includes/check_email.php", 
        type: "post", 
        complete: function(data){ 
         if(data.responseText == "false") { 
          alert("Free"); 
          } 
        } 
       }, 
      }, 
     }, 

     messages: { 
      email: { 
       required: "This field is required", 
       email: "Please enter a valid email address", 
       remote: jQuery.format("{0} is already taken") 
      }, 
     }, 
    }); 
}); 

L'avviso funziona, ma questo messaggio deve apparire nell'etichetta in cui si trovano gli errori. È possibile?

+0

Provare senza ID elemento modulo. Può essere che tu possa usare il selettore di classe per gli oggetti del modulo di destinazione. Come questo; $ (". selector"). validate ({ debug: true }) Quindi è possibile prendere l'elemento "id" che non è valido. Successivamente è possibile aggiungere un messaggio all'oggetto di destinazione. Maggiori dettagli http://docs.jquery.com/Plugins/Validation/validate#options – Kerberos

risposta

2

È possibile utilizzare l'opzione success.

Se specificato, l'etichetta di errore viene visualizzata per mostrare un elemento valido. Se viene fornita una stringa, viene aggiunta come classe all'etichetta. Se viene assegnata una funzione, viene chiamata con l'etichetta (come oggetto jQuery) e l'input convalidato (come elemento DOM). L'etichetta può essere utilizzata per aggiungere un testo come "ok!".

L'esempio nel documento: aggiungere una classe "valida" a elementi validi, in stile tramite CSS e aggiungere il testo "Ok!".

$("#myform").validate({ 
    success: function(label) { 
     label.addClass("valid").text("Ok!") 
    }, 
    submitHandler: function() { alert("Submitted!") } 
}); 

Nel codice:

$(document).ready(function(){ 
    $("#registratieform").validate({ 
     rules: { 
      email: { 
       required: true, 
       email: true, 
       remote: { 
        url: "includes/check_email.php", 
        type: "post", 
        complete: function(data){ 
         if(data.responseText == "false") { 
          alert("Free"); 
          } 
        } 
       }, 
      }, 
     }, 

     messages: { 
      email: { 
       required: "This field is required", 
       email: "Please enter a valid email address", 
       remote: jQuery.format("{0} is already taken") 
      }, 
     }, 

     success: function(e) { 
      // Remove error message 
      // Add success message 
     }, 
    }); 
}); 

ho raccomandato letto questo: .validate()

3

@Ruub: Il messaggio remoto deve essere una funzione, e il telecomando in regola solo un URL per il check Esempio:

$("#registratieform").validate({ 
    rules: { 
     email: { 
      required: true, 
      email: true, 
      remote: "includes/check_email.php"      
     } 
    }, 
    messages: { 
     email: { 
      required: "This field is required", 
      email: "Please enter a valid email address", 
      remote: function() { return $.validator.format("{0} is already taken", $("#email").val()) } 
     }, 
    }, 
}); 

Nel lato server (includes/check_email.php):

if (!isValidEmail($_REQUEST['email'])) { 
     echo "false"; 
     exit; 
    } 
3

I`v trovato soluzione per il nostro problema, un trascorrere una giornata a tutti esistito soluzione, ma nessuno mi ha soddisfatto e imparare un po 'di codice sorgente di jqvalidator ho trovato che è facile rendersi conto che

$("#myform").validate({ 
     rules: { 
      somealiasname: { 
       required: true, 
       remote: { 
        url: "www.callthisurl.com/remote", 
        type: "GET", 
        success: function (data) {// Here we got an array of elements for example 
         var result = true, 
          validator = $("#myform").data("validator"), //here we get the validator for current form. We shure that validator is got because during initialization step the form had stored validator once. 
          element = $("#myform").find("input[name=somealiasname]"), 
          currentAlias = element.val(), 
          previous, errors, message, submitted; 

         element = element[0]; 
         previous = validator.previousValue(element); // here we get the cached value of element in jqvalidation system 

         data.forEach(function (it) {//here we check if all alias is uniq for example 
          result = !result ? false : it.alias != currentAlias; 
         }); 

         validator.settings.messages[element.name].remote = previous.originalMessage; // this code I found in the source code of validator (line 1339) 

         if (result) { 
          submitted = validator.formSubmitted; 
          validator.prepareElement(element); 
          validator.formSubmitted = submitted; 
          validator.successList.push(element); 
          delete validator.invalid[element.name]; 
          validator.showErrors(); 
         } else { 
          errors = {}; 
          message = validator.defaultMessage(element, "remote"); 
          errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message; 
          validator.invalid[element.name] = true; 
          validator.showErrors(errors); 
         } 

         previous.valid = result; 
         validator.stopRequest(element, result); 
        }.bind(this) 
       } 
      } 
     } 

`` `

tadam - tutto è perfettamente!

Questo codice è stato testato con jqvalidation 1.14.0

spero, ho potuto aiutare qualcuno

0

Sostituire sottostante codice con il completo funzionamento:

dataFilter: function (data) { 
         return 'false';// If email not exist 
         return 'true';// If email exist (Display message on return true) 
        } 

Si prega di controllare questo sarà Aiuto.

Problemi correlati