Django Crispy Form中jQuery控制提交按钮显示功能失效求助

我创建了一个Django Crispy Form，希望所有字段填写完成后才显示提交按钮。用jQuery实现后，填完所有字段提交按钮还是不显示，求解决。

表单状态说明 #

• 未使用jQuery隐藏提交按钮：表单显示所有输入字段和底部的提交按钮
• 使用jQuery后：所有字段填写完毕，但提交按钮依然隐藏

相关代码 #

forms.py #

class AppForm(forms.ModelForm):
    
    class Meta:
        model = App
        fields = ('__all__')

    def __init__(self, *args, **kwargs):
        super(AppForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_show_labels = False

        defualt_image_path = '/media/photo.png'
        self.fields['appicon'].widget.attrs['placeholder'] = defualt_image_path
        self.fields['appicon'].widget.attrs['classs']= 'appicon-field'
        self.fields['appname'].widget.attrs.update({'placeholder': 'Apps Name', 'class':'appname-field'})
        self.fields['link'].widget.attrs.update({'placeholder':'App Link','class':'link-field'})
        self.fields['category'].widget.attrs.update({'placeholder':'App Category', 'class': 'catg-field'})
        self.fields['subcategory'].widget.attrs.update({'placeholder':'Sub Category', 'class': 'subcatg-field'})
        self.fields['points'].widget.attrs.update({'placeholder':'ADD POINTS', 'class': 'points-field'})

JavaScript代码 #

$(document).ready(function() {
  // Function to check if all fields are filled
  function checkFields() {
    var imageInput = $('.appicon-field')[0].files.length > 0;
    var charInput1 = $('.appname-field').val().trim() !== '';
    var charInput2 = $('.link-field').val().trim() !== '';
    var charInput3 = $('.catg-field').val().trim() !== '';
    var charInput4 = $('.subcatg-field').val().trim() !== '';
    var charInput5 = $('.points-field').val().trim() !== '';

    // Show/hide submit button based on input status
    document.querySelector('.submitform-button').style.display = imageInput && charInput1 && charInput2 && charInput3 && charInput4 && charInput5 ? 'inline-block' : 'none';
  }

  // Trigger checkFields on input change
  $('.appicon-field, .appname-field, .link field, .catg-field, .subcatg-field, .points-field').on('change', function() {
    checkFields();
  });

  // Initial check on page load
  checkFields();
});

CSS代码 #

.submitform-button {
  display: none;
  padding: 10px 75px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: #f3c19d;
  color: #293845;
  border: 2px solid #ec975b;
}

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="submit-div">
  <button type="submit" class="submitform-button" id="submitform-button">Submit</button>
</div>

问题排查与修复方案 #

1. 修复字段类名拼写错误 #

在forms.py中，appicon字段的类名写成了classs（多了一个s），导致jQuery无法选中该字段：

# 错误写法
self.fields['appicon'].widget.attrs['classs']= 'appicon-field'
# 正确写法
self.fields['appicon'].widget.attrs['class']= 'appicon-field'

2. 修正jQuery选择器错误 #

JavaScript中监听事件的选择器里，.link field是错误的，应该是.link-field：

// 错误写法
$('.appicon-field, .appname-field, .link field, .catg-field, .subcatg-field, .points-field').on('change', function() {
// 正确写法
$('.appicon-field, .appname-field, .link-field, .catg-field, .subcatg-field, .points-field').on('input change', function() {

3. 更换事件类型提升体验 #

change事件只有在输入框失去焦点时才触发，换成input事件可以实时检测输入变化，同时保留change事件兼容文件选择（文件选择用input事件可能不生效）。

4. 优化字段检查逻辑（可选） #

可以简化检查逻辑，避免逐个字段判断：

function checkFields() {
  // 检查文本输入字段
  const textFieldsFilled = $('.appname-field, .link-field, .catg-field, .subcatg-field, .points-field').toArray().every(field => field.value.trim() !== '');
  // 检查文件字段
  const fileFieldFilled = $('.appicon-field')[0].files.length > 0;
  
  $('.submitform-button').toggle(textFieldsFilled && fileFieldFilled);
}

修复后的完整JavaScript代码 #

$(document).ready(function() {
  function checkFields() {
    const textFieldsFilled = $('.appname-field, .link-field, .catg-field, .subcatg-field, .points-field').toArray().every(field => field.value.trim() !== '');
    const fileFieldFilled = $('.appicon-field')[0].files.length > 0;
    
    $('.submitform-button').toggle(textFieldsFilled && fileFieldFilled);
  }

  $('.appicon-field, .appname-field, .link-field, .catg-field, .subcatg-field, .points-field').on('input change', checkFields);

  checkFields();
});

内容的提问来源于stack exchange，提问作者rohit10