Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Chung Khoa
150
Get validation result of all combobox in a form.
posted

When using jquery.validate to validate my form, i can get all error in my form before submit via validator.errorList.

1. If i use ignite comboboxes in my form, how do i get all comboboxes that failed validation?

2. The default behavior is a red message under combobox when it's failed validation. I want to customize this behavior - move the validation message around and remove the default red message. How can i do that?

  • 4315
    Suggested Answer
    Offline posted

    Hi, Chung.

    The validator we are using for our controls is internal and its API is not exposed. That's why I will show you all the events and show you how to get all the options and configure them for you case. Please also read the comments inside the code snippet below. Note that you can check if each single combo is valid, because each on of them has its own validator object. 

    Code Snippet
    1. $(function () {
    2.     var validator;
    3.     $("#comboIG").igCombo({
    4.         allowCustomValue: true,
    5.         dataSource: arrayOfJSONs,
    6.         valueKey: 'firstName',
    7.         textKey: 'firstName',
    8.         validatorOptions: {
    9.             required: true,
    10.             errorMessage: "Custom Message",
    11.             formSubmit: true, // This will fire 'validation' event when the form is submitted
    12.             onsubmit: true,
    13.             onchange: false, // If you want to have validation only on submiting, but not change or blur
    14.             onblur: false, // If you want to have validation only on submiting, but not change or blur
    15.             alignment: "right", // Customize the position of the message
    16.             bodyAsParent: true,
    17.             // The other optins can be found in the validatorOptions object below
    18.             checkValue: function(evt, ui){
    19.                 // Event which is raised on validation before default validation logic is applied.
    20.             },
    21.             validation: function (evt, ui) {
    22.                 // Event which is raised after value was validated but before any action takes effect.
    23.                 var isInvalid = ui.invalid,
    24.                     message = ui.message;
    25.             },
    26.             errorShowing: function (evt, ui) {
    27.                 // Event which is raised before error message is displayed.
    28.                 var isInvalid = ui.invalid,
    29.                     message = ui.message;
    30.                 return false; // This will not show the defatult message. Use it if you have your own custom one.
    31.             },
    32.             errorHiding: function (evt, ui) {
    33.                 // Event which is raised before error message is hidden.
    34.             },
    35.             errorShown: function (evt, ui) {
    36.                 // Event which is raised after error message was displayed.
    37.             },
    38.             errorHidden: function (evt, ui) {
    39.                 // Event which is raised after error message was hidden.
    40.             }
    41.         },
    42.         dataBound: function (evt, ui) {
    43.             var validatorOptions;
    44.  
    45.             validator = ui.owner.validator();
    46.             validatorOptions = validator.options; // Get all the options you can apply to validator
    47.         }
    48.     });
    49. });

    1. You need to have 'formSubmit' and 'onsubmit' options set to true, and then if you have a handler for 'validation' event, it will be fired on form submit. Then for each one of the igCombo elements on the page, you can check if they are valid or not.

    2. Using the validator, options you can customize the behavior of the error message. Or inside the errorShowing event, you can return false, cancel that event, and create your own message.

    I will wait for you response, if my answer was useful for you and if it helped you to resolve your case.

    Best regards,
    Nikolay Alipiev