How to display error messages inside the modal on click of the td element in jquery?

Viewed 475

For every validations if the isError is true , it should display the error message in the modal. How to display the error messages in the modal for each validations on click of view errors validated column image validation and table in jquery, where globalfiledata is the array of values-

 function ValidateBulkdata(globalfiledata) {
 var tbody = $('#tblCsvRecords tbody'),
  props = ["ShipmentType", "SCAC", "ShipmentControlNumber", "ProvinceofLoading", "ShipperName", 
     "ConsigneeName"];

     $.each(globalfiledata, function (key, value) {
    var tr = $('<tr>');
    var isError = false;

        $.each(props, function (key, prop) {
        $('<td>').html(value[prop]).appendTo(tr);
        var regex = /^[a-zA-Z0-9\-\s]+$/;

        if (prop === "ShipmentType" && value.ShipmentType !== ("Regular Bill" || "Section 321")) {
            isError = true;
          //show error message- enter valid shipment type in the modal
        }
        else if (!regex.test(value.ShipmentControlNumber) || (value.ShipmentControlNumber.length) > 12) {
            isError = true;
           //show error message- enter valid Shipment Control Number in the modal
        }
        else if (!regex.test(value.ShipperName) || (value.ShipperName.length) > 60) {
            isError = true;
            //show error message- enter valid Shipper Name in the modal
        }
        else if (!regex.test(value.ShipperAddress) || (value.ShipperAddress.length) > 55) {
            isError = true;
            //show error message- enter valid Shipper Address in the modal

        }
        else if (!regex.test(value.ShipperCity) || (value.ShipperCity.length) > 30) {
            isError = true;
        }
        else if (!regex.test(value.ShipperPostal) || (value.ShipperPostal.length) > 15) {
            isError = true;
        }
        else if (!regex.test(value.ShipperEmail) || (value.ShipperEmail.length) > 50) {
            isError = true;
        }
        else if (!regex.test(value.ConsigneeName) || (value.ConsigneeName.length) > 60) {
            isError = true;
        }
        else if (!regex.test(value.ConsigneeAddress) || (value.ConsigneeAddress.length) > 55) {
            isError = true;
        }

        else if (!regex.test(value.ConsigneeCity) || (value.ConsigneeCity.length) > 30) {
            isError = true;
        }
        else if (!regex.test(value.ConsigneePostal) || (value.ConsigneePostal.length) > 15) {
            isError = true;
        }
        else if (!regex.test(value.ConsigneeEmail) || (value.ConsigneeEmail.length) > 50) {
            isError = true;
        }
        else if (!regex.test(value.CommoditiesDescription) || (value.CommoditiesDescription.length) > 45) {
            isError = true;
        }
        else if (!regex.test(value.MarksNumbers) || (value.MarksNumbers.length) > 30) {
            isError = true;
        }
        else if (!regex.test(value.HazardousMaterialCode1) || (value.HazardousMaterialCode1.length) > 10) {
            isError = true;
        }
        else if (!regex.test(value.HazardousMaterialCode2) || (value.HazardousMaterialCode2.length) > 10) {
            isError = true;
        }
        else if (!regex.test(value.HazardousMaterialCode3) || (value.HazardousMaterialCode3.length) > 10) {
            isError = true;
        }
        else if (!regex.test(value.EmergencyContactName1) || (value.EmergencyContactName1.length) > 24) {
            isError = true;
        }
        else if (!regex.test(value.EmergencyContactName2) || (value.EmergencyContactName2.length) > 24) {
            isError = true;
        }
        else if (!regex.test(value.EmergencyContactName3) || (value.EmergencyContactName3.length) > 24) {
            isError = true;
        }
        else if (!regex.test(value.Phone1) || (value.Phone1.length) > 256) {
            isError = true;
        }
        else if (!regex.test(value.Phone2) || (value.Phone1.length) > 256) {
            isError = true;
        }
        else if (!regex.test(value.Phone3) || (value.Phone1.length) > 256) {
            isError = true;
        }

       
    });
   var td = $('<td>');
    if (isError) {
        var link = td.append('<a href="#" id="OpenPopup">View Errors</a>');
        $('<img>').attr('src', '/assets/images/error_red.jpg').wrap(link).appendTo(td);
        $("#OpenPopup").on('click', function () {
            $('#divShipmentValidation').modal('show');

        });
    }
    else {
        $('<img>').attr('src', '/assets/images/success_green.png').appendTo(td);
    }
    td.appendTo(tr);
    tbody.append(tr);
});

}

html table-

<div id="tablediv" class="table-responsive">                                           
<table id="tblCsvRecords" class="table table3-1 bg-white no-margin-bottom">
<thead>
<tr>
<th>Shipment Type </th>
<th>SCAC </th>
<th>Shipment Control Number </th>
<th>Port of Loading </th>
<th>Shipper Name </th>
<th>Consignee Name </th>
<th>Validated </th>
</tr>
</thead>
<tbody>
</tbody>

modal html-

  <div id="divShipmentValidation" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xLarge">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Shipment Validation Messages</h4>
            </div>
            <div class="modal1-body">
               
                    </div>
                </div>
            </div>
       </div>
1 Answers

you could pass Error Message to a Modal by passing error message text to below function

    function showErrorMessage(errorMessage) {
      $('#divShipmentValidation').modal('show');
      $('#divShipmentValidation .modal1-body').text(errorMessage);
    };
Related