Available in the Full Version

Editors - Validation

This sample demonstrates how to use data annotation attributes to set validation options on igEditors.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

In this example, the standard data annotation attributes are applied to the model class to set the validation options. The ValidationMessage is applied to the order due date and ship method fields. This implementation shows how the igValidators automatically swap the error message into the helper and their default message is not shown. Use of ValidationMessageFor frees you to group and rearrange the validation messages in ways specific to your application.

Code View

Copy to Clipboard

                @using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models

@model IgniteUI.SamplesBrowser.Models.DataAnnotations.ValidatedOrder

<!DOCTYPE html>

<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <style>
        .orderFieldSet {
            border: solid 1px #b1b1b1;
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 5px 0px 5px 20px;
        }
		.form-container {
			float: left;
			padding-right: 120px;
		}
		.form-container > div {
			padding-bottom: 25px;
		}
		.clear {
			clear: both;
		}

        .submittedFieldSet {
            float: left;
            border: solid 1px #b1b1b1;
            margin-top: 10px;
            margin-left: 20px;
            margin-bottom: 10px;
            padding: 5px 0px 5px 20px;
            width: 250px;
        }

        #btnSubmit {
            margin-top: 10px;
        }
		.field-validation-error {
			display: block;
			color: #f33;
			font-size: 0.8em;
		}
		.field-validation-valid {
			display: none;
		}
		input.input-validation-error {
			border: 1px solid #e80c4d;
		}

		.validation-summary-errors {
			color: #e80c4d;
			font-weight: bold;
			font-size: 1.1em;
		}
		.validation-summary-valid {
			display: none;
		}
		.success {
			color: #458B00;
			float: left;
			margin-top: 20px;
		}

        @@media all and (max-width: 660px) {
            .orderFieldSet, .submittedFieldSet {
                width: 220px;
                margin-left: 0;
            }

        }

    </style>

    @using (Html.BeginForm())
    {
        <fieldset class="orderFieldSet">
			<div class="form-container">

				<div>
					@Html.Label("Customer Name")

					@(Html.Infragistics().TextEditorFor(m => m.CustomerName)
						.ID("CustomerNameEditor")
						.Width("200")
						.PlaceHolder("Customer Name")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
						.Render()
					)

				</div>
				<div>
					@Html.Label("Contact Phone")

					@(Html.Infragistics().MaskEditorFor(m => m.ContactPhoneNumber)
						.ID("ContactPhoneEditor")
						.Width("200")
						.PlaceHolder("Contact Phone")
						.InputMask("000-000-00")
						.UnfilledCharsPrompt('0')
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
						.Render()
					)

				</div>
				<div>
					@Html.Label("Email Address")

					@(Html.Infragistics().TextEditorFor(m => m.ContactEmail)
						.ID("ContactEmailAddressEditor")
						.Width("200")
						.PlaceHolder("Email Address")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
						.Render()
					)
				</div>
				<div>
					@Html.Label("Agree terms and conditions")

					@(Html.Infragistics().CheckBoxEditorFor(m => m.isBig)
						.ID("Validation_CheckboxEditor")
						.Size(CheckBoxEditorSize.Large)
						.Render()
					)

				</div>
				@if (ViewData["message"] != String.Empty)
				{
					<span class="success">@ViewData["message"]</span>
				}
			</div>
			<div class="form-container">
				<div>
					@Html.Label("Ship Date")

					@(Html.Infragistics().DatePickerFor(m => m.OrderShipDate)
					   .ID("OrderShipDateEditor")
					   .Width("200")
					   .PlaceHolder("Ship Date")
					   .ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
					   .Regional("en")
					   .Render()
					)

					@Html.ValidationMessageFor(m => m.OrderShipDate)
				</div>
				<div>
					@Html.Label("Due Date")

					@(Html.Infragistics().DateEditorFor(m => m.OrderDueDate)
						.ID("OrderDueDateEditor")
						.Width("200")
						.PlaceHolder("Due Date")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
						.Render()
					)

					@Html.ValidationMessageFor(m => m.OrderDueDate)
				</div>
				<div>
					@Html.Label("Method of Shipment")

					
					@(Html.Infragistics().ComboFor(m => m.ShipMethod)
						.DataSource(Model.ShipMethodList)
						.ValueKey("Value")
						.TextKey("Text")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
						.Width("200")
						.Render()
					)

					@Html.ValidationMessageFor(m => m.ShipMethod)
				</div>
				<div>
					@Html.Label("Advance Payment Amount")


					@(Html.Infragistics().CurrencyEditorFor(m => m.AdvancePaymentAmount)
						.ID("AdvancePaymentAmountEditor")
						.Width("200")
						.PlaceHolder("Advance Payment Amount")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false))
						.Render()
					)

				</div>
				<div style="width: 200px"><input type="submit" id="btnSubmit" value='Submit' style="float: right;/></div>
			</div>
			<div class="clear"></div>
        </fieldset>
	}

    <script>

        $(function () {
            $("#btnSubmit").igButton({
                labelText: $("#btnSubmit").val()
            });
        });

    </script>

