Javascript Flask WTForms SelectMultipleField限制最大选择数

现在我正在用Flask构建一个webapp，包括一些WTForms。其中之一是一个清单，人们可以从中选择多个选项（因此是SelectMultipleField）。现在，我想确保人们只能选择最多数量的选项（比如说3个选项中的2个），如果他们想选择更多选项，首先必须取消选择其他选项中的一个。我想它可能需要做一些验证，但我真的不知道如何做到这一点…非常感谢任何帮助！ 这是我在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')

这是我的html模板中的代码

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

{{form.hidden_tag（）}}
凯斯凯特戈里酒店

---

我想这也可能与包含一些javascript有关？但是如果有什么方法可以避免的话，我会很高兴：）

你当然可以在客户端用一些Javascript验证，但是你也希望在服务器端验证，以确保用户不会避免Javascript验证，并提交他们不应该提交的数据

您可以在表单中定义自定义

validate

方法：

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 

在HTML模板中：

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

{%用于表单中的键。错误%}
{%表示表单中的错误。错误[key]}
[{{error}}]
{%endfor%}
{%endfor%}

您当然可以使用一些Javascript在客户端验证这一点，但您也希望在服务器端验证这一点，以确保用户不会避免Javascript验证并提交他们不应该提交的数据

您可以在表单中定义自定义

validate

方法：

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 

在HTML模板中：

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

{%用于表单中的键。错误%}
{%表示表单中的错误。错误[key]}
[{{error}}]
{%endfor%}
{%endfor%}