1

I'm new to Drupal and Javascript, so please bear with me. I have a simple class project to create custom validation on textfields without using select options or checkboxes. For one of the fields, the only valid inputs are 'right' or 'left'.

I have validation upon submit working, but I wanted to use ajax to check user input key by key, and display an error message before clicking the submit button. (As soon as it's clear the input will not be 'right' or 'left').

The function is working, but drupal pauses for a half second or so with every keyup while it does the ajax call, making it not very user friendly or practical to use. Hitting backspace to clear the field before drupal 'resumes' even navigates away from the page.

I have looked extensively online for resources on this, and have not found an example or module that seems to address this particular issue. Modifying autocomplete_path seemed like the best option, but I can't figure out how to modify it for my purpose.

I have the module on my github here, or here are the parts in my module dealing with ajax. In my form:

$form['direction'] = array(
    '#title' => 'Direction',
    '#type' => 'textfield',
    '#description' => 'Enter the shift direction',
    '#element_validate' => array('validate_direction'),
    '#prefix' => '<div id="error_message">',
    '#suffix' => '</div>',
    '#required' => TRUE,
    '#ajax' => array(
            'event' => 'keyup',
            'callback' => 'validate_direction_callback',
    ), 
);

and then the actual ajax callback

function validate_direction_callback($form, &$form_state){
    $commands = array();
    $commands[] = ajax_command_html('#error_message', render($form['direction']));
    $commands[] = array(
        'command' => 'validateDirectionCallback',
        'selectedValue' => $form_state['values']['direction'],
    );
    return array('#type' => 'ajax', '#commands' => $commands);
}

I didn't include the js file here because it didn't affect the pausing even when it was commented out. Thank You! Oh, and I am using Drupal 7.39.

1 Answer 1

2

The ajax callback in drupal is nearly as slow as a complete page load and this takes between 200 und 1000 ms. So checking every key stroke is no option.

If you don't check against the database, there is no need for an ajax callback. I would check "right" or "left" in javascript. If you need a server side check, you can write a stand-alone php file, that does this check without drupal, then your response time will be between 10 and 20 ms.

To replace the slow ajax with javascript you can start with this script:

val_left_or_right.js:

(function ($) {
  $('#edit-direction').keyup(function(){
    var direction_text = $('#edit-direction').val();
    if (direction_text != 'left' && direction_text != 'right') {
      $('#error_message').html('Please type left or right');
    } else {
      $('#error_message').html('OK');
    }
  });
})(jQuery);

attach the js to the form:

$form['#attached']['js'] = array(
  drupal_get_path('module', 'your_module') . '/js/val_left_or_right.js',
);
7
  • thanks for your reply. So to clarify, are you saying it's possible to do a key-by-key check without ajax, or to use JS to check the entry before submit, but not necessarily on every keystroke? Nov 2, 2015 at 17:01
  • When using ajax, don't use the ajax-event 'keyup', but 'blur', as by default. Then the check is done when leaving the field. If you want to check every key stroke, then use your own javascript. On submit you can double check in either case to be sure.
    – 4uk4
    Nov 2, 2015 at 17:23
  • Ok, thanks again. Is there a direction you could point me in to find out how to implement JavaScript in this manner? (I tried using 'blur', but then it's possible to submit the form before the field validation runs.) And if I understand, '#element_validate' only calls the validation functions when the user tries to submit the form, so the 'real-time' validation wouldn't happen either. Would this be a two-way binding thing like Angular? Sorry for all the questions...I have really had a hard time finding answers or even ideas on how to do this. Nov 2, 2015 at 18:04
  • I put a jquery example in the answer.
    – 4uk4
    Nov 3, 2015 at 8:14
  • Thanks for your time on this. I couldn't get your example to work...I put an alert in the js file above the main function and that displays, but the 'keyup' function doesn't run. (The alert displays when the page loads, and also when the submit button is clicked, but not on any key actions) I also tried changing it to onkeyup, and also tried changing the element to 'input#edit-direction'...I'm at a loss. Does the js need to be attached to the form with the '#attributes' key somehow? I tried that, and then at least the DOM had an event handler attached to the input field, but still nothing. Nov 3, 2015 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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