Client validation does not work on "blur" and "keyup" before the first submit attempt

12 posts, 0 answers
  1. Anton
    Anton avatar
    7 posts
    Member since:
    Dec 2012

    Posted 16 Jul 2013 Link to this post

    Jquery client validation  on "blur" and "keyup" and so on works only after the first submit attempt. Try the following scenario in attached application:
    1.  Type correct number into field "Count2"
    2. Click outside the numericbox to loose focus
    3. Clear the numericbox. Validation message "Field is required" does not appear.
    3. Click outside the numericbox to loose focus. Validation message "Field is required" does not appear.
    4. Click submit button. Validation message "Field is required" appears. From this moment validation begins working as expected.
    5. Start to type correct number. Validation message disappears.
    6. Clear the numeric box. Validation message appears again

    Why  validation message does not appear at steps 3 and 4? It appears correctly at step 3 for simple HTML text input and even for Kendo datepciker, but not for Kendo numericbox.


  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Jul 2013 Link to this post

    Hello Anton,

    The attachment did not make it though. Could you please re-send the project so we can check what is going wrong? Please have in mind that allowed extensions are zip, rar, ace, jpg, gif, css, png. If you are going to attach a .html file, please archive it at first.

    Thank you in advance.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Anton
    Anton avatar
    7 posts
    Member since:
    Dec 2012

    Posted 18 Jul 2013 Link to this post

    Ups, I'm sorry.The file size was greate than 2MB. Project is attached now.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Jul 2013 Link to this post

    Hello Anton,

    Thank you for the project.

    I am not an expert in jQuery validator, but I believe that this is the default behaviour of the plug-in. Required fields are not validated on blur/keyup until the user presses submit for first time.

    The same behaviour can be achieved with standard text boxed. Please check the screencast:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Anton
    Anton avatar
    7 posts
    Member since:
    Dec 2012

    Posted 23 Jul 2013 Link to this post

    Hello Alexander,

    Your test case is not the same as my. Perform exactly the following steps for simple input or even for DatePicker and then for NumericTextBox:
    1. type correct number into the input" (I mean type manually, for example "123", to change  an initial value "0")
    2. Click outside input
    3. Clear input value.

    At step 3 the message "Field is required" appears for simple input and even for DatePicker, but it does not appear for NumericTextBox.

    The behavior of jQuery.validate is start to check input value in "real-time" after first blur event if input value at this moment is not empty.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Jul 2013 Link to this post

    Hi Anton,

    I was able to reproduce the behaviour by following the exact steps. I can confirm that there is a problem, however at present we are not sure what causes it. The fact that validation does not work the first time, but works after submit button is pressed suggests that the problem might be related to jQuery validate (Kendo Numeric text box does not change after the submit button is pressed).

    We will log this case for further investigation. I am afraid that at present I cannot say when or if this will be fixed, as we do not know the root of the problem yet.

    Please accept my apology for the inconvenience caused.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Anton
    Anton avatar
    7 posts
    Member since:
    Dec 2012

    Posted 31 Jul 2013 Link to this post

    Thanks Alexander!

    I was expecting an answer like yours, because the problem is not a significant. But thanks anyway!
  9. Mark
    Mark avatar
    2 posts
    Member since:
    Jul 2012

    Posted 28 Aug 2013 Link to this post

    I'm wondering of this is related...

    I have a KendoUI Web Grid, with a popup window used for adding and editing rows. The popup has 2 textareas, and a custom validator to make sure that at least 1 of the textareas has a value before allowing a user to submit the edit.

    In the case where both textareas are empty when the popup shows, if the user hits the submit button, custom messages appear below both textareas, and the submit is cancelled. This is exactly what should happen.

    Supposed that the user then enters text into one of the textareas and clicks submit again. What should happen is the validation should pass since one of the textareas now has text entered, and the submit should proceed. What does happen is that the validation is not run again and the error message below the blank textarea remains.

    I can hide the error text with hideMessages(), and have tried to call a manual button click with trigger('click'), but I have found  no way to have the submit button work again until the user clicks on it a second time. Most users have been trained to only click a submit button once, so they think the web page is frozen.

    Is this from the possible jQuery error alluded to above, or is this a seperate issue?

    Thanks,
    MH
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 30 Aug 2013 Link to this post

    Hi Mark,

    I did not understand - are you using jQuery validator or Kendo UI Validator? If you are not using jQuery validator, then the issue is not related to the original one and I would like to ask you to open new thread/ticket.

    On a side note, do you see any JavaScript errors in the console? Can you isolate the case in a jsBin sample page that I could run and examine locally? In this way I will be able to check your current configuration (code) and assist you further.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Mark
    Mark avatar
    2 posts
    Member since:
    Jul 2012

    Posted 06 Sep 2013 Link to this post

    Hi Alexander,

    The problem I'm experiencing is with the Web Grid configured for editing in popup mode, that has validation on 2 textareas in the popup editor.

    For this example project, I began by copying the demo code for the web grid with the popup editor from your demo page:

    http://demos.kendoui.com/web/grid/index.html

    I made the following changes:

    1. Added <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    2. Added bootstrap.min.css
    3. Changed the edit column position from right to left
    4. Add ProductDesc column to dataSource schema (so that we can have 2 textareas)
    5. Add ProductDesc to grid columns config
    6. Changed the editable config to use a template (we wanted this to control the editor popup)
    7. Updated the command column config to display buttons with icons only, no text
    8. Added the validation code to the edit command click config

    You should be able to unzip the attached Visual Studio project and run it. There will be a grid displayed and you can click the edit icon on any row. The editor popup window has 2 textareas that have validation to ensure that at least one of them has a value before you are permitted to submit changes.

    The error occurs when you do this in the editor popup:

    1. delete all text from both textareas
    2. click the Update button
    3. error messages will be displayed below both textareas
    4. enter text into one of the textareas
    5. click Update again
    6. what SHOULD happen: the textareas are now valid, so the update should be submitted
    7. what DOES happen: the error message remains below the empty textarea, and the update is prevented until a SECOND click is made on the Update button. (You can also click anywhere inside the editor popup and then click Update. The thing you must do is click somehwere twice!)

    To fix this, I tried to call submit on the form with javascript, and I tried raising all kinds of blur and focus events. No matter what strategy I tried, you had to click the Update button twice before the editor would submit. 

    My final fix was to bypass the KendoUI Validator altogether, and manually check the textareas, while styling editor popup elements to visually alert the user to the error condition and calling a javascript alert. I would have greatly preferred to use the native KendoUI Validator though.

    Hopefully this is enough to demonstrate the problem, and possibly you can either point out what I was doing incorreclty, or forward this on as a bug.

    Thanks,
    MH
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 10 Sep 2013 Link to this post

    Hi Mark,

    You are initializing kendo validator at the click event of the edit command button which is incorrect. In this way the editor form will have two validators (the default and the custom made one) which may cause troubles.

    Custom validation rules should be attached to the default Validator instance. They should be defined in the dataSource.model.schema.field configuration.
    ProductName: {
        type: "string",
        validation: {
            required: true,
            customRule: function (input) { console.log(input); return true; }
        }
    },

    Please follow the recommended approach and let me know if the problem still persists.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 30 Sep 2013 Link to this post

    Hello guys,

    @Anton
    After further investigation, it seems that the issue you reported is related to jQuery validate itself. The validation works as expected with jQuery.validate v1.10.0

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready