Ignite UI API Reference

ui.igValidator

ui.igValidator_image

The igValidator control provides validation support for the array of Ignite UI editor controls. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The igValidator control is a jQuery UI widget that handles validation for the igEditors. For more details on the igValidator control’s API, refer to the base igEditor control’s API documentation.

The following code snippet demonstrates how to initialize the igValidator control.

For details on how to reference the required scripts and themes for the igValidator control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

       <!doctype html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
            <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>            
            <!-- Infragistics Combined Scripts -->
            <script src="js/infragistics.core.js" type="text/javascript"></script>
            <script src="js/infragistics.lob.js" type="text/javascript"></script>
            <script type="text/javascript">
                $(function(){
                     $("#validator").igValidator({
                          width: 200,
                          required:true
                     });
                });
            </script>
        </head>
        <body>
           <input id="validator" />
        </body>
        </html>

Related Samples

Dependencies

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js

Inherits

  • alignment

    Type:
    string
    Default:
    null

    Gets or sets location of error label relative to target element.
    Supported value: "bottom", "left" and "right".
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is "bottom".

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            alignment: "bottom"
        });
        
        //Get
        var alignment = $(".selector").igValidator("option", "alignment");

        //Set
        $(".selector").igValidator("option", "alignment", "bottom");

  • animationHide

    Type:
    number
    Default:
    null

    Gets or sets duration of hide animation in milliseconds.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is 300.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            animationHide : 400
        });

        //Get
        var animation = $(".selector").igValidator("option", "animationHide");

        //Set
        $(".selector").igValidator("option", "animationHide", 400);

  • animationShow

    Type:
    number
    Default:
    null

    Gets or sets duration of show animation in milliseconds.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is 300.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            animationShow : 400
        });

        //Get
        var animation = $(".selector").igValidator("option", "animationShow");

        //Set
        $(".selector").igValidator("option", "animationShow", 400);

  • bodyAsParent

    Type:
    bool
    Default:
    true

    Gets or sets parent/location of error message.
    Value true: use the document.body as parent for error-message.
    Value false: insert error-message in parent of target element.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            bodyAsParent : false
        });

        //Get
        var bodyLocation = $(".selector").igValidator("option", "bodyAsParent");

        //Set
        $(".selector").igValidator("option", "bodyAsParent", false);

  • checkboxesName

    Type:
    bool
    Default:
    false

    Gets or sets option to use the name attribute of checkboxes in order to validate ranges.
    That option has effect only when the target is checkbox. The value of true will use the "name" attribute of target to validate all checkboxes with that name.
    In this case the "required" option will be used to check if at least one checkboxes is checked and the "min/maxLength" options will be used for range validations.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            checkboxesName : true
        });

        //Get
        var validateRanges = $(".selector").igValidator("option", "checkboxesName");

        //Set
        $(".selector").igValidator("option", "checkboxesName", true);

  • element

    Type:
    domelement
    Default:
    null

    Gets or sets reference to html element, which is used to process mousedown and mouseup events in order to trigger validation.

    Code Sample

            
        //create the dom element
        var delement=document.getElementById(".selector");

        $(".selector").igValidator({
            element: delement
        });
		
        //Get
        var domelement = $(".selector").igValidator("option", "element");
	
        //Set
        $(".selector").igValidator("option", "element", delement);

  • enableTargetErrorCss

    Type:
    bool
    Default:
    null

    Gets or sets ability to apply error css to target element.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is true.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            enableTargetErrorCss : true
        });

        //Get
        var errorCssEnabled = $(".selector").igValidator("option", "enableTargetErrorCss");

        //Set
        $(".selector").igValidator("option", "enableTargetErrorCss", true);

  • errorLabel

    Type:
    domelement
    Default:
    null

    Gets or sets custom jquery element, which innerHTML will be used to show error message. That can be SPAN, LABEL or DIV.

    Code Sample

             
        //Initialize
        $(".selector").igValidator({
            errorLabel : "Error"
        });

        //Get
        var label = $(".selector").igValidator("option", "errorLabel");

        //Set
        $(".selector").igValidator("option", "errorLabel", "Error");

  • errorMessage

    Type:
    string
    Default:
    null

    Gets or sets text for error-message which overrides all possible specific error-messages.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            errorMessage : "An error occurred."
        });

        //Get
        var errorText = $(".selector").igValidator("option", "errorMessage");

        //Set
        $(".selector").igValidator("option", "errorMessage", "An error occurred.");

  • formSubmit

    Type:
    bool
    Default:
    null

    Gets or sets triggering validation when application called form.submit().
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is false.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            formSubmit : true
        });

        //Get
        var formSubmit = $(".selector").igValidator("option", "formSubmit");

        //Set
        $(".selector").igValidator("option", "formSubmit", true);

  • keepFocus

    Type:
    enumeration
    Default:
    null

    Gets or sets option to set focus back to editor when validation failed. Default value comes from corresponding member in $.ui.igValidator.defaults object, which is undefined. .

    Members

    • never
    • Type:string
    • 0
    • Type:number
    • once
    • Type:string
    • 1
    • Type:number
    • always
    • Type:string
    • 2
    • Type:number

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            keepFocus : "string"
        });

        //Get
        var keepFocus = $(".selector").igValidator("option", "keepFocus");

        //Set
        $(".selector").igValidator("option", "keepFocus", "string");

  • locale

    Type:
    object
    Default:
    null

    Gets or sets object that contains custom settings.

    Code Sample

            //create a custom object
        customobject={
            defaultMessage: "You see this message"
        }
			
        $(".selector").igValidator({
            locale:customobject
        });
		
        //Get
        var objectlocale = $(".selector").igValidator("option", "locale");
	
        //Set
        $(".selector").igValidator("option", "locale", customobject);

  • max

    Type:
    number
    Default:
    null

    Gets or sets validation for maximum number.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            max : 1000
        });

        //Get
        var maxNum = $(".selector").igValidator("option", "max");

        //Set
        $(".selector").igValidator("option", "max", 1000);

  • maxLength

    Type:
    number
    Default:
    -1

    Gets or sets maximum length of text or maximum number of selected items.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            maxLength : 20
        });

        //Get
        var maxTextLength = $(".selector").igValidator("option", "maxLength");

        //Set
        $(".selector").igValidator("option", "maxLength", 20);

  • min

    Type:
    number
    Default:
    null

    Gets or sets validation for minimum number.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            min : 0
        });

        //Get
        var minNum = $(".selector").igValidator("option", "min");

        //Set
        $(".selector").igValidator("option", "min", 0);

  • minLength

    Type:
    number
    Default:
    -1

    Gets or sets minimum length of text or minimum number of selected items.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            minLength : 5
        });

        //Get
        var minTextLength = $(".selector").igValidator("option", "minLength");

        //Set
        $(".selector").igValidator("option", "minLength", 5);

  • onblur

    Type:
    bool
    Default:
    null

    Gets or sets triggering validation when editor lost focus.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is true.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            onblur : true
        });

        //Get
        var validateOnBlur = $(".selector").igValidator("option", "onblur");

        //Set
        $(".selector").igValidator("option", "onblur", true);

  • onchange

    Type:
    bool
    Default:
    null

    Gets or sets triggering validation when value in editor was changed.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is true.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            onchange : true
        });

        //Get
        var validateOnChange = $(".selector").igValidator("option", "onchange");

        //Set
        $(".selector").igValidator("option", "onchange", true);

  • onsubmit

    Type:
    bool
    Default:
    null

    Gets or sets triggering validation when form gets onsubmit event.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is true.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            onsubmit : true
        });

        //Get
        var validateOnSubmit = $(".selector").igValidator("option", "onsubmit");

        //Set
        $(".selector").igValidator("option", "onsubmit", true);

  • regExp

    Type:
    enumeration
    Default:
    null

    Gets or sets regular expression which is used to validate value in text editor.

    Members

    • string
    • Type:string
    • A string containing regular expression.
    • object
    • Type:object
    • A RegExp object.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            regExp : "^\\d*\\.{0,1}\\d+$"
        });

        //Get
        var regEx = $(".selector").igValidator("option", "regExp");

        //Set
        $(".selector").igValidator("option", "regExp", "^\\d*\\.{0,1}\\d+$");

  • required

    Type:
    bool
    Default:
    false

    Gets or sets option to validate if value was entered (not empty text, selected item, etc.).

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            required : true
        });

        //Get
        var isRequired = $(".selector").igValidator("option", "required");

        //Set
        $(".selector").igValidator("option", "required", true);

  • showIcon

    Type:
    bool
    Default:
    null

    Gets or sets visibility of icon on error message.
    Default value comes from corresponding member in $.ui.igValidator.defaults object, which is true.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            showIcon : true
        });

        //Get
        var isIconShown = $(".selector").igValidator("option", "showIcon");

        //Set
        $(".selector").igValidator("option", "showIcon", true);

  • theme

    Type:
    string
    Default:
    null

    Gets or sets selector for css classes.
    That option allows replacing all default css styles of validator by custom values.
    Application should provide css classes for all members defined in the css options with "theme" selector.

    Code Sample

     
        //Initialize
        $(".selector").igValidator({
            theme : "redmond"
        });

        //Get
        var theme = $(".selector").igValidator("option", "theme");

        //Set
        $(".selector").igValidator("option", "theme", "redmond");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • checkValue

    Cancellable:
    true

    Event which is raised on validation before default validation logic is applied.
    Return false in order to consider value as invalid and to display error message with ui.message.
    Function takes arguments evt and ui.
    Use ui.message to get text of message.
    Use ui.value to get current value in target.

    Code Sample

            $(document).delegate(".selector", "igvalidatorcheckvalue", function (evt, ui) {

            //gets text of message
            ui.message;
            //gets current value in target
            ui.value;

        });

        //Initialize
        $(".selector").igEditor({
            checkValue: function (evt, ui) {
            ...
            }
        });

  • errorHidden

    Cancellable:
    false

    Event which is raised after error message was hidden.
    Function takes arguments evt and ui.
    Use ui.message to get text of message.

    Code Sample

            $(document).delegate(".selector", "igvalidatorerrorhidden", function (evt, ui) {

            //gets text of message
            ui.message;

        });

        //Initialize
        $(".selector").igEditor({
            errorHidden: function (evt, ui) {
            ...
            }
        });

  • errorHiding

    Cancellable:
    true

    Event which is raised before error message is hidden.
    Return false in order to keep error message displayed.
    Function takes arguments evt and ui.
    Use ui.message to get text of message.

    Code Sample

            $(document).delegate(".selector", "igvalidatorerrorhiding", function (evt, ui) {

            //gets text of message
            ui.message;

        });

        //Initialize
        $(".selector").igEditor({
            errorHiding: function (evt, ui) {.
            ...
            }
        });

  • errorShowing

    Cancellable:
    true

    Event which is raised before error message is displayed.
    Return false in order to prevent error message display.
    Function takes arguments evt and ui.
    Use ui.message to get text of message.

    Code Sample

             $(document).delegate(".selector", "igvalidatorerrorshowing", function (evt, ui) {

            //gets text of message
            ui.message;

        });

        //Initialize
        $(".selector").igEditor({
            errorShowing: function (evt, ui) {
            ...
            }
        });

  • errorShown

    Cancellable:
    false

    Event which is raised after error message was displayed.
    Function takes arguments evt and ui.
    Use ui.message to get text of message.

    Code Sample

            $(document).delegate(".selector", "igvalidatorerrorshown", function (evt, ui) {

            //gets text of message
            ui.message;

        });

        //Initialize
        $(".selector").igEditor({
            errorShown: function (evt, ui) {
            ...
            }
        });

  • validation

    Cancellable:
    true

    Event which is raised after value was validated but before any action takes effect.
    Return false to keep possible old/current error message unchanged, and possible new error message is not displayed.
    Function takes arguments evt and ui.
    Use ui.message to get text of message.
    Use ui.invalid to get state, where true is invalid and false is valid.

    Code Sample

     
        $(document).delegate(".selector", "igvalidatorvalidation", function (evt, ui) {

          //gets text of message
          ui.message;
          //gets state where true is invalid and false is valid
          ui.invalid;
      });

      //Initialize
      $(".selector").igEditor({
          validation: function (evt, ui) {
          ...
          }
      });

  • destroy

    .igValidator( "destroy" );
    Return Type:
    object
    Return Type Description:
    Returns reference to this igValidator.

    Destroys igValidator.

    Code Sample

     
      $(".selector").igValidator("destroy");

  • getLocaleOption

    .igValidator( "getLocaleOption", name:string );
    Return Type:
    string
    Return Type Description:
    Returns value of locale option.

    Gets calculated value of locale option used by validator.

    • name
    • Type:string
    • Name of locale option such as "requiredMessage", "minMessage", etc.

    Code Sample

     
      var localeString = $(".selector").igValidator("getLocaleOption");

  • hide

    .igValidator( "hide", [keepCss:bool] );

    Hide possible error message.

    • keepCss
    • Type:bool
    • Optional
    • True: keep error-css applied to target, false: remove error-css from target.

    Code Sample

     
      $(".selector").igValidator("hide", true);

  • isMessageDisplayed

    .igValidator( "isMessageDisplayed" );
    Return Type:
    bool
    Return Type Description:
    Returns true if message is displayed, false if message is not displayed.

    Checks if message is displayed.

    Code Sample

     
        var messageDisplayed = $(".selector").igValidator("isMessageDisplayed");

  • isValidState

    .igValidator( "isValidState" );
    Return Type:
    bool
    Return Type Description:
    Returns true if target in valid state, false if target invalid.

    Checks if target element in valid state.

    Code Sample

     
      var isValid = $(".selector").igValidator("isValidState");

  • validate

    .igValidator( "validate", [e:object], [submit:number], [check:bool] );

    Trigger validation.
    returnType="number|object" Possible values:
    1 - application canceled error message.
    2 - error message is displayed
    Any other value or undefined means that target is valid.

    • e
    • Type:object
    • Optional
    • Reference to browser event.
    • submit
    • Type:number
    • Optional
    • Value 1 is used when validation was triggered by submit.
    • check
    • Type:bool
    • Optional
    • Internal use only: check if value is valid and do not show any error message or styles.

    Code Sample

          var validate = $(".selector").igValidator("validate");

  • ui-igvalidator-icon ui-icon ui-icon-alert

    Classes applied to the SPAN on error-label which contains image. Default value is 'ui-igvalidator-icon ui-icon ui-icon-alert'.

  • ui-igvalidator ui-widget ui-state-error ui-corner-all

    Classes applied to the SPAN element of error-label which shows message. Default value is 'ui-igvalidator ui-widget ui-state-error ui-corner-all'.

  • ui-igvalidator-target

    Class applied to the target element when validation failed. Default value is 'ui-igvalidator-target'.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.

#