Flask WTForms SelectMultipleField限制最大选择数

Question

Right now I am building a webapp with Flask, including some WTForms. One of them is a checklist where people can select from multiple options (hence a SelectMultipleField). Now I want to make sure that people can only select a maximum number of options (say 2 out of 3) and if they want to select more first have to de-select one of the other options. I think it might have to do something with validation, but I am really not sure how to do this...Any help is much appreciated! This is my code from forms.py

class MultiCheckboxField(SelectMultipleField):
    option_widget = widgets.CheckboxInput()
    widget = widgets.ListWidget(prefix_label = False)

class ChecklisteForm(FlaskForm):
    list_of_files = ['politiek', 'economie', 'sport']
    files = [(x, x) for x in list_of_files]
    example = MultiCheckboxField('Label', choices=files)
    submit = SubmitField('Wijzigen')

This is the code from my html template

<form action="" method = "post">
    {{ form.hidden_tag() }}
<div class="container-fluid">
  <div class="row">
     <div class="col-lg-12">
     <div class="col-lg-4">
     <div class="button-group">
        <span class="kiezen_informatie">
        <button type="button" class="btn btn-info btn-large dropdown-toggle" data-toggle="dropdown">Kies kategorie </span> <span class="caret"></span></button>
        <ul class="dropdown-menu text-center">
        <li><a href = "#">{{form.example(class = "list-unstyled")}}</a></li>
        <li><a href = "#"> {{form.submit(class = "btn btn-info")}}</a></li>
        </ul>
      </div>    
     </div>
    </div>
   </div>
  </div>

I thought this might also be related to including some javascript? But if there is any way I could avoid that I'd be happy :)

Answer 1

You can certainly validate this on the client side with some Javascript, but you'd also want to validate this on the server side to ensure that users don't avoid the Javascript validation and submit data they shouldn't.

You can define a custom validate method in your Form:

class ChecklisteForm(FlaskForm):                                                
    list_of_files = ['politiek', 'economie', 'sport']                           
    files = [(x, x) for x in list_of_files]                                     
    example = MultiCheckboxField('Label', choices=files)                        
    submit = SubmitField('Wijzigen')                                            

    def validate(self):                                                         

        rv = FlaskForm.validate(self)                                           

        if not rv:                                                              
            return False                                                        

        print(self.example.data)                                                

        if len(self.example.data) > 2:                                          
            self.example.errors.append('Please select no more than 2 items')    
            return False                                                        

        return True 

and in your HTML template:

    {% for key in form.errors %}                                            
        {% for error in form.errors[key] %}                                 
            <span style="color: red;">[{{ error }}]</span>                  
        {% endfor %}                                                        
    {% endfor %}