Setting Required=True on filter fields gives error in HTML

[P Ganesh]

Hi

I have a scenario where I need to ensure the users pick values for certain filter fields - example a from date and to date

Here's how I defined the filter for Invoices - the user needs to enter both the Date from and Date to

class InvoiceFilter(django_filters.FilterSet):

    Invoice_number__contains = django_filters.CharFilter(field_name='Invoice_number',lookup_expr='icontains',)

    Invoice_date_from = django_filters.DateFilter(label='Invoice Date From:', field_name='Invoice_date', lookup_expr='gte', required=True)

    Invoice_date_to = django_filters.DateFilter(label='Invoice Date To:', field_name='Invoice_date', lookup_expr='lte', required=True)

here's the view:

def invoice_search(request):

    f = InvoiceFilter(request.GET, queryset=Invoices.objects.all())

    return render(request, 'invoices/search_invoices.html', {'filter': f})

Here's the template:

    <form action="" method="get" class="form-row">

    <div class="container">

    <div class="row">

     <div class="col">

        {{ filter.form|crispy }}

    <button type="submit" class="btn btn-primary">

        <span class="glyphicon glyphicon-search"></span> Search

      </button>

     </div>

    </div>

    </div>

    </form>

This results in an error on the required fields:

I think the first time the users gets to the URL, the form gets validated on the empty fields and the error is generated

Any thoughts on how to avoid/fix?

The typical form processing in the view ( I cannot figure out how to access the form within the filter and i.e. checking for POST vs GET and validating the form etc.)

-----------------------------------------------------------

Page source on generated HTML

<div id="div_id_Invoice_number__contains" class="form-group"> <label for="id_Invoice_number__contains" class="col-form-label ">

Invoice number contains

</label> <div class=""> <input type="text" name="Invoice_number__contains" class="textinput textInput form-control" id="id_Invoice_number__contains"> </div> </div> <div id="div_id_Invoice_date_from" class="form-group invalid-feedback"> <label for="id_Invoice_date_from" class="col-form-label  requiredField">

Invoice Date From:<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="Invoice_date_from" class="dateinput form-control is-invalid" required id="id_Invoice_date_from"> <p id="error_1_id_Invoice_date_from" class="invalid-feedback"><strong>This field is required.</strong></p> </div> </div> <div id="div_id_Invoice_date_to" class="form-group invalid-feedback"> <label for="id_Invoice_date_to" class="col-form-label  requiredField">

Invoice Date To:<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="Invoice_date_to" class="dateinput form-control is-invalid" required id="id_Invoice_date_to"> <p id="error_1_id_Invoice_date_to" class="invalid-feedback"><strong>This field is required.</strong></p> </div> </div>