Jak uzyskać kompilację formularza z powtarzającymi się elementami dobrze

Question

Tytuł naprawdę tego nie mówi, ponieważ mam problem z podsumowaniem problemu. Więc tu idzie długie wyjaśnienie:

Powiedzmy Dodaję informację wielu kontaktów, a ja mam tych pól:

• Nazwa kontaktu
• formy kontaktu (e-mail, numer telefonu, wiadomości błyskawicznych)
  • Jeśli email: Pokaż pole e-mail (powiedzmy to pole istnieje)
  • Jeśli numer telefonu: Pokaż pole numer telefonu
  • Jeśli wiadomości błyskawicznej: Sho W polu tekstowym

Więc tuż nietoperza, idę do konieczności JavaScript, żeby zakończyć to na samej stronie (aby dodać dodać lub usunięcie pól kontaktowych), którego jestem ok z. Jednakże, ponieważ mogę dodać wiele kontaktów (i jako programista, nie wiem, ile kontaktów chce dodać użytkownik, może to być 1, 10 lub 100)

Więc moim największym problemem jest to, w jaki sposób jestem Zamierzam uporządkować rzeczy takie jak nazwy dla każdego pola. Czy powinienem rzucić wszystko na rzeczy takie jak names[], contactmethods[] i uzyskać dostęp do rzeczy w kolejności, lub jeśli istnieje lepsze rozwiązanie.

Ponadto, jeśli serwer zacznie weryfikować te informacje i znajdzie jakieś zniekształcone informacje, chciałbym móc wysłać dane, które klient wysłał do serwera z powrotem do klienta, aby nie straciły wszystko, co weszli. Jak mógłbym to łatwo osiągnąć?

pewne informacje tła: obecnie stosowane technologie (to istotne):

• kolb
• jQuery
• WTForms

Answer 1

Nie trzeba budować niczego (przynajmniej na serwerze side) - WTForms obsługuje już to, czego potrzebujesz - nazywa je "field enclosures". Zachowanie szukasz znajduje się wtforms.fields.FormField i 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)) 

Będziesz również potrzebował custom validator aby potwierdzić odpowiednie pole, biorąc pod uwagę wybór użytkownika:

# 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) 

Po wywołaniu form.validate() na po stronie serwera pola zostaną automatycznie sprawdzone pod względem wymagań, a błędy zostaną odpowiednio wypełnione, aby można je było renderować po stronie klienta.

Tworzenie nowych pól po stronie klienta jest proste, a WTForms odbierze je z tyłu tak długo, jak długo będziesz nazywać using the same naming convention it uses - czyli field.short_name + '-' + index.