InputMask maskFull

The InputMask control exposes a maskFull property that indicates whether the mask has been completely filled.

For example, these controls will show their content in red until the masks are completely filled out, and optionally clears their content when the control loses focus and the mask is not full:

Clear Incomplete:

// This file locates: "Scripts/Lesson/C1Input/InputMaskMaskFull.js".
c1.documentReady(function () {
    var theSSN = wijmo.Control.getControl('#theSSN');
    var theZip = wijmo.Control.getControl('#theZip');
    var theZip4 = wijmo.Control.getControl('#theZip4');
    var thePhone = wijmo.Control.getControl('#thePhone');
 
    theSSN.valueChanged.addHandler(validateMask);
    theSSN.lostFocus.addHandler(lostFocus);
 
    theZip.valueChanged.addHandler(validateMask);
    theZip.lostFocus.addHandler(lostFocus);
 
    theZip4.valueChanged.addHandler(validateMask);
    theZip4.lostFocus.addHandler(lostFocus);
 
    thePhone.valueChanged.addHandler(validateMask);
    thePhone.lostFocus.addHandler(lostFocus);
 
    // update 'state-invalid' class
    function validateMask(s, e) {
        wijmo.toggleClass(s.hostElement, 'state-invalid', !s.maskFull);
    }
   
    // clear masks that are not filled when losing focus
    var clearIncomplete = document.getElementById('clearIncomplete');
    function lostFocus(s, e) {
        if (!s.maskFull && !s.isRequired && clearIncomplete.checked) {
            s.value = '';
        }
    }
});

// This file locates: "Content/css/Lesson/C1Input/InputMaskMaskFull.css".
.state-invalid {
  color: red  
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: InputMaskMaskFull
        public ActionResult InputMaskMaskFull()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.InputMaskMaskFull_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.InputMaskMaskFull_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.InputMaskMaskFull_Text2)
</p>
 
<div class="demo-settings">
    <label for="clearIncomplete">@Html.Raw(Resources.C1Input.InputMaskMaskFull_Text3) </label>
    <input id="clearIncomplete" type="checkbox" checked="true"><br />
</div>
 
@Html.C1().InputMask().Id("theSSN").Mask("000-00-0000").Placeholder(Resources.C1Input.InputMaskMaskFull_Text4).IsRequired(false).Value("")
@Html.C1().InputMask().Id("theZip").Mask("00000").Placeholder(Resources.C1Input.InputMaskMaskFull_Text5).IsRequired(false).Value("")
@Html.C1().InputMask().Id("theZip4").Mask("00000-0000").Placeholder(Resources.C1Input.InputMaskMaskFull_Text6).IsRequired(false).Value("")
@Html.C1().InputMask().Id("thePhone").Mask("(999) 000-0000").Placeholder(Resources.C1Input.InputMaskMaskFull_Text7).IsRequired(false).Value("")