jquery - validacion - Formulario AJAX validar y enviar

validar formulario jquery bootstrap

Question

Creé un formulario en Drupal 7 y quiero usar AJAX. Agregué esto a la matriz de botones de envío:

"#ajax" => array(
  "callback" => "my_callback",
  "wrapper" => "details-container",
  "effect" => "fade"
)

Esto funciona, pero se ignora toda la función de validación. ¿Cómo puedo validar el formulario antes de my_callback() ? ¿Y cómo puedo mostrar el estado o los mensajes de error en un formulario AJAX?

Answer 1

Ok, lo resuelvo. Aparentemente deberías devolver una matriz en tu función de devolución de llamada ajax, no solo un mensaje de texto ...

Algo como esto:

return array("#markup" => "<div id=''wrapper''></div>");

Answer 2

Nada de esto funciona para mí. La función ajax del envío de formulario aún llama directamente a la función de devolución de llamada, al omitir la validación, enviar y también hacer que el botón no pueda hacerse clic varias veces. Los mensajes de validación NO se muestran. Literalmente copié y pegué el código de Joshua Stewardson y no funcionó.

El hecho de que este caso de uso sea tan difícil e indocumentado es muy perturbador. Para mí, esta parece ser la más básica de las solicitudes para una API de formulario AJAX. De acuerdo, aliviando mi frustración, en la solución.

Esto es lo que terminé haciendo para que esto funcione. Se siente hacky y retrasado. También se romperá si hay múltiples instancias del formulario en una sola página, pero fue lo mejor que pude hacer. Si alguien puede arrojar luz sobre esto, POR FAVOR, hazlo!

Básicamente, debe reemplazar todo el formulario consigo mismo dentro de su devolución de llamada, y anteponer manualmente cualquier mensaje configurado al objeto de formulario. Para ello, declare que el contenedor es la identificación de su formulario (se romperá si hay varias instancias de su formulario en una sola página, porque la ID se actualizará).

function productsearchbar_savesearch_form($form, &$form_state) {

  $form["wrapper"] = array("#markup" => "<div class=''inline-messages''></div>");

  $form["name"] = array(
    "#type" => "textfield", 
    "#required" => true,
    "#title" => "Name"
  );

  $form["submit"] = array(
    "#type" => "submit", 
    "#value" => "Send", 
    "#ajax" => array(
      "callback" => "productsearchbar_savesearch_form_callback", 
      "wrapper" => "productsearchbar-savesearch-form", 
      "effect" => "fade"
    )
  );

  return $form;
}

function productsearchbar_savesearch_form_callback($form, &$form_state) {
  $messages = theme(''status_messages'');

  if($messages){
    $form["wrapper"] = array("#markup" => "<div class=''inline-messages''>$messages</div>");
  }
  return $form;
}

function productsearchbar_savesearch_form_validate($form, &$form_state) {
  if ($form_state[''values''][''name''] == '''') {
   form_set_error('''', t(''Name field is empty!''));
  }
}

function productsearchbar_savesearch_form_submit($form, &$form_state) {
  drupal_set_message(t(''Your form has been saved.''));
}

Answer 3

// puedes usar la validación de formulario jquery

