如何在点击 jquery 中的 td 元素时在模式内显示错误消息？

Question

对于每次验证，如果 isError 为 true ，它应该在模式中显示错误消息。如何在点击查看错误时在模式中显示每次验证的错误消息 validated column image 验证和 table in jquery，其中 globalfiledata 是值数组-

 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>

模态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>

Answer 1

您可以通过将错误消息文本传递给以下函数来将错误消息传递给模态框

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

如何在点击 jquery 中的 td 元素时在模式内显示错误消息？

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

html

jquery

modal-dialog