This discussion is archived
11 Replies Latest reply: Jan 4, 2013 9:52 PM by 665735 RSS

Need help Jquery in Apex validation

665735 Newbie
Currently Being Moderated
Hi All,

Wish you a happy and prospeous new year-2013 in advance.
--

We have a request from users here are the scenario which we had implemented in Jquery

1. We have a autocomplete Jquery country field, where users can enter and selects from the list.
2. But if they enter manually in autocomplete filed insted of selecting from list, then also it should process the flow, But the current scenerio will process only when they select from the list.
3. If we enter country as “India” for that they have to select city as “Delhi”, but if they select some other thing which is not belongs to country then we have handle error message.

Below Is the code we are using currently, could you please help how we can handle the above scenarios’. 
var validCity=true;
function validateCITY()
{ 
$("#P1_ENG_CITY").each (function ()
{
var data=$.data (this); //this -> should be the object or Text box element
if (data.autocomplete.selectedItem) //Here we will check for selectedItem from back end. 
{
if(data.autocomplete.selectedItem==undefined) //If the value not exist in list then we will show this message as marked in red color.
{
validCity = false; //error scenario
$(this).css("background-color","#FF0000"); //Red color
alert("City value selected is not present in autocomplete");
return false;
}
else
{
$(this).css("background-color","#FFFFFF"); //success scenario white color
validCity = true;
}
}
else
{
validCity = false; //error scenario
$(this).css("background-color","#FF0000"); //Red Color
alert("City value selected is not present in autocomplete ");//But if they enter manually then we are showing this message.
}
});
return validCity;
}
Thanks in advnace and waiting for a solution to resolve the problem.

