StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I had to write some custom validation logic at some point for a lot of dynamic content that loosely had corresponding models, but based on selected options the validation was different. I'm just gonna copy and paste the code from my app and dumb it down, but you can follow the basic example. This is also for saving multiple forms in multiple tabs.. but works for one as well, but you can probably simplify it.. The JS is old and can be cleaned up a lot too with promises and distributed events, but that's a topic for a different day.</p> <p>JS:</p> <pre><code>$("button#Save").on("click", function () { // checks if existing errors have been cleared before trying to submit again if ($(".ui-state-error, .ui-state-error-text", "#tabs").length) { alert("There are errors on the page. You must correct any errors before saving."); } else { // don't allow to submit twice.. again.. better ways to do this.. if (!Saving) { Saving = true; // show saving message overlay $('#CanvasLoading').html("Saving...<span>Loading</span>").show(); //map data // PASSES IN THE ID OF THE FORM var data = $("form.create-item-form", "#tabs").map(function () { var $form = $(this); return { Name: $form.find(":input[name=Name]").val(), FolderName: $form.find(":input[name=FolderName]").val(), ItemName: $form.find(":input[name=ItemName]").val(), ViewId: $form.find(":input[name=ViewId]").val(), FormId: $form.attr("id") }).toArray(); $.ajax( { url: Routes.New.SaveAllPost, type: 'POST', contentType: 'application/json', data: { items: data }, success: function (resultJSON) { var result = $.parseJSON(resultJSON); if (result.Success) { Saving = false; }); } else { $.each(result.Errors, function (i, item) { // loops through all items and applies class ui-state-error to inputs in the form with given id var formId = item.FormId; var propertyName = item.FieldName; $.each(item.Errors, function (i, error) { var id = $("input[name=" + propertyName + "], select[name=" + propertyName + "]", "#" + formId).addClass("ui-state-error").parents("div.ui-tabs-panel:first").attr("id"); $("#li-upload-" + id, "#tabs").addClass("ui-state-error"); }); }); // hide loading overlay $('#CanvasLoading').hide(); Saving = false; } } }); } else { alert("You have already started saving. Please wait for results to process."); } } return false; }); </code></pre> <p>C#:</p> <pre><code>public class NewController : Controller { [HttpPost] public JsonResult SaveAll(List<UploadViewModelDTO> items) { UploadItemValidationDTO validation = ValidateItems(items); if (validation.Success) { // validated: do stuff } return Json(validation); } } private UploadItemValidationDTO ValidateItems(List<UploadViewModelDTO> items) { UploadItemValidationDTO validation = new UploadItemValidationDTO(); // check for errors // if error add using following code // error has field name and id of form it came from validation.Errors.Add ( new Error { Errors = new List<string>() { "Folder is required" }, FieldName = "FolderName", FormId = item.FormId } ); validation.Success = (validation.Errors.Count < 1); return validation; } public class UploadItemValidation { public UploadItemValidation() { Errors = new List<Error>(); } public bool Success {get;set;} public List<Error> Errors {get;set;} } public class Error { public string FormId {get;set;} public string FieldName {get;set;} public List<string> Errors {get;set;} } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload