Hidden div by Vuejs makes form invalid and fields not clean

[cehceh]

I’ve a form has many inputs so I have to make some ““div”” to be hidden with a switch button like the following images

The problem is (When the inputs are hide as in the last image my form is invalid and fields error say <ul class="errorlist"><li>Enter a number.</li></ul>)

PRODUCT-FORM FIELDS:  order_limit_plus <ul class="errorlist"><li>Enter a number.</li></ul>
PRODUCT-FORM FIELDS:  order_unit_plus 
PRODUCT-FORM FIELDS:  order_limit_minus <ul class="errorlist"><li>Enter a number.</li></ul>
PRODUCT-FORM FIELDS:  order_unit_minus 
PRODUCT-FORM FIELDS:  expiry 
PRODUCT-FORM FIELDS:  expire_period <ul class="errorlist"><li>Enter a whole number.</li></ul>
PRODUCT-FORM FIELDS:  expire_ref <ul class="errorlist"><li>Select a valid choice. undefined is not one of the available choices.</li></ul>
PRODUCT-FORM FIELDS:  expire_period_hint <ul class="errorlist"><li>Enter a whole number.</li></ul>
PRODUCT-FORM FIELDS:  hint_ref <ul class="errorlist"><li>Select a valid choice. undefined is not one of the available choices.</li></ul>

But when the fields are not hide as the first image (everything works fine)
The problem is when the (div that hold the inputs is Hidden)
I tried to give them (blank=True, null=True,) in the model but the error appears when they are hidden
my model fields

order_limit_plus = models.DecimalField(
        decimal_places=2, max_digits=10, 
        default=0.00, 
        blank=True, null=True,
        verbose_name=_("Order Limit"),
    )
    order_unit_plus = models.CharField(
        max_length=20, default="", 
        blank=True, null=True,
    )

    order_limit_minus = models.DecimalField(
        decimal_places=2, max_digits=10, 
        default=0.00, 
        blank=True, null=True,
        verbose_name=_("Order Limit"))
    order_unit_minus = models.CharField(
        max_length=20, default="", 
        blank=True, null=True,
    )

    expire_period = models.DecimalField(
        decimal_places=2, max_digits=10, default=0.00, 
        blank=True, null=True,
        verbose_name=_("Expire Period")
    )
    expire_ref = models.CharField(
        max_length=8, choices=choices.TIMES, 
        default=choices.HOUR, 
        blank=True, null=True,
    )
    expire_period_hint = models.DecimalField(
        decimal_places=2, max_digits=10, 
        default=0.00,
        blank=True, null=True,
    )
    hint_ref = models.CharField(
        max_length=8, choices=choices.TIMES, 
        default=choices.HOUR, blank=True, null=True,
    )

I tried to make them required=false

self.fields['expire_period'].required = False
        self.fields['expire_period_hint'].required = False
        self.fields['order_limit_plus'].required = False
        self.fields['order_limit_minus'].required = False
        
        self.fields['order_unit_plus'].required = False
        self.fields['order_unit_minus'].required = False
        
        self.fields['expire_ref'].required = False
        self.fields['hint_ref'].required = False

But it is useless the error message appears because they are with a hidden div

and I tried the following

self.fields['expire_period'].widget.attrs['value'] = 0
        self.fields['expire_period_hint'].widget.attrs['value'] = 0
        
        self.fields['order_limit_plus'].widget.attrs['value'] = 0.00
        self.fields['order_limit_minus'].widget.attrs['value'] = 0.00
        
        self.fields['order_unit_plus'].widget.attrs['value'] = 0
        self.fields['order_unit_minus'].widget.attrs['value'] = 0
        
        self.fields['expire_ref'].widget.attrs['value']  = choices.TIMES[1][0]
        self.fields['hint_ref'].widget.attrs['value'] = choices.TIMES[0][0] 

Also I tried to pass initial values to them in the views

pro_data = {
            'order_limit_minus': 0,
            'order_limit_plus': 0,
            'expire_period_hint':0,
            'expire_period': 0,
            'expire_ref': choices.TIMES[1][0],
            'hint_ref': choices.TIMES[1][0],
        }
form = ProductForm(
            request.POST or None, 
            request.FILES or None, 
            prefix="pro", 
            initial=pro_data
        )

Any suggestions …

[cehceh]

Okay, I will explain what I found and solved till now
The two Char Fields (order_unit_plus and order_unit_minus) so they returned clean without any effort.
I don’t know why (they are as the rest fields, in a hidden “div”). The strange thing is when I printed the form.cleaned_data they have “undefined” value
'order_unit_plus': 'undefined', 'order_unit_minus': 'undefined', I don’t know why it must be (None or empty like this (" ") but (“undefined”) it is my first time to see it), Any way, there is no problem it is clean and validate .

The four Decimal Fields (
expire_period_hint, expire_period, order_limit_plus, order_limit_minus
)
Are handled as follow

def clean_expire_period(self):
        data = self.cleaned_data
        if data['expire_period'] == 'undefined':
            data['expire_period'] = Decimal('0.00')
        print('EXPIRE_PERIOD::::', data['expire_period'])
        return data['expire_period']
    
    def clean_expire_period_hint(self):
        data = self.cleaned_data
        if data['expire_period_hint'] == 'undefined':
            data['expire_period_hint'] = Decimal('0.00')
        return data['expire_period_hint']
    
    def clean_order_limit_plus(self):
        data = self.cleaned_data
        if data['order_limit_plus'] == 'undefined':
            data['order_limit_plus'] = Decimal('0.00')
        return data['order_limit_plus']
    
    def clean_order_limit_minus(self):
        data = self.cleaned_data
        if data['order_limit_minus'] == 'undefined':
            data['order_limit_minus'] = Decimal('0.00')
        return data['order_limit_minus']

I had to make validation to every field separately.

But the problem is still existing in The two Choice Fields(
expire_ref, hint_ref
)
I tried to do like this

HOUR = "hour"
DAY = "day"
WEEK = "week"
MONTH = "month"
YEAR = "year"

TIMES = (
    (HOUR, _("ساعة")),
    (DAY, _("يوم")),
    (WEEK, _("اسبوع")),
    (MONTH, _("شهر")),
    (YEAR, _("سنة")),
)
def clean_expire_ref(self):
        data = self.cleaned_data
        times = [
            obj for obj in choices.TIMES
        ]
        dict_val = [
            (key, value) for key,value in dict(times).items()
        ]
        if data['expire_ref'] == 'undefined':
            data['expire_ref'] = dict_val #choices.TIMES[0][0]
        print('EXPIRE_REF::::', data['expire_ref'])
        return data['expire_ref']

But it is still giving me the following error (

<ul class="errorlist"><li>Select a valid choice. undefined is not one of the available choices.</li></ul>

)
But it’s Okay I will fix it,

Any suggestions will be appreciated

[cehceh]

Finally I found what I miss, To validate the fields (expire_ref & hint_ref) is

def clean_expire_ref(self):
        data = self.cleaned_data
        times = [
            obj for obj in choices.TIMES
        ]
        dict_val = [
            (key, value) for key,value in dict(times).items()
        ]
        if data['expire_ref'] == 'undefined':
            data['expire_ref'] = dict_val[0][0]
        
        return data['expire_ref']

def clean_hint_ref(self):
        data = self.cleaned_data
        times = [
            obj for obj in choices.TIMES
        ]
        dict_val = [
            (key, value) for key,value in dict(times).items()
        ]
        if data['hint_ref'] == 'undefined':
            data['hint_ref'] = dict_val[0][0] 
        return data['hint_ref']