Available in the Full Version

Editors - Mask Editor MVC

Register your Infragistics Ultimate bundle

Error
Error

Submitted Values

This sample is designed for a larger screen size.

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

This ASP.NET MVC sample demonstrates the basic use of the igMaskEditor.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <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" />
    <style>
        h3 {
            font-size:20px;
            margin-bottom:20px;
        }
        .group-fields {
            margin-bottom: 10px;
        }
        .group-fields label {
            display: block;
            line-height:18px;
        }
        .group-fields .ui-igedit-container {
            width: 300px;
        }
		
		form {
			float: left;
			width: 500px;
			min-width: 500px;
		}
		.submit-container
        {
            top: 0px;
            right: 0px;
            min-width: 400px;
            float: right;
            font-size: 18px;
        }

			.submit-container h3 {
				display: none;
			}

            .submit-container p
            {
                font-size: 16px;
            }
				.submit-container p.result {
					margin-top: 10px;
					margin-bottom: 45px;
				}
				.submit-container span.result-name {
					font-weight: bold;
					text-transform: capitalize;
				}

		.clear {
			clear: both;
		}

        @@media screen and (max-width:360px) {
            .group-fields .ui-igedit-container {
                width: 250px;
            }
        }
    </style>

    <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>
    <form id="form1">
		<h3>Register your Infragistics Ultimate bundle</h3>
        <div class="group-fields">
            <label for="serialNumber">Serial Number</label>
            @(Html.Infragistics().MaskEditor()
				.ID("serialNumber")
				.InputName("serialNumber")
				.InputMask("AAAA-AAAA-AAAA-AAAA")
				.DataMode(MaskEditorDataMode.RawTextWithLiterals)
				.Render()
            )
        </div>
        <div class="group-fields">
            <label for="zipCode">Zip Code</label>
            @(Html.Infragistics().MaskEditor()
			.ID("zipCode")
			.InputName("zipCode")
				.InputMask("00000")
				.DataMode(MaskEditorDataMode.AllText)
				.Render()
            )
        </div>
        <div class="group-fields">
            <label for="phone">Phone Number</label>
            @(Html.Infragistics().MaskEditor()
				.ID("phone")
				.InputName("phone")
				.InputMask("(999) 999-999")
				.DataMode(MaskEditorDataMode.RawText)
				.Render()
            )
        </div>
		<input id="btn" type="button" value="Clear" />
		<input type="submit" id="submitBtn" value="Submit" />
		@(Html.Infragistics().Validator().ID("form1")
			.Fields(x =>
			{
				x.Field().ID("serialNumber").Required(true);
				x.Field().ID("zipCode").Required(true);
			}).Render()
		)
    </form>
	<div class="submit-container">
		<h3>Submitted Values</h3>
		<div class="submit-container">
			<p id="results"></p>
		</div>
	</div>
	<div class="clear"></div>

    <script>
		$(function () {
			$("#form1").submit(function (event) {
				var submittedValues = $("#form1").serializeArray(), submitHTML = "";

				$("#results").empty();
				if ($("#form1").igValidator("validate")) {
					$(".submit-container h3").show();
					for (var i = 0 ; i < submittedValues.length; i++) {
						$("#results").append("<p class='result'><span class='result-name'>" + submittedValues[i].name.replace(/([A-Z])/g, ' $1') + ":</span>  " + submittedValues[i].value + "</p>");
					}
				}
				return false;
			});

			$("#btn").click(function () {
				$("#serialNumber").igMaskEditor("value", "");
				$("#zipCode").igMaskEditor("value", "");
				$("#phone").igMaskEditor("value", "");
			});
		});
    </script>
               
</body>
</html>