HTMX-字段"keyup changed"时如何获得有效表单



我有一个forms.py,如下所示。我正在使用htmx进行验证。我想获得整个表单以使用form.is_valid((函数。但就我而言,我没有收到有效的表格。

有什么方法可以用HTMX获得所有表单吗?

表单.py

class UniversityForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper(self)
self.helper.form_id = 'university-form'
self.helper.attrs = {
'hx-post': reverse_lazy('index'),
'hx-target': '#university-form',
'hx-swap': 'outerHTML'
}
self.helper.add_input(Submit('submit', 'Submit'))

subject = forms.ChoiceField(
choices=User.Subjects.choices,
widget=forms.Select(attrs={
'hx-get': reverse_lazy('check-subject'),
'hx-target': '#div_id_subject',
'hx-trigger': 'change'
})
)
date_of_birth = forms.DateField(widget=forms.DateInput(attrs={'type': 'date', 'max': datetime.now().date()}))
class Meta:
model = User
fields = ('username', 'password', 'date_of_birth', 'subject')
widgets = {
'password': forms.PasswordInput(),
'username': forms.TextInput(attrs={
'hx-get': reverse_lazy('check-username'),
'hx-target': '#div_id_username',
'hx-trigger': 'keyup[target.value.length > 3]'
})
}
def clean_username(self):
username = self.cleaned_data['username']
if len(username) <= 3:
raise forms.ValidationError("Username is too short")
return username
def clean_subject(self):
subject = self.cleaned_data['subject']
if User.objects.filter(subject=subject).count() > 3:
raise forms.ValidationError("There are no spaces on this course")
return subject

def save(self, commit=True):
""" Hash user's password on save """
user = super().save(commit=False)
user.set_password(self.cleaned_data['password'])
if commit:
user.save()
return user

视图.py

def check_username(request):
form = UniversityForm(request.GET)

if form.is_valid():
print('Valid')
else:
print('No Valid')
print(form.errors)
print(form['date_of_birth'])
context = {
'field': as_crispy_field(form['username']),
'valid': not form['username'].errors
}
return render(request, 'partials/field.html', context)

错误:甚至所有字段都已填充;我的输出>打印("无效"(>打印(form.errors(>打印(形式为"出生日期"(如下。。。

No Valid
<ul class="errorlist"><li>password<ul class="errorlist"><li>This field is required.</li></ul></li><li>date_of_birth<ul class="errorlist"><li>This field is required.</li></ul></li><li>subject<ul class="errorlist"><li>This field is required.</li></ul></li></ul>
<input type="date" name="date_of_birth" max="2022-03-15" required id="id_date_of_birth">

用户名检查HTMX GET请求仅在username字段上激活。默认情况下,HTMX不会在请求中包括任何其他父元素,这是丢失字段错误消息的原因。

要在请求中包含其他元素,可以使用hx-include属性,在其中列出附加字段的CSS查询选择器:

class Meta:
model = User
fields = ('username', 'password', 'date_of_birth', 'subject')
widgets = {
'password': forms.PasswordInput(),
'username': forms.TextInput(attrs={
'hx-get': reverse_lazy('check-username'),
'hx-target': '#div_id_username',
'hx-trigger': 'keyup[target.value.length > 3]',
'hx-include': '[name="password"],[name="date_of_birth"],[name="subject"]'
})
}

注意:在POST请求中,您不必使用它,因为您将HTMX属性放在最外层的表单元素上,因此默认情况下,HTMX将在请求中包括每个字段(表单的子元素(。

最新更新