Question

我希望能够使用Vee-validate彼此独立地验证表单中的所有组件（具有多个字段）。

我阅读了this主题。但是，解决方案的所有组件都需要同时验证。我尝试使用EventBus（失败），但我希望远离它。

我有一个多步骤表单，应在单击“继续”之前验证当前步骤。示例：

from django import forms
from betterforms.multiform import MultiModelForm
from .models import Topic, Image, Question, Answer
from .choices import questions_type_choices, question_topic_name_choices

class TopicForm(forms.ModelForm):
    topic_name      =   forms.ChoiceField(
                    choices=question_topic_name_choices,
                    widget = forms.Select(
                    attrs = {'class': 'home-select-one'}
                        ))

    class Meta:
        model = Topic
        fields = ['topic_name',]
        def __str__(self):
            return self.fields


class QuestionForm(forms.ModelForm):
    question_type =   forms.ChoiceField(
                    choices= questions_type_choices,
                    widget = forms.Select(
                    attrs = {'class': 'home-select-two'},
                        ))
    question_answer = forms.CharField(
                    max_length=50,
                    widget  = forms.HiddenInput()
                        )
    question_image = forms.CharField(
                    max_length=50,
                    widget  = forms.HiddenInput()
                        )
    question_description = forms.CharField(
                    max_length=50,
                    widget  = forms.HiddenInput()
                        )
    class Meta:
        model = Question
        fields = ['question_type', 'question_description', 'question_answer', 'question_image']
        def __str__(self):
            return self.fields


class QuizMultiForm(MultiModelForm):
    form_classes    =   {
                'topics':TopicForm,
                'questions':QuestionForm
    }
    def save(self, commit=True):
        objects = super(QuizMultiForm, self).save(commit=False)

        if commit:
            topic_name = objects['topic_name']
            topic_name.save()
            question_type = objects['question_type']
            question_type.topic_name = topic_name
            question_type.save()
        return objects

我的问题是我必须在组件级别调用{% extends 'base.html' %} {% block content %} <table> <thead> <tr> <th>Topic Number : # {{ topic_name }}</th> <th>Question Type: {{ question_type }}</th> </tr> </thead> <tbody> <tr> <td>The Question:{{ question_description }}</td> <td>The Question Image: {{ question_image }}</td> </tr>  </tbody> </table> {% endblock content %}才能验证组件。但是，继续按钮位于父级。我无法创建一个共享的-- Step 1 ---- <component-one /> == component with fields ---- (next button) <-- validate content 1. If valid, go to step 2 -- Step 2 ---- <component-two /> == component with fields ---- (next button) <-- validate content 2. If valid, go to step 2 -- Step 3 ---- <component-three/> == component with fields ---- (next button) <-- validate content 3. If valid, go to step 3，因为那样所有步骤都必须有效才能继续（这是不可能的）/

Answer 1

Vee验证具有“作用域”的概念，因此我认为诀窍是将data-vv-scope="step1"添加到component-one中的每个表单元素中。然后，当您在步骤1的“下一步”按钮中进行验证时，将执行this.$validators.validateAll('step1')。

如果每个组件都有自己的表单，则可以将data-vv-scope属性放在表单级别，它将应用于其中的所有元素。

有关详细信息，请参见this example。

Vee-validate独立验证来自父组件的组件，无需EventBus

1 个答案: