Cómo obtener una compilación de un formulario con elementos repetidos bien

Question

El título realmente no lo dice, ya que tengo problemas para resumir el problema. Así que aquí va la explicación larga:

Digamos que estoy añadiendo la información de varios contactos, y tengo estos campos:

• Nombre del contacto
• método de contacto (correo electrónico, número de teléfono, mensaje instantáneo)
  • Si el correo electrónico: Mostrar un campo de correo electrónico (digamos que existe este campo)
  • Si el número de teléfono: Mostrar un campo de teléfono
  • Si mensaje instantáneo: Sho w un campo de texto

Así que de buenas a primeras, voy a necesitar JavaScript para completar esta en la propia página (para añadir añadir o contacto eliminación campos), que estoy bien con. Sin embargo, dado que puedo agregar varios contactos (y como desarrollador de software, no sé cuántos contactos quiere agregar el usuario, podría ser 1, 10 o 100)

Así que mi mayor problema es cómo estoy Voy a estructurar las cosas como los nombres para cada campo. ¿Debo arrojar todo en cosas como names[], contactmethods[] y acceder a las cosas en orden, o si hay una solución mejor.

Además, si el servidor comienza a verificar esta información, y encuentra información mal formada, me gustaría poder enviar los datos que el cliente envió al servidor de vuelta al cliente, para que no pierdan todo lo que han ingresado. ¿Cómo lo lograría fácilmente?

alguna información de fondo: tecnologías actualmente en uso (que es relevante):

• Frasco
• jQuery
• WTForms

Answer 1

hay necesidad de construir nada (al menos en el servidor lado) - WTForms ya admite lo que necesita, los llama "field enclosures". El comportamiento que busca se encuentra en wtforms.fields.FormField y wtforms.fields.FieldList

class ContactForm(Form): 
    name = TextField("Name", validators=[Required()]) 
    contact_type = SelectField("Contact Type", 
           validators=[Required()], 
           choices=[ 
            ("email", "Email"), 
            ("phone", "Phone Number"), 
            ("im", "Instant Message") 
           ]) 
    # `If` is a custom validator - see below 
    email_address = TextField("Email", 
            validators=[If("contact_type", 
                "email", 
                [Required(), Email()]) 
            ]) 
    phone_number = TextField("Phone #", 
            validators=[If("contact_type", 
                  "phone", [Required()]) 
            ]) 
    im_handle = TextField("IM Handle", 
            validators=[If("contact_type", 
                  "im", [Required()]) 
            ]) 


class SignUpForm(Form): 
    # Other fields go here 
    contacts = FieldList(FormField(ContactForm)) 

También necesitará un custom validator para validar el campo apropiado, teniendo en cuenta la elección del usuario:

# CAUTION: Untested code ahead 
class If(object): 
    def __init__(self, 
         parent, 
         run_validation=None, 
         extra_validators=None, 
         msg=None): 
     self.parent = parent 
     self.msg = msg if msg is not None else u"Invalid" 
     if callable(run_validation): 
      self.run_validation = run_validation 
     else: 
      _run_validation = lambda self, parent, form: parent.data == run_validation 
      self.run_validation = _run_validation 
     self.extra_validators = extra_validators if extra_validators is not None \ 
                else [] 

    def __call__(self, field, form): 
     parent = getattr(form, self.parent) 
     if self.run_validation(parent, form): 
      return field.validate(form, extra_validators=self.extra_validators) 

Cuando se llama a form.validate() en el En el lado del servidor, los campos se verificarán automáticamente en función de los requisitos y los errores se completarán de forma adecuada para que pueda volver a presentarlos en el lado del cliente.

La creación de nuevos campos en el lado del cliente es simple y WTForms los recogerá en la parte posterior siempre que nombre entonces using the same naming convention it uses - es decir, field.short_name + '-' + index.