View message error

I have this code:

 $.ajax({
                url: "/InternalAuditRecord/SaveInternalAuditRecord",
                type: "post",
                data: $("form#internalAuditRecordRegisterForm").serialize()+"&idResponsibles="+responsibles+"&idAuditors="+auditors,
                success: function (res) {
                    if (typeof (res) == "object") {
                        if (res.success) {
                            window.location.replace("/InternalAuditRecord/InternalAuditRecord");
                        }
                        else {
                            console.log(res);
                            //flashMessage();
                            if ($("#Name").val() == "") {
                                $("#Name").addClass(validationClassErrosType.input)
                            }
                            validationCheckImage($("#Name"), $("#Name").parent());

                            var text = String(res).split(",");
                            var errorMessages = ["<ul>"];
                            for (var i = 0; i < text.length; i++) {
                                errorMessages.push("<li>"+text[i]+"<li>");
                            }
                            errorMessages.push("</ul>");

                            $(".validation-summary-errors").html(errorMessages.join(""));
                            loadSwitches();
                        }
                    }

My controller:

if (!ModelState.IsValid){              
   ModelState.OrderByKeys(criticalAnalysisRecord.GetValidationOrder());
   Response.StatusCode = (int)HttpStatusCode.BadRequest;
   return Json(ModelState.GetModelStateErros());
}

And the View:

<div id="messages">
  <div class="validation-summary-errors" data-valmsg-summary="true">
  </div>
</div>

That puts the message in the View but this is going to be a longer li tag, as can be seen in the image:

How can I resolve this problem?