Highlight and append msg to element on return from .ajax

user_16237163 0
Viewed 83

Upon ajax successful return, the return data contains status. if status is false(not ajax fail), return data contains array of element names and associated error message. The goal is to replicate .validate() error functionality by appending msg after element and highlight.

HTML form:

<form class="form-horizontal" id="chngPwdForm" action="changepwd.php" method="post">
.
. various HTML....
.
             <div class="form-group">
                <div class="alert alert-div font-weight-bold" id="errorTxt" role="alert" style="display:none;"> </div>
                <label for="crntPwd">Existing Password:</label>
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fa fa-key fa-fw"></i></span>
                  <input type="password" class="form-control" id="crntPwd" name="crntPwd" required>
                </div>
             </div>
.
. more HTML follows
.

JQUERY:

.
.yada, yada, yada
.
    $("#chngPwdForm").submit(function(event){
    event.preventDefault();
    if ($("#chngPwdForm").valid() ) {
       $('#chngPwdForm div[id="errorTxt"]').hide();
       Msg = $('#chngPwdForm div[id="errorTxt"]').text("Password changed.  Click on Login to continue.");   
       var formURL = $("#chngPwdForm").attr('action');
       $.ajax({
          url: formURL,
          type: 'POST',
          data: $(this).serialize(),
          dataType: 'JSON'
       })
       .done (function(data, textStatus, jqXHR) {
           if (!data.status) {
              var Msg = "Password Not Changed.  Password Change Failed.";
              var element;
              var errorObj = new Error("");
              $.each(data.Msg, function(elemName, errMsg) {
                  element = $("#chngPwdForm").filter("#" + elemName);
                  errorObj.message = errMsg;
                  $(element).closest(".form-group").addClass("has-error");
                  errorObj.insertAfter(element);
              });
           }
           $('#chngPwdForm div[id="errorTxt"]').text(Msg).show();
       })
       .fail (function(response){ 
           var Msg = "chngPwd call failed. errorThrown: " + response;
           var obj = JSON.stringify(response);    
          alert("obj is: " + obj);
          $('#chngPwdForm div[id="errorTxt"]').text(Msg);
        })
      }
      else {
        $('#chngPwdForm div[id="errorTxt"]').text('Please Correct errors').show();
      }
      return false;

The JSON response from changepwd.php:

{\"status\":false,\"Msg\":{\"crntPwd\":\"Current Password may only contain a-z, A-Z, 0-9, ! or @\"}

JS error

"TypeError: errorObj.insertAfter is not a function" is thrown for
"errorObj.insertAfter(element);"

highlight error-handling jquery ajax javascript
1 Answers

The implemented solution:

JQuery:

// New Code has leading and trailing *
$("#chngPwdForm").submit(function(event){
     *$(".chngPwderr").removeClass("error").text('');* //used to remove old messages
     event.preventDefault();
     if ($("#chngPwdForm").valid() ) {
       $('#chngPwdForm div[id="errorTxt"]').hide();
       Msg = $('#chngPwdForm div[id="errorTxt"]').text("Password changed.  Click on Login to continue.");   
       var formURL = $(this).attr('action');
       $.ajax({
          url: formURL,
          type: 'POST',
          data: $(this).serialize(),
          dataType: 'JSON'
       })
       .done (function(data, textStatus, jqXHR) {
           if (!data.status) {
              var Msg = "Password Not Changed.  Password Change Failed.";
              var focusSet = false;
              $.each(data.Msg, function(elemName, errMsg) {
              *$("#" + elemName).attr("type", "text");
               if (!$("#" + elemName).parent().hasClass("error")) {
                    $("#" + elemName).parent().append('<div class="chngPwderr error">' + errMsg + '</div>'); 
                  }  
                  if (!focusSet) {
                     $("#" + elemName).focus();
                    focusSet = true;
                  }*
              });
           }
           $('#chngPwdForm div[id="errorTxt"]').text(Msg).show();
       })
user_162371630
Related