Regards,
Anoo..
  • 1. Re: Need help Jquery in Apex validation
    665735 Newbie
    Currently Being Moderated
    Hi All,

    After few anlayis on Jquery i had made few changes to handle the scenerio as mentine below, but some thing i am missing where it is not accurate values.
    --
    var validCity=true;
    function validateCITY()
    { 
    
         $("#P1_ENG_CITY").each(function ()
         {
              var data=$.data(this); //this -> should be the object or Text box element
              var man_val_city = $(this).val();
              if (data.autocomplete.selectedItem)
              {
                  
                   if(data.autocomplete.selectedItem==undefined)
                   {
                       
                      validCity = false;  //error scenario
                        $(this).css("background-color","#FF0000"); //Red color
                        alert("City value selected is not present in autocomplete");
                        return false;
                   }
                   else
                   {
                        
                        $(this).css("background-color","#FFFFFF"); //success scenario white color
                        validCity = true;
                   }
              }
              else
              {
              
    
    /* Added logic here. 
    *  if we come into this else loop, user has entered city manually.
    * So, first set the valid flag to false.
    * Now, check each item in database list if the entered value is available.
    * If yes, set validCity to true, set the css and break from the for loop
    * After the for loop, check again for the valid flag.
    * If the value was not there in the list, the validFlag would still be false and will enter the if loop after the for loop
    * Here, set ur error message and css.
    */
         
                                        var source_city = $(this).val().toLowerCase();
                   var found_city = $('.ui-autocomplete li').text().toLowerCase().search(source_city);
         alert("The value of city is"+ found_city); --found_city value is returning as value 0 and hence it is going else part..Can any one help me the syntax is correct or not.
                   if(found_city < 0) {
                      //$(this).val('');
                      validCity = false; //error scenario
                        $(this).css("background-color","#FF0000"); //Red Color
                        alert("City value selected/entered is not present in autocomplete");
                   } 
                    else 
                    {
                        validCity = true;
                     $(this).val(source_city.charAt(0).toUpperCase() + source_city.slice(1));
                   }
                  
              }
         });
         return validCity;
    }
    Thanks,
    Anoo..
  • 2. Re: Need help Jquery in Apex validation
    Andreas Wismann Explorer
    Currently Being Moderated
    Unfortunately I'm leaving but,
    how come you're looping over a single item in the first place?
    $("#P1_ENG_CITY").each(function ()
  • 3. Re: Need help Jquery in Apex validation
    665735 Newbie
    Currently Being Moderated
    Hi Andreas,

    Here i am trying to check multiple items if exists, in this scenerio for country my assumption would be not required.
    Any help on Jquey where i am struck.

    Regards,
    Anoo..
  • 4. Re: Need help Jquery in Apex validation
    jariola Guru
    Currently Being Moderated
    Hi,

    I think Andreas try say that you use item id P1_ENG_CITY for selector.
    Item id is (must be) unique, so using each function to loop in this case is pointless.

    Maybe we do not quite understand what you are trying.
    It might help if you create example to apex.oracle.com.

    Also we do not know APEX version you are using. That might also affect possible solution.

    Regards,
    Jari
    -----
    My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
    Twitter: http://www.twitter.com/jariolai
  • 5. Re: Need help Jquery in Apex validation
    665735 Newbie
    Currently Being Moderated
    Hi Jarola,

    Here is the scenerio, what i want to achieve excatly.

    1. we have city as "Singapore" which populates from database point of view.
    2. Now the users is aware of city and he enters manually in City filed, the enter filed if matches with database point of view "no error" is required when he clicks on submit button.
    3. But if we enters city as "sin" instead of "singapore" then we need to have "error" staying that city is invalid.
    4. This is scenerio i am trying to achieve in Jquery where i had the logic in my previous mail.

    Related to version is,

    1. Apex-3.0
    2. Database-10g
    3. Interent explorer-7

    Regards,
    Anoo..
  • 6. Re: Need help Jquery in Apex validation
    jariola Guru
    Currently Being Moderated
    Hi,

    Best way do validation if after submit in database. So use APEX build in validations.
    Even you do some client side validation you must validate value anyway in DB for data quality and maybe for security point of view before you insert/update/delete.

    But, it is quite hard give any good advice how you should validate your "custom" autocomplete value in client side, as we do not know how you have created that autocomplete "item" in APEX 3.0.


    Regards,
    Jari
    -----
    My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
    Twitter: http://www.twitter.com/jariolai
  • 7. Re: Need help Jquery in Apex validation
    665735 Newbie
    Currently Being Moderated
    Thanks Jari for the inputs, we have created autocomplete by uploading the jquery-ui-1.8.21.custom.js and jquery-ui-1.8.20.custom.min.js by uploading the files under static and tagged that name in html header.

    Regards,
    Anoo..
  • 8. Re: Need help Jquery in Apex validation
    jariola Guru
    Currently Being Moderated
    Hi,

    Well, I think just uploading library's do not generate autocomplete "item" to page =)

    I was more interested is your autocomplete ajax based or are all "options" rendered to HTML document when page loads.
    Please create example to apex.oracle.com.

    Regards,
    Jari
    -----
    My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
    Twitter: http://www.twitter.com/jariolai
  • 9. Re: Need help Jquery in Apex validation
    665735 Newbie
    Currently Being Moderated
    Hi Jari,

    I had requested my team and they had created the example on apex.oracle.com, but we are getting a strange error while trying to filter it.
    Here are the details we have done from our end.

    1. Uploaded relevant js and css files under static.
    2. Refereed that all path in HTML header and Two level tabs.
    3. Wrote Javascript function in header and calling application process under footer.
    4. Created application process item and application process for fetching the data.

    Here are the credentials

    workspace-apex_demo_bosu
    usernae-BORRASUBRAHMANYAM@YAHOO.COM
    password-seshubosu
    URl#http://apex.oracle.com/pls/apex/f?p=49934:1:10072704279838:::::

    One more doubt#
    How to pass the country , city and state values to an application process and validation with PL/SQL.
    It will be great full if yo can provide me example on this.

    Regards,
    Anoo..
  • 10. Re: Need help Jquery in Apex validation
    jariola Guru
    Currently Being Moderated
    Hi,

    Maybe you check this
    http://jqueryui.com/autocomplete/#combobox

    I think this method is better, if you do not have lot of rows in lookup table.
    I have used it on APEX
    http://actionet.homelinux.net/htmldb/f?p=LSPDEMO:203

    BTW, I did fix your sample on apex.oracle.com.
    Problem was you did use page zero that do not exists on app to call On Demand process. I did change JavaScript to use current page.
    Also application item Session State Protection was Restricted - May not be set from browser

    Regards,
    Jari
    -----
    My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
    Twitter: http://www.twitter.com/jariolai
  • 11. Re: Need help Jquery in Apex validation
    665735 Newbie
    Currently Being Moderated
    Thanks Jari,

    For correct me the syntax problem and make fix to work on sample example.
    Now what i have done is on click on Submit i had called a java script function, the script is exists in where region portion along with the alert messages.
    When we type as "James" or "king" select from the list the below source code is picking as entire word as "james".
    Even though if we type as "jam" the below alert is picking as "james" insted of "jam", which is failling here.
    --
    alert($('.ui-autocomplete li').text().toLowerCase());
    1. Here i am trying, how to get each element in jquery autocomplete..Any idea why it is showing always the same data.

    The link which you had provided i had used to implemnet the Jquery concepts using the same.
    Once again thanks for your suugestions on this request.

    Regards,
    Anoo..

    Edited by: Anoo on Jan 4, 2013 9:51 PM

Legend

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