This discussion is archived
1 2 Previous Next 21 Replies Latest reply: Jan 22, 2013 4:34 AM by Tom Petrus Go to original post RSS
  • 15. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Tom,

    I am sorry to miss this line in our post, i have made changes to the code, i have done a small test i think it sholud be ok now.
    Here the code what i had made changes, by adding event.preventDefault.

    focus  : function(event , ui){
                        if(cityValue !=""){
                            cityItemSelected = true; 
                                  event.preventDefault(); 
                         };
                      }, 
    But still i am curious to know why my code is not working when i am trying to validate before submitimg the record.

    Once again i am sorry to say that the functionalty is not wroking gaian when i am trying to select from list item or from keyword, even tough afater adding event.prventDefault() was not up to the mark. Please assit me here.

    I had alos observed that when we select from list and if we enter any mismatch data, once again if we click on cursor on item and come out of foucs then the value is getting cleard.
    Regards,
    Anoo..

    Edited by: Anoo on Jan 21, 2013 4:30 AM

    Edited by: Anoo on Jan 21, 2013 4:51 AM
  • 16. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    Anoo,
    It is getting a bit complex indeed. Right off the bat though, many issues now would be present in the code started with. There are some good reasons for why we are seeing some behaviours, even though initially i wasn't stumbling on them.
    First off: selecting an item and all the weird things that happen after that. For example (and i didn't think of this first), you can enter 'Mag' in the cities. You could then choose the value from the select list by clicking it, and the dropdown closes and the value is put in the textbox. The cursor however has not left the field yet. At this point, the global variables have been set. Altering the value now by for example adding "test" to it will simply work as the blur function would think an item has been selected due to the "citySelected" variable set to true (in the select function).

    Leaving the select function blank would not help either, as the blur function will do weird things. At first you might think it works, but don't forget: the blur function actually fires too when you for example click an item from the dropdown list. After you tab, it fires again.
    Now say i enter "India" as country, and "Ma" for city. I'd pick "Mahglutan", and it works fine. I go back, enter "Ma", pick "Malacca". Box is cleared! Okay okay, this is because of how the blur function is set up: it checks a variable to see whether something has been picked or not. So: the select function must remain to at least indicate a pick has been made.
    Now, how to change the blur function though? It has to be in place because you require to automagically pick the first dropdown entry when the item is left through means other than the TAB-key. This setup requires us to use variables to check some things.

    Honestly, I don't see any other way to solve this than to immediatly fire a validation on the field to catch these cases, since that seems to be what you want. (Ideally, you should provide a server side validation aswell.)

    So, some changes, again. (city as example)
    $( function() {
       $("#P1_ENG_CITY").autocomplete({
         source : function( request , response) {
                  data = getCityJ(request.term);
                  response( data ); } ,
         focus  : function(event , ui){
                     event.preventDefault();
                  },
         select : function(event, ui) {
                     cityItemSelected = true;
                  },
         change : function(event,ui) {
                     if ($('P1_ENG_CITY').val()==null || $('P1_ENG_CITY').val()==""){
                        $("#P1_ENG_STATE").val('');
                     };
                  }
       })
       .live('blur', function (e) {
          if(!cityItemSelected){
              //The dropdown will be hidden when a selection has been made, so this part must be skipped
              //when a value has been picked from the dropdown, even though the user could have altered
              //the value after picking one.
             if($("#P1_ENG_CITY").val() != cityValue){         
                var lText = $(".ui-autocomplete li:visible:first").text();
                //if lText is empty than no values were present in the dropdown = invalid
                if(lText==''){
                   alert('The value for city is invalid.')        
                };
                $("#P1_ENG_CITY").val(lText);
                cityValue = lText;
             };
          }else{
             //validate the value, but only if values are not still blank or are identical
             if(!(cityValue=='' && $("#P1_ENG_CITY").val()=='')){
                var lCities = getCityJ($("#P1_ENG_CITY").val()), lValid = false;
                $.each(lCities, function(index, value){
                   if(value===$("#P1_ENG_CITY").val()){
                      lValid = true;
                   };
                });
                if(lValid){
                   //pass
                   cityValue = $("#P1_ENG_CITY").val();
                }else{
                   //the choice does not exist in the provided values
                   cityValue = ''; //invalidate previous values
                   alert('The value for city is invalid.');
                };
             };
          };
          cityItemSelected = false;
       });
    });
    focus: prevent default action
    select: indicate an actual selection has been made
    blur: if nothing selected, then auto select first value. If auto selected value is an empty string then this means no valid values were present -> invalid value has been entered (ex: dskjfhdsjkfhsdkjf)
    if something was selected, picked through mouse or tab from dropdown, then validate value first. This makes another ajax call to retrieve the list of valid countries/cities according to the current values of the item(s). If no value matches the item's current value, then the value is invalid. (ex: pick Macalla but then enter more characters: Macallaaaaa)
    If you still have behaviour you think is weird or bugged, then please provide a clear case as to what exactly is entered and has to be entered, as i just can't keep track of every little bit. Ff you aren't very comfortable in javascript, then i'd rate this as close as non-maintainable for you, and it doesn't help in a case such as this where you have 120 lines of javascript dedicated to only 2 items on the page...
  • 17. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Tom,

    Thanks for all your efforts on this issue, you have really supported me a lot.
    As per your source code provided for City, i have made changes accordingly to country too and tested all the scenerio.
    All went fine, expect for one test case, in order to reproduce the same i have updated the code for country and city in our example.
    Could you please help here on this scenerio too.

    The problme is with keyword and mouse event as observed by me.
    The issue is,

    1. I have enter country as "Ind" and immediately selected from list, before moving the cursor to City field, i have append few junk values in country field as "IndiaCountry" and
    when the cursor is moved to city filed, it is throwing "java script" error as "Lenght is null or nor an object" .

    2. Same thing was happeing in country and city too, we can reproduce the same in our example forums.

    3. Could you please look at a glance on this problem.

    Many thanks for source code provided to us.

    Regards,
    Anoo..
  • 18. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    You are correct. Stupid how i could miss that, but that's how it goes.
    This is the validation failing: for example entering "Indiaaaaaa" after selecting it from the list would return no values through the ajax callback, which means that the return value of the function (getCountries, getCities) is null, and not even an empty array. The $.each() function then causes the javascript error. To fix that i had to put a check around this piece (in the blur function, else branch).
    var lCountries = getCountry($("#P1_ENG_CTRY").val()), lValid = false;
    if(!!lCountries && lCountries.length>0){
       $.each(lCountries, function(index, value){
          if(value===$("#P1_ENG_CTRY").val()){
             lValid = true;
          };
          console.log("after validation loop");
       });
    };
    I changed the code in your application 49934, the "Where" region (as before), for both country and city.
  • 19. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Thanks Tom the validation is working as expected. Let me show demo to users and we will be in touch base if required.
    Currently i will close this ticket, as it got resolved now.



    I had made small change to the below code, by adding the  $("#P1_ENG_CTRY").val(''); to clear the value if we add the from list.
    
    if(lValid){
                 //pass
                 ctryValue = $("#P1_ENG_CTRY").val();
                 }else{
                 //the choice does not exist in the provided values
                 ctryValue = ''; //invalidate previous values
                 alert('The value for country is invalid End.');
                 $("#P1_ENG_CTRY").val('');
                };
               };
               
          };           
             ctryItemSelected = false;
          
       });
    });
    Regards,
    Anoo..
  • 20. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Thanks Tom it is a really great effect from you to fix my problem. The way you have expilaned the logic with comments was awesome to know what exactly is happening with events. It's a great pleaasure wroking with you in forums and having much patience for helping me out to resolve the problem.

    Once again many thanks to you!!

    Regards,
    Anoo..
  • 21. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    You'd do me (and other users of course ) a pleasure by marking the post(s) as helpful or correct! ;-)
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points