ajax - validacion - validar formulario javascript html5

Crear un tipo de campo de formulario ''Ajaxified''

Question

En mi aplicación, tengo un par de campos de formulario con muchas opciones. El problema que experimenté es similar a esta pregunta : obtener y analizar todas las opciones en cada carga de página es costoso (Twig representa todas las opciones una y otra vez, mientras que no es posible el almacenamiento en caché del lado del cliente). Ese problema me hizo crear una forma de enviar las opciones a través de AJAX al navegador. Un enfoque bastante simple:

1. Obtenga todas las opciones (clave-valor) a través de AJAX (por ejemplo, obteniendo /countries.json) y la memoria caché, si es posible. (en este caso, no es muy probable que los nombres de los países cambien muy a menudo)
2. Use selectize, select2 o un complemento similar para insertar las opciones en el DOM.
3. Disfruta de una forma más rápida :-)

Para evitar que Symfony consulte todas las opciones (no es necesario: se cargan a través de AJAX) agregué setMaxResults(0) al QueryBuilder cuando se carga el formulario (agregando una opción a través del controlador). Sí, eso es kludge. Al enviar un formulario, seguirá realizando una consulta, ya que debe verificar si la opción seleccionada existe (y verificar las Restricciones).

Me gustaría crear un tipo de campo de formulario personalizado que agregue esta funcionalidad al EntityType actual: no cargue las opciones mientras se procesa el formulario, pero aún así verifique si existe la opción seleccionada. Encontré muchos ejemplos relacionados con la modificación dinámica de un formulario , pero no he encontrado ejemplos relacionados con la modificación de un solo campo de formulario, independientemente de su forma principal.

¿Cómo creo un tipo de campo de formulario como este? ¿Cuál es un buen punto de partida? ¿Extiende EntityType , ChoiceType u otro enfoque?

Ya estoy usando Symfony 3.1, por lo que el uso de la carga diferida de las opciones de formulario (Nuevo en Symfony 3.2) no será un problema. No estoy seguro de si esta nueva característica está relacionada con mi problema.

Answer 1

Teniendo en cuenta su uso, la mejor manera sería usar un Autocompletar. Aquí hay un paquete de Symfony que he estado usando y es increíble. Hice algunos sobrescribir su javascript (autocompletador) para mejorar algunas funciones según mi caso.

Answer 2

El autocompletar con una opción de controlador Ajax me parece agradable, pero aquí hay otra opción (¿quizás más rápido?): Renderice su formulario a través de hinclude.

hinclude es una biblioteca JS utilizada para "aplazar" la carga de partes de una página, pensó Ajax. Symfony viene con soporte integrado ( documentación oficial ).

Cómo lo usa:

• mueve el renderizado de tu formulario a otra acción del controlador, llamémoslo formAction
• incluye hinclude.js en tu página (cf Github oficial)

• usa este código para representar tu forma:

  {{render_hinclude (controller (''... :: form''), {''default'': ''Cargando ...''})}}

• es probable que desee mantener el manejo de su formulario en la acción original de su controlador, por lo tanto, modifique la "acción" del formulario generado de esta manera:

  $ form = $ this-> createForm (new FormType (), $ obj, array (''action'' => $ this-> generateUrl (''original_form_action'')));

Answer 3

Escribí un paquete ( Alsatian / FormBundle ), que hace lo que quiere en el servidor.

• Cómo evitar cargar cada entidad por cada representación de formulario :

  abstract class AbstractExtensibleChoicesType extends AbstractRoutableType
  {
      public function configureOptions(OptionsResolver $resolver)
      {  
          $resolver->setDefault(''choices'',array());
      }
  }

• Cómo rellenar el campo de formulario con contenido en caché:

Esa es su propia lógica, sugeriría: crear un controlador que solo regrese (como HTML):

<option value="1">Option 1</option>
<option value="2">Option 2</option>

En el controlador establece Maxage:

/*
* @Route(...)
* @Cache(maxage=64000)
*/
public function getOptionsAction(Request $request) // Home
{
    $choices = $this->getDoctrine()->getManager()->getRepository //....

    return $this->render(/*...*/);
}

Use javascript para cargar esta url y poner el resultado html en su campo de selección.

Si está utilizando algo como Select2: su controlador también puede devolver las opciones como JSONReponse (), luego puede cargar este JSON directamente desde la opción select2 ajax (consulte la documentación del paquete, así es como lo uso).

• Y lo más difícil: cómo hacer que la opción enviada sea válida :

Obtenga las opciones elegidas en un evento Form :: PRE_SUBMIT (también PRE_SET_DATA si usa el formulario para editar) y reinyecte estas opciones al campo.