1

I use the API Form of Drupal 8 to create my form. I had an ajax callback on a field:

$form['association']['numero'] = array(
        '#type' => 'textfield',
        '#title' => t('foo'),
        '#size' => 10,
        '#maxlength' => 10,
        '#suffix' => '<div id="ajax_error"></div>',
        '#ajax' => [
            'callback' => '::fetchApiData',
            'event' => 'change',
            'prevent' => 'click',
        ],
    );

with my callback function :

public function fetchApiData(array $form, FormStateInterface $form_state)
{
    return 'foo';
}

It's all working fine, but i want to trigger the callback when the user writes 10 characters precisely. Does anyone has a solution for that?

2

You can do this:

1) Decide on an event name. In this code, the event name will be 'overminlength'

2) In the form element being defined using the Form API, set your #ajax as normal, but set the #ajax 'event' to the event name chosen in step 1:

'#ajax' => [
  'wrapper' => 'some_wrapper',
  'callback' => 'some_callback',
  // Set the custom event here:
  'event' => 'overminlength',
],

3) Create a custom JS file and attach it to the field

'#attached' => [
  'library' => ['mymdodule/mylibrary'],
],

4) Add a $.keyup() listener to the field.

  • In the callback, count the number of characters in the field
  • If it's more than X characters, call $.trigger(), and trigger the event from step 1

    (function($, Drupal) {
    
      "use strict";
    
      function fieldwatcher(context) {
        $(context).find("#edit-myfield").once("fieldwatcher").each(function() {
          $(this).keyup(function() {
            // Change '3' to the number of characters after which you want to
            // trigger the ajax.
            if ($(this).val().length > 3) {
              $(this).trigger("overminlength");
            }
          });
        });
      }
    
      Drupal.behaviors.testScript = {
        attach: function(context) {
          fieldwatcher(context);
        }
      };
    
    }(jQuery, Drupal));
    
  • Hello Jaypan and thank you for your response. I don't really understand your point, can you please explain me more ? Regards, – lchabrand Apr 24 '18 at 5:43
  • Well, my answer is all jQuery and JavaScript based. If you don't understand how to work with those, the answer I gave above isn't going to help you, and I can't really teach JS and jQuery on Drupal answers. If you are looking for a method of doing what you want purely through the Form API, the answer is that it cannot be done. The solution I gave above would be a custom one that requires custom JS coding. – Jaypan Apr 24 '18 at 5:47
  • Ho okay, yes i can do that with javascript but my question was more about using the Form API, but it seems we actually can't. – lchabrand Apr 24 '18 at 6:00
  • 2
    That's correct. The Form API is great, but this is not functionality it provides by default. It may make for an interesting add-on however. – Jaypan Apr 24 '18 at 6:14
  • I've actually tested my theory, and it works. I've re-written my post above to show specific instructions. – Jaypan Apr 27 '18 at 2:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.