The library provides support for client-side lightbox validation. There are different ways to implement it and which one to apply depends on the lightbox you use.
Generally, to validate a standard lightbox, you should use events provided by the scheduler (see the full list here and catch the input data to handle respectively to correctness).
The simplest validation can be achieved with the help of the onEventSave event. The event is invoked when the user clicks on the form 'save' button. Returning true from the event will save the changes, returning false will cancel further processing and leaves the lightbox opened.
Here is the client code you can put on the page right after scheduler initialization:
scheduler.attachEvent("onEventSave", function (id, data, is_new_event) {
if (!data.text) {
dhtmlx.message("Event text can't be empty!");
return false;
}
return true; // returning true will save the changes
});
The solution above has a shortcoming - the event won't fire if the data in the lightbox was changed through an inline editor (such a possibility there is in the day and week views) or by dragging over the scheduler.
To prove this and catch all changes made in the scheduler (editing, creating, deleting etc.), you should use the scheduler.dataProcessor object or, to be accurate, one of its events -
onBeforeUpdate (learn more on the topic here).
The event fires before sending data to the server and after any change made in the scheduler (not only in the lightbox).
scheduler.dataProcessor.attachEvent("onBeforeUpdate", function (id, status, data) {
if (!data.text) {
dhtmlx.message("Event text cant be empty!");
return false;
}
return true;
});
Note, when the field fails validation, changes aren't sent to the server but stay on the client and can be used for further processing.
There are various solutions for validating server forms and we will consider one that uses Data Annotations (learn more on the topic here). Note, the default lightbox applies its predefined logic that doesn't allow using the Data Annotation.
Generally, to perform validation with the Data Annotation Model Binder you should:
1 .Add references to the System.ComponentModel.DataAnnotations.dll assembly. 2 .Add the required validation attributes to the model class:
using System.ComponentModel.DataAnnotations;
public class Event
{
[Required]
public int id { get; set; }
[Required, StringLength(256)]
public string text { get; set; }
[Required]
public DateTime start_date { get; set; }
[Required]
public DateTime end_date { get; set; }
}
3 . Finally, the code of your form view with validation support should look like this:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SchedulerTest.Models.Event>" %>
<html>
<body>
<%
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
%>
<html>
<head>
<script src="/Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</head>
<body>
<% using (Html.BeginForm("Save", "JQueryValidation", FormMethod.Post, new { id = "schedulerForm" }))
{ %>
<div class="values">
<%= Html.LabelFor(m => Model.text) %> : <%= Html.EditorFor(m => Model.text) %>
<%= Html.ValidationMessageFor(m => Model.text) %> <br />
<%= Html.LabelFor(m => Model.email) %> : <%= Html.EditorFor(m => Model.email)%>
<%= Html.ValidationMessageFor(m => Model.email)%> <br />
From
<%= Html.TextBox("start_date", Model.start_date, new { @readonly = "readonly" })%>
To
<%= Html.TextBox("end_date", Model.end_date, new { @readonly = "readonly" })%>
<%= Html.Hidden("id", Model.id)%>
</div>
<div style="text-align:center">
<input type="submit" name="actionType" value="Save" />
<input type="button" onclick="lightbox.close()/* helper-method*/" value="Close" />
<input type="submit" name="actionType" value="Delete" />
</div>
<% } %>
</body>
</html>
You should pinpoint 2 things:
<script src="/Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<%
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
%>
Note, validation errors occur on the client and don't even hit submit.
In case you use a model class which is generated automatically (e.g. LINQ to or Entity Framework), you can't apply the validator attributes directly to your classes.
As the class is auto-generated, any changes made in it will be overwritten the next time you make changes in the Designer.
That's why, if you need to use validators with such a class, you should create a meta data class and apply vaildators to it instead of applying it to your actual class.
For example, let's suppose that you want to make the text property in the Event class required. In this case, you can create partial and meta data classes as shown below:
// Event class auto-generated by LINQ to SQL
using System.ComponentModel.DataAnnotations;
[MetadataType(typeof(EventMetadata))]
public partial class Event
{
}
public class EventMetadata
{
[Required]
public string text { get; set; }
}
For security reasons we strongly encourage you to repeat validation on the server.
How to check correctness of properties?
In the 'Save' action you can operate with the object of the changed event to check the value of any property and compliance of this value with the requirements (validation rules). Read more in the chapter Managing CRUD Operations.
public ContentResult Save(Event changedEvent, FormCollection actionValues)
{
var changedEvent=(Event)DHXEventsHelper.Bind(typeof(Event), actionValues);
...
}
How to rollback changes on the client?
If some property failed validation, you can use the _ AjaxSaveResponse_ UpdateField(string propertyName, object propertyValue) method to return the last correct value. To get details on this method and the possibility to update a singular data property, read the section Post-processing Data Properties on the Server of the article Managing CRUD Operations.