</body>
</html>

                 using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class EditorsController : Controller
    {
        //
        // GET: /Editors/

        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation()
        {
            ValidatedOrder model = new ValidatedOrder();
			ViewData["message"] = String.Empty;
			model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [HttpPost]
        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation(ValidatedOrder model)
        {
			if (ModelState.IsValid)
			{
				ViewData["message"] = "Product saved successfully";
			}
            model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [ActionName("load-and-save-form-values")]
        public ActionResult EditProduct()
        {
            Product product = RepositoryFactory.GetProductRepository().Get().First();
            ViewData["message"] = String.Empty;
            return View("load-and-save-form-values", product);
        }

        [ActionName("text-editor-mvc")]
        public ActionResult TextEditor()
        {
            return View();
        }

        [ActionName("date-editor-mvc")]
        public ActionResult DateEditor()
        {
            return View();
        }

        [ActionName("numeric-editor-mvc")]
        public ActionResult NumericEditor()
        {
            return View();
        }

        [ActionName("mask-editor-mvc")]
        public ActionResult MaskEditor()
        {
            return View();
        }

        public List<SelectListItem> GetShipMethods()
        {
            List<SelectListItem> selectList = new List<SelectListItem>()
            {
                new SelectListItem { Text = "Standard", Value = "Standard" },
                new SelectListItem { Text = "One Day", Value = "OneDay" },
                new SelectListItem { Text = "Two Day", Value = "TwoDay" },
                new SelectListItem { Text = "International", Value = "International" }
            };
            return selectList;
        }

    }
}

             using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Models.DataAnnotations
{
    public class ValidatedOrder
    {
        [Required(ErrorMessage = "Select ship date")]       
        public DateTime? OrderShipDate { get; set; }

		[Required(ErrorMessage = "$$(order_due_date)")]
        public DateTime? OrderDueDate { get; set; }

        [Required(ErrorMessage = "Customer name is required")]
        [StringLength(50, MinimumLength = 3, ErrorMessage = "$$(name_length)")]
        public string CustomerName { get; set; }

        [Required(ErrorMessage = "Select ship method")]
        public string ShipMethod { get; set; }

        public List<SelectListItem> ShipMethodList { get; set; }

        [Required(ErrorMessage = "Phone number is required")]
        public string ContactPhoneNumber { get; set; }

        [Required(ErrorMessage = "Enter advanced payment")]
        [Range(0, 100, ErrorMessage = "The value should be between {1} and {2}.")]
        public double AdvancePaymentAmount { get; set; }

        [Required(ErrorMessage = "Email address is required")]
        [RegularExpression("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$", ErrorMessage = "Please enter a valid email")]
        public string ContactEmail { get; set; }

        [Required(ErrorMessage = "$$(size_required)")]
        public bool isBig { get; set; }
    }
}

Ignite UI for jQuery | Samples

Search Results

Editors - Validation

Code View