Available in the Full Version

Editors - Validation

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

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.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/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>