jQuery(''#button-id'').mousedown(function() {
  var textval = $("#get-text-val").val();
  if (textval == '''') {
    $("#apend-error-msg").append(''<div id="add-text-error" class="add-text-error">error msg</div>'');
   return false;
  }
  else {
    return true;
  }
  return false;
 });

Answer 4

Encontré una excelente solución a este problema.

El crédito va al blog de este tipo:

http://saw.tl/validate-form-ajax-submit-callback

La solución que propone es la siguiente:

// when creating or altering the form..
{
  $form[''#prefix''] = ''<div id="formwrapper">'';
  $form[''#suffix''] = ''</div>'';
  // the submit button
  $form[''save''][''#ajax''] = array(
    ''callback'' => ''mymodule_form_ajax_submit'',
    ''wrapper'' => ''formwrapper'',
    ''method'' => ''replace'',
    ''effect'' => ''fade'',
  );
 // ...
}

function mymodule_from_ajax_submit($form, &$form_state) {
  // validate the form
  drupal_validate_form(''mymodule_form_id'', $form, $form_state);
  // if there are errors, return the form to display the error messages
  if (form_get_errors()) {
    $form_state[''rebuild''] = TRUE;
    return $form;
  }
  // process the form
  mymodule_form_id_submit($form, $form_state);
  $output = array(
    ''#markup'' => ''Form submitted.''
  );
  // return the confirmation message
  return $output;
}

Answer 5

Busqué durante muchas horas una forma de hacer esto correctamente. Desafortunadamente, la mayoría de estas soluciones todavía se basan en la validación del lado del servidor de Drupal para determinar si los resultados de ajax o los mensajes de error del lado del cliente deben colocarse en el contenedor. Confiar en el resultado del servidor es más lento que la validación del lado del cliente, que debe ser prácticamente instantánea. Además, reemplazar el formulario ... con un formulario ... con los mensajes de error es un poco demasiado complicado para mi preferencia.

Use los métodos de validación de jquery para activar un evento ajax con un activador de javascript:

// Prevent form submission when there are client-side errors, trigger ajax event when it is valid
(function ($) {
    Drupal.behaviors.submitForm = { 
        attach: function (context) {
            var $form = $("form#validated_form", context);
            var $submitButton = $(''input[type="submit"]'', $form);

            $form
                .once(''submitForm'')
                .off(''submit'')
                .on(''submit'', function(e){

                    // Prevent normal form submission
                    e.preventDefault();
                    var $form = $(this);

                    // The trigger value should match what you have in your $form[''submit''] array''s ajax array
                    //if the form is valid, trigger the ajax event
                    if($form.valid()) {
                        $submitButton.trigger(''submit_form'');
                    }
            });

        }
    };
})(jQuery);

Haga referencia al activador de javascript como su evento ajax que se escucha:

$form[''submit''] = array(
    ''#type'' => ''submit'',
    ''#value'' => t(''Submit''),
    ''#ajax'' => array(
      ''event'' => ''submit_form'',
      ''callback'' => ''callback_function_for_when_form_is_valid'',
      ''wrapper'' => ''validated_form''
    )
);

Ahora, la validación se activa tan pronto como se hace clic en el botón Enviar, y la validación del lado del servidor solo ocurre una vez que es válida.

Answer 6

Esta pregunta y respuesta me ayudaron a encontrar la solución correcta, pero no es exactamente clara. Hagámoslo así.

Cosas que debe tener en cuenta:

1. Los mensajes de error de validación se colocarán dentro de lo que se especifique como #ajax[''wrapper'']
2. Preste mucha atención a dónde dice la documentación de la API Drupal Forms del contenedor ajax que "se reemplaza todo el elemento con este ID, no solo el contenido del elemento".
3. Debido a que ese elemento es reemplazado, es mejor que lo proporcione de nuevo. Es por eso que la respuesta de Marius Ilie funciona, no por la matriz y #markup , sino porque incluye el div con el conjunto de id. De envoltura.

Aquí hay un código que me funcionaba en función de lo que Marius puso en el comentario anterior:

function dr_search_test_form($form, &$fstate) {
  $form["wrapper"] = array("#markup" => "<div id=''test-ajax''></div>");

  $form["name"] = array(
    "#type" => "textfield",
    "#required" => true,
    "#title" => "Name"
  );

  $form["submit"] = array(
    "#type" => "submit",
    "#value" => t("Send"),
    "#ajax" => array(
      "callback" => "dr_search_test_form_callback",
      "wrapper" => "test-ajax",
      "effect" => "fade",
    ),
  );
  return $form;
}

function dr_search_test_form_callback($form, &$fstate) {
  return "<div id=''test-ajax''>Wrapper Div</div>";
}

function dr_search_test_form_validate($form, &$fstate) {
  form_set_error("name", "Some error to display.");
}