search bar accessing apex controller variable in javascript

Question

<apex:inputText id="searchBar" value="{!nameSearch}"/>
<apex:commandButton value="Search" action="{!search}" rerender="Everything" status="statusId" onclick="if({!nameSearch}.length() < 3){alert('Please enter at least 3 characters to search.');return};"/>

I am trying to make a search bar that only does the search if at least 3 characters are entered. I am having trouble with it actually executing the onclick statement though. The idea is that when I click search it checks to make sure that the variable nameSearch has at least 3 characters, if it does then it goes on to the action attribute to execute the search method and if not then it does an alert box and does not execute the search method.

The way it is now, I search for 'Ro' and it doesn't seem to do anything at all.

Answer 1

I have implemented by calling a javascript function onclick, which I consider is much cleaner approach rather than using inline javascript. Also accessing value using {!nameSearch} won't be consistent as it returns the value it had when the page was last loaded.Hence I have used jQuery to access the inputText field value.

<script src="{!$Resource.jqry}"></script>
  <script type="text/javascript">
      var j$ = jQuery.noConflict();
      function validate(){
          var inp = j$("[id$='searchBar']").val();
          if(inp.length < 3){
              alert('Please enter at least 3 characters to search.');
              return false;
          }
          return true;
      }
  </script>

<apex:inputText id="searchBar" value="{!nameSearch}"/>
<apex:commandButton value="Search" action="{!search}" rerender="Everything" status="statusId" onclick="return validate();"/>

Answer 2

I gave codebandit the correct answer since I really only changed a few lines of his code, however, I am posting it for others who might prefer using plain javascript rather than loading in jQuery.

function validate(){
    var inp = document.getElementById('{!$Component.EntireRelationshipWidget.headerForWidget.searchAndClearButtons.searchBarForm.searchBar}').value;
    if(inp.length < 3){
        alert('Please enter at least 3 characters to search.');
        return false;
    }
    return true;
}

The long string of ids are all of the ids that led up to the search bar (pageBlock, pageBlockSection, etc.)

Answer 3

Short answer, do the validation server side, it's easier that way.

Longer answer, when you have a command button the action methods uses the onclick method, so using action and onclick attributes can get a little messy. You're javascript looks correct and should execute and allow the button action to run if you're test passes (see @Bob_Robers answer to related question for a better discussion). So I'm not sure why yours doesn't work, and you could probably troubleshoot by digging into the generated JS for your visualforce page and seeing if there is an error in how SFDC is generating it. But if you avoid the issue you entirely you can move on to the next task at hand ...