ASP .NET Core MVC Documentation

Getting Started

jqxValidator represents a UI component which validates input fields.

Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

jqxValidator requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxvalidator.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<script src="~/jqwidgets/jqxvalidator.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxcheckbox.js"></script>
<script src="~/jqwidgets/jqxinput.js"></script>
<script src="~/jqwidgets/jqxpasswordinput.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Validator Example";
    List<KeyValuePair<string, object>> settings = new List<KeyValuePair<string, object>>()
    {
           new KeyValuePair<string, object>("rules", new List<ValidatorRule>()
            {
                new ValidatorRule() { Input ="#username", Action="keyup, blur", Rule="required" },
                new ValidatorRule() { Input ="#password", Action="keyup, blur", Rule="required" }
            }
        ),
        new KeyValuePair<string, object>("selector", "form"),
        new KeyValuePair<string, object>("theme", ViewData["Theme"])
    };
}
<script>
    var validator;
    function getValidator(instance) {
        validator = instance;
    }
    function validate() {
        validator.validate();
    }
</script>
<jqx-validator arrow="false" hint-type="label" instance="getValidator()" settings="settings"></jqx-validator>
<form class="form" id="form" target="form-iframe" method="post" action="login.php" style="width: 650px;">
    <div>
        <h2>Login Demo</h2>
    </div>
    <label style="margin-top:10px;">Username:</label>
    <div style="margin-top:10px;">
        <jqx-input height="25" theme="@ViewData["theme"]' type="text" id="username" name="username"></jqx-input>
    </div>
    <label>Password:</label>
    <div style="margin-top:10px;">
        <jqx-password-input height="25" theme="@ViewData["theme"]' type="password" id="password" name="password"></jqx-password-input>
    </div>
    <div style="margin-top:10px;">
        <jqx-check-box theme="@ViewData["theme"]' name="rememberme" id="rememberme">Keep me logged in on this computer</jqx-check-box>
    </div>
    <div style="margin-top:10px;">
        <jqx-button theme="@ViewData["theme"]' on-click="validate()" id="loginButton" type="submit" value="Login"></jqx-button>
    </div>
</form>

To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.

<script src="~/jqwidgets/jqxvalidator.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxcheckbox.js"></script>
<script src="~/jqwidgets/jqxinput.js"></script>
<script src="~/jqwidgets/jqxpasswordinput.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Validator Example";
    List<KeyValuePair<string, object>> settings = new List<KeyValuePair<string, object>>()
    {
           new KeyValuePair<string, object>("rules", new List<ValidatorRule>()
            {
                new ValidatorRule() { Input ="#username", Action="keyup, blur", Rule="required" },
                new ValidatorRule() { Input ="#password", Action="keyup, blur", Rule="required" }
            }
        ),
        new KeyValuePair<string, object>("selector", "form"),
        new KeyValuePair<string, object>("theme", ViewData["Theme"])
    };
}
<script>
    var validator;
    function getValidator(instance) {
        validator = instance;
    }
    function validate() {
        validator.validate();
    }
</script>
<jqx-validator instance="getInstance()" hint-type="label" instance="getValidator()" settings="settings"></jqx-validator>
<form class="form" id="form" target="form-iframe" method="post" action="login.php" style="width: 650px;">
    <div>
        <h2>Login Demo</h2>
    </div>
    <label style="margin-top:10px;">Username:</label>
    <div style="margin-top:10px;">
        <jqx-input height="25" theme="@ViewData["theme"]' type="text" id="username" name="username"></jqx-input>
    </div>
    <label>Password:</label>
    <div style="margin-top:10px;">
        <jqx-password-input height="25" theme="@ViewData["theme"]' type="password" id="password" name="password"></jqx-password-input>
    </div>
    <div style="margin-top:10px;">
        <jqx-check-box theme="@ViewData["theme"]' name="rememberme" id="rememberme">Keep me logged in on this computer</jqx-check-box>
    </div>
    <div style="margin-top:10px;">
        <jqx-button theme="@ViewData["theme"]' on-click="validate()" id="loginButton" type="submit" value="Login"></jqx-button>
    </div>
</form>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["hideHint"](#username);									
	}									
</script>									
}

To bind to an event of a UI Component, you can use on-event-type syntax. The example code below demonstrates how to bind to an event.

<script src="~/jqwidgets/jqxvalidator.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxcheckbox.js"></script>
<script src="~/jqwidgets/jqxinput.js"></script>
<script src="~/jqwidgets/jqxpasswordinput.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "ASP .NET MVC Validator Example";
    List<KeyValuePair<string, object>> settings = new List<KeyValuePair<string, object>>()
    {
           new KeyValuePair<string, object>("rules", new List<ValidatorRule>()
            {
                new ValidatorRule() { Input ="#username", Action="keyup, blur", Rule="required" },
                new ValidatorRule() { Input ="#password", Action="keyup, blur", Rule="required" }
            }
        ),
        new KeyValuePair<string, object>("selector", "form"),
        new KeyValuePair<string, object>("theme", ViewData["Theme"])
    };
}
<script>
    var validator;
    function getValidator(instance) {
        validator = instance;
    }
    function validate() {
        validator.validate();
    }
</script>
<jqx-validator on-validation-error="eventHandler()" hint-type="label" instance="getValidator()" settings="settings"></jqx-validator>
<form class="form" id="form" target="form-iframe" method="post" action="login.php" style="width: 650px;">
    <div>
        <h2>Login Demo</h2>
    </div>
    <label style="margin-top:10px;">Username:</label>
    <div style="margin-top:10px;">
        <jqx-input height="25" theme="@ViewData["theme"]' type="text" id="username" name="username"></jqx-input>
    </div>
    <label>Password:</label>
    <div style="margin-top:10px;">
        <jqx-password-input height="25" theme="@ViewData["theme"]' type="password" id="password" name="password"></jqx-password-input>
    </div>
    <div style="margin-top:10px;">
        <jqx-check-box theme="@ViewData["theme"]' name="rememberme" id="rememberme">Keep me logged in on this computer</jqx-check-box>
    </div>
    <div style="margin-top:10px;">
        <jqx-button theme="@ViewData["theme"]' on-click="validate()" id="loginButton" type="submit" value="Login"></jqx-button>
    </div>
</form>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Basic Sample