Autocompleter w/required field - no message when left empty

Question

Hello,

I modified the demo-Autocompleter to make the country field required. I alse removed the debugger On Submit.

When I leave the country field empty, I'm not able to submit the form (which is fine), but no error message appears (and I have asked for one).

How can I have the form display an error message asking to fill the country field ?

Thank you very much in advance
Nicole Rosset

GreyHead · Accepted Answer

Hi Nicole,

After a lot of experimentation I think I have this working - this time using the jQuery UI autocompleter. It ends up being not too hard to do. The problem is that the jQuery UI autocompleter has a lot of options and - to me at least - the documentation is sometimes less than helpful.

You can see my test form here - it's running off the same Countries list as before.

+ Make sure that the jQuery UI library is being loaded on your site. I use the JQueryEasy extension, you can also require it from Joomla! - see the Joomla! Docs here if it isn't loading on your site.

+ In the ChronoForms v5 Designer tab add a standard text input and set the validation to Required.

+ In the Setup tab add a Load JavaScript action with code like this:

jQuery(document).ready(function(jQ) {
  jQ('#text1').autocomplete({
      source: function( request, response ) {
        jQ.ajax({
          url: '/index.php?option=com_chronoforms5&chronoform=test_jqui_autocompleter&event=ajax&tvout=ajax',
          dataType: 'json',
          data: {
            q: request.term
          },
          success: function( data ) {
            response( data );
          }
        });
      },
      minLength: 3,
      select: function( event, ui ) {
        // add any On Select code
      },
      open: function() {
        jQ(this).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        jQ(this).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      },
      change: function( event, ui ) {
        if ( ui.item == null ) {
          jQ(this).val('');
          jQ(this).focus();
        }
      }
    });
});

Replace text1 with the ID of the text input and edit the URL to suit the form event you are calling.

+ Edit the Code in the Ajax event to return an arrays of values like this array('value' => 'aaa', 'id' => 'zzz'); Here's the code I used to test:

<?php
$countries = array("Afghanistan", . . . "Zimbabwe");

$json = array();
if ( empty($form->data['q']) ) {
  echo json_encode($json);
  return;
}
foreach ( $countries as $c ) {
  if ( stripos($c, $form->data['q']) === false ){
    continue;
  }
  $json[] = array('value' => $c, 'id' => $c);
}
echo json_encode($json);
?>

If you add a value from the dropdown list then edit it when the focus shifts away from the box the value will be cleared and the cursor moved back into the input.

Bob

Note: there are many more options for this AutoCompleter. See the docs here and examples here. The 'required' code came from this StackOverFlow answer.

Forums

Autocompleter w/required field - no message when left empty