RadPrompt Input Validation

4 posts, 0 answers
  1. Sunil
    Sunil avatar
    243 posts
    Member since:
    Jan 2004

    Posted 09 May Link to this post

    Requirements

    Telerik Product and Version

    Q2 2015 and later

    Supported Browsers and Platforms

    Chrome, Firefox, Opera, IE >=9, Edge

    Components/Widgets used (JS frameworks, etc.)

    jquery

    UPDATED on 10-Aug-2017 (update details)

    PROJECT DESCRIPTION

    This code library provides a JavaScript library called radPromptValidation.min.js that you can use in your website to validate input in RadPrompt dialog. You must have jQuery included for this library to work.

    INTRODUCTION
    RadPrompt allows input of data, but it doesn't validate the input.
    This JavaScript library overcomes the above mentioned limitation of RadPrompt and it requires no server-side code as it's a 100% client-side solution to RadPrompt validation.

    DEMO

    In attached zip file you can find detailed documentation on how to use this JavaScript library as well as the files needed to create a local demo on your computer.

    There is an online demo available at http://www.kandoodev.com/radpromptvalidation.aspx.  The online demo uses Q2 2015 version of Telerik controls, but it also works with latest version as I have verified on my end by creating a local demo website.

    An important feature in demo site is automatic code generation based on your validation requirements, so you can quickly start using this library by simply copying and pasting the generated code. The details of this can be found in the documentation file under Steps to use this library.  There is a button called Generate JavaScript code for above scenario in demo website that will automatically generate code based on various parameters you have specified.

    SAMPLE CODE when using this library

    Below is code for a particular validation scenario when using this library.

    //create a validatorObject that contains
    //all configuration details of radprompt validation
    var validatorObject = {validationType: "integer",
    isToolTipShown: true,
    isValidationErrorMessageShownInPrompt: true,
    validationErrorMessage: "Invalid input. Please input an integer.",
    inputToolTip: "Enter an integer",
    customValidatorFunction: null,
    numberOfDecimalPlaces: 1,
    dateFormat: null,
    decimalSeparator: ".",
    thousandsSeparator: ","
    };
    //message is the string you want to display in radprompt
    rpv.showRadPromptWithValidation(message,promptCallbackFn, 400, null, "RadPrompt Validation", validatorObject);



    Signature of exposed method

    The method exposed by rpv object is showRadPromptWithValidation returns a radwindow instance corresponding to the RadPrompt. This signature is as shown below.

    Signature of exposed method

    var radPromptInstance = rpv.showRadPromptWithValidation (message, promptcallbackfn, width, height, title, validatorObject)

     

    Styling Input Error

    Input error can be styled by using the following two CSS classes.

    1. radPromptInputError, which will style the input text box in RadPrompt
    2. radPromptErrorMessage, which will style the validation message shown in RadPrompt.

    CSS for styling input error in RadPrompt

    .radPromptInputError { border: 1px solid red !important; background-color: lightyellow !important; border-color: red !important; } .radPromptErrorMessage { color: red; }

    Number format in non-English format

    If the validation is of numeric type then non-English separators like comma for decimal point and space for thousands separator can also be used. You would need to specify when creating validatorObject. Sample code for this scenario is as below.

    Sample code for non-English numeric format

    //create a validatorObject that contains //all configuration details of radprompt validation var validatorObject = {validationType: "integer", isToolTipShown: false, isValidationErrorMessageShownInPrompt: true, validationErrorMessage: "Invalid input. Please input an integer.", inputToolTip: "Enter an integer", customValidatorFunction: null, numberOfDecimalPlaces: 1, dateFormat: null, decimalSeparator: ",", thousandsSeparator: " " }; //message is the string you want to display in radprompt rpv.showRadPromptWithValidation(message,promptCallbackFn, 400, null, "RadPrompt Validation", validatorObject);

     

    Library Compatibility

    This library will work across all Telerik skins and render modes. It will work equally well on mobile as well as desktop screens. It is highly advised to include the autosizing library  else sizing the RadPrompt could be a problem and very time-consuming for a devloper. This autosizing library can be found in demo attached or at following url: Autosizing library.



  2. Vessy
    Admin
    Vessy avatar
    1664 posts

    Posted 10 May Link to this post

    Hi,

    Thank you for your contribution, Sunil - I have updated your Telerik points accordingly.

    Regards,
    Vessy
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Sunil
    Sunil avatar
    243 posts
    Member since:
    Jan 2004

    Posted 10 Aug Link to this post

    RadPrompt validation library has been updated, so it works seamlessly with radwindow extended animation library. If you are using this library in a website, then simply replace the file radPromptValidation.min.js with the one in attachment.. When using this extended animation library, you can get smoother animations as compared to native animations and very easy positioning of RadPrompt as well as automatic auto-sizing of RadPrompt dialog

    An optional parameter called dialogOptions is part of the method rpv.showRadPromptWithValidation to enable this functionality. When you are not using the extended animation library, then you can omit this parameter. Sample code for this new feature is as given below.

     

    //create a validatorObject that contains
    //all configuration details of radprompt validation
    var validatorObject = {validationType: "integer",
    isToolTipShown: true,
    isValidationErrorMessageShownInPrompt: true,
    validationErrorMessage: "Invalid input. Please input an integer.",
    inputToolTip: "Enter an integer",
    customValidatorFunction: null,
    numberOfDecimalPlaces: 1,
    dateFormat: null,
    decimalSeparator: ".",
    thousandsSeparator: ","
    };
     
    //create dialogOptions paramter for integrating this library with radwindow extended animation library
    var dialogOptions = {};
    var dialogOptions = {};
    dialogOptions.openjqAnimation = 'bounce';
    dialogOptions.openjqAnimationEasing = 'swing';
    dialogOptions.openjqAnimationDuration = 400;
    dialogOptions.closejqAnimation = 'explode';
    dialogOptions.closejqAnimationEasing = 'swing';
    dialogOptions.closejqAnimationDuration = 800;
    dialogOptions.showCountDown  = false;
    dialogOptions.jqUIAnimationEnabled = true;
    dialogOptions.isPositionFixed = false;
     
    //message is the string you want to display in radprompt. NOTE the last paramter of dialogOptions
    rpv.showRadPromptWithValidation(message,promptCallbackFn, 400, null, "RadPrompt Validation", validatorObject, dialogOptions);

     

  4. Vessy
    Admin
    Vessy avatar
    1664 posts

    Posted 10 Aug Link to this post

    Hi Sunil,

    Thanks a lot for the update - I have updated the initial post with the provided project and added the corresponding amount of Telerik points to your account.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top