JQuery-Validierungs-Plugin - benutzerdefinierte dynamische Nachricht vom Server setzen

Question

Wie fangen und zeigen benutzerdefinierte Fehlermeldung von der Server-Seite auf der HTML-Seite?

function getAlertMessage() { 
    $.ajax({ 
     type : "POST", 
     url : "getAlert.do", 
     success : function(data) { 
      data.alertmsg //How to set this msg to validatename property in messages Attribute 
     }, 
     error : function() { 
      alert("No Court No details found"); 
     } 
    }); 
} 

---

$(document).ready(function() { 
    $("#register-form").validate({ 
     rules : { 
     username : { 
      required : true, 
      validname : true, 
      minlength : 4 
     } 
     }, 
     messages : { 
     username : { 
     required : "Please Enter UserName", 
     validname : getAlertMessage(), //it does not worked here 
     minlength : "UserName is Too Short"}}, 
     errorPlacement : function(error,element) { 
      $(element).closest('.form-group').find('.help-block').html(
error.html()); 
}, 
     highlight : function(element) { 
     $(element).closest('.form-group') 
     .removeClass('has-success') 
     .addClass('has-error'); 
      }, 
     unhighlight : function(element, 
     errorClass, validClass) { 
     $(element).closest('.form-group') 
     .removeClass('has-error') 
     .addClass('has-success'); 
     $(element).closest('.form-group') 
     .find('.help-block').html('');}, 
      submitHandler : function(form) { 
      form.submit();}});}); 

Answer 1

Warum würden Sie brauchen diese zu tun, wenn ein remote Methode ist bereits vorhanden?

Da dies nichts anderes als ein Serveranruf zur Validierung des Feldes username zu sein scheint, verwenden Sie die für diesen Zweck entwickelte Methode. Senden Sie über den Server true, false oder eine JSON-codierte Zeichenfolge zurück, die eine dynamische benutzerdefinierte Überprüfungsmeldung darstellt.

Der Wert des Feldes durch remote validiert wird bereits standardmäßig gesendet, so dass Sie nur die url und type Parameter definieren müssen.

$(document).ready(function() { 
    $("#register-form").validate({ 
     rules: { 
      username: { 
       required: true, 
       minlength: 4, 
       remote: { 
        url: 'getAlert.do', 
        type: 'POST' 
       } 
      } 
     }, 
     messages: { 
      username: { 
       required: "Please Enter UserName", 
       minlength: "UserName is Too Short" 
       // DO NOT NEED 'remote' message since it's already coming from server 
      } 
     }, ..... 

Das ist alles, was Sie innerhalb rules und messages definieren bräuchten. Der Wert username wird an Ihre getAlert.do Funktion auf dem Server gesendet.

Dann müsste getAlert.dogetAlert.do eine true zurücksenden, wenn die Validierung bestanden werden soll, und eine JSON-codierte Zeichenfolge, die die Fehlermeldung darstellt, wenn die Validierung fehlschlagen soll.

Siehe: jqueryvalidation.org/remote-method/

Answer 2

Ich habe auf diese Art von Problem gearbeitet und bekam schließlich arbeiten sie. Es gibt nichts Ähnliches online und das fühlt sich an wie ein guter Platz, um es zu setzen, da es sich direkt auf die gestellte Frage bezieht.

Also, was ich brauchte, war eine serverseitige Funktion, um eine Überprüfung zu tun und zu entscheiden, welche Fehlermeldung zurückgegeben werden, basierend auf dem Überprüfen einer Datenbank (ein bisschen wie ein cms). Diese Nachricht musste dem Benutzer angezeigt werden und das Feld entsprechend validieren.

Es ist vielleicht nicht der beste/sauberste Weg, aber es funktioniert und ich denke nicht, dass es so schlimm ist! Grundsätzlich muss auf der Seite ein verstecktes Feld zum Speichern der Fehlermeldung vorhanden sein. Also hier ist, wie ich es an die Arbeit:

jQuery.validator.unobtrusive.adapters.add("customValidation", [], function (options) { 
    options.rules["remote"] = { 
     url: "/api/CustomValidation", 
     type: "post", 
     data: { 
      fieldValue: function() { return options.element.value; } 
     }, 
     beforeSend : function() { 
      // Show loading gif 
      $('#loader').show(); 
     }, 
     dataFilter: function (data) { 
      // if the API returns a JSON string then this is needed 
      var result = JSON.parse(data); 

      if (result != undefined && result != null) { 
       if (result.ErrorMessage != null) { 
        // update a hidden field on the page with the message. 
        $('#HdnValidationMessage').val(result.ErrorMessage); 

        // Field is not valid so return false 
        return false; 
       } 
       else { 
        // no error message returned so field must be valid 
        return true; 
       } 
      } 
      else { 
       // Something has gone wrong! I won't let this stop the user. 
       return true; 
      } 
     }, 
     complete: function() { 
      // hide loading gif 
      $('#loader').hide(); 
     } 
    }; 

    // Default error message set to fetch the error fromt he hidden field. 
    options.messages["remote"] = function() { return $('#HdnValidationMessage').val(); } 
}); 

Hoffe, es hilft jemand, der für eine Weile auf diese stecken geblieben war, wie ich war!

UPDATE:

Haben diese Arbeit ohne verstecktes Feld. Ich weiß nicht, warum ich das vorher nicht konnte, aber jetzt ist es viel einfacher.

So jetzt die Controller-Aktion serverseitige gibt wahr wenn gültig und eine Fehlermeldung, wenn falsch. die folgenden wird die Fehlermeldung angezeigt werden:.

jQuery.validator.unobtrusive.adapters.add("customValidation", [], function (options) { 
    options.rules["remote"] = { 
     url: "/api/CustomValidation", 
     type: "post", 
     data: { 
      fieldValue: function() { return options.element.value; } 
     }, 
     beforeSend : function() { 
      // Show loading gif 
      $('#loader').show(); 
      $(options.element).prop("readonly", "readonly"); 
     }, 
     complete: function() { 
      // hide loading gif 
      $('#loader').hide(); 
      $(options.element).removeProp("readonly"); 
     } 
    }; 
});