製品版のみの機能

エディター - データ注釈の検証

このサンプルでは、igEditors でデータ注釈属性を使用して検証オプションを設定する方法を紹介します。

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

この例では、標準のデータ注釈の属性がモデルクラスで検証オプションを設定するために適用されます。ValidationMessage は「注文期限」と「出荷方法」フィールドに適用されます。この実装は、igValidators がエラーメッセージを自動的にヘルパーに切り替え、デフォルトのメッセージを表示しない方法を紹介します。ValidationMessageFor は検証メッセージをアプリケーションに合わせてグループ化および再配置できます。

コードビュー

クリップボードへコピー

                @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("顧客名")

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

				</div>
				<div>
					@Html.Label("電話番号")

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

				</div>
				<div>
					@Html.Label("メール アドレス")

					@(Html.Infragistics().TextEditorFor(m => m.ContactEmail)
						.ID("ContactEmailAddressEditor")
						.Width("200")
						.PlaceHolder("メール アドレス")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
						.Render()
					)
				</div>
				<div>
					@Html.Label("契約条件に同意")

					@(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("出荷日")

					@(Html.Infragistics().DatePickerFor(m => m.OrderShipDate)
					   .ID("OrderShipDateEditor")
					   .Width("200")
					   .PlaceHolder("出荷日")
					   .ValidatorOptions(options => options.OnBlur(true).OnChange(false).OnSubmit(true))
					   .Regional("ja")
					   .Render()
					)

					@Html.ValidationMessageFor(m => m.OrderShipDate)
				</div>
				<div>
					@Html.Label("期日")

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

					@Html.ValidationMessageFor(m => m.OrderDueDate)
				</div>
				<div>
					@Html.Label("出荷の方法")

					
					@(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("前払い金額")


					@(Html.Infragistics().CurrencyEditorFor(m => m.AdvancePaymentAmount)
						.ID("AdvancePaymentAmountEditor")
						.Width("200")
						.PlaceHolder("前払い金額")
						.ValidatorOptions(options => options.OnBlur(true).OnChange(false))
						.Render()
					)

				</div>
				<div style="width: 200px"><input type="submit" id="btnSubmit" value='送信' 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"] = "製品を保存しました";
			}
            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 = "標準", Value = "Standard" },
                new SelectListItem { Text = "1 日", Value = "OneDay" },
                new SelectListItem { Text = "2 日", Value = "TwoDay" },
                new SelectListItem { Text = "海外発送", 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 = "出荷日の選択")]       
        public DateTime? OrderShipDate { get; set; }

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

        [Required(ErrorMessage = "顧客名を入力してください。")]
        [StringLength(50, MinimumLength = 3, ErrorMessage = "$$(name_length)")]
        public string CustomerName { get; set; }

        [Required(ErrorMessage = "出荷方法の選択")]
        public string ShipMethod { get; set; }

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

        [Required(ErrorMessage = "電話番号を入力してください。")]
        public string ContactPhoneNumber { get; set; }

        [Required(ErrorMessage = "前払いを入力してください。")]
        [Range(0, 100, ErrorMessage = "{1} ~ {2} の値を入力してください。")]
        public double AdvancePaymentAmount { get; set; }

        [Required(ErrorMessage = "メール アドレスを入力してください。")]
        [RegularExpression("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$", ErrorMessage = "有効なメール アドレスを入力してください。")]
        public string ContactEmail { get; set; }

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

Ignite UI for jQuery | サンプル

検索結果

エディター - データ注釈の検証

コードビュー

Ignite UI for jQuery | サンプル

検索結果

エディター - データ注釈の検証

コード ビュー

コードビュー