Handling Currency Input in Django Forms

To display input values with thousand separators and currency symbols while still validating as a decimal, you'll need to create a custom form field that handles the formatting and parsing. Here's how you can implement this:

Custom Currency Field

PYTHONCopied
from django import forms
from django.core.validators import MinValueValidator
import re

class CurrencyField(forms.DecimalField):
    def __init__(self, currency_symbol='€', *args, **kwargs):
        self.currency_symbol = currency_symbol
        super().__init__(*args, **kwargs)
        
    def to_python(self, value):
        if value in self.empty_values:
            return None
            
        # Remove currency symbol and thousand separators
        value = value.replace(self.currency_symbol, '')
        value = value.replace(',', '')
        
        try:
            return super().to_python(value)
        except forms.ValidationError:
            raise forms.ValidationError('Please enter a valid amount')
            
    def widget_attrs(self, widget):
        attrs = super().widget_attrs(widget)
        attrs['placeholder'] = f"{self.currency_symbol} 0.00"
        return attrs

Using the Custom Field in a Form

PYTHONCopied
class PaymentForm(forms.Form):
    euro_amount = CurrencyField(
        currency_symbol='€',
        decimal_places=2,
        max_digits=10,
        validators=[MinValueValidator(0)],
        label='Amount (EUR)',
    )
    
    pound_amount = CurrencyField(
        currency_symbol='£',
        decimal_places=2,
        max_digits=10,
        validators=[MinValueValidator(0)],
        label='Amount (GBP)',
    )

Adding JavaScript for Live Formatting

For a better user experience, you can add JavaScript to format the input as the user types:

JAVASCRIPTCopied
document.addEventListener('DOMContentLoaded', function() {
    const currencyInputs = document.querySelectorAll('.currency-input');
    
    currencyInputs.forEach(input => {
        const currencySymbol = input.dataset.symbol || '€';
        
        input.addEventListener('input', function(e) {
            let value = e.target.value.replace(/[^\d.]/g, '');
            if (value) {
                // Format with thousand separators
                const parts = value.split('.');
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                value = currencySymbol + ' ' + parts.join('.');
            }
            e.target.value = value;
        });
        
        // Initial formatting
        if (input.value) {
            let value = input.value.replace(/[^\d.]/g, '');
            const parts = value.split('.');
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            input.value = currencySymbol + ' ' + parts.join('.');
        }
    });
});

Make sure to add the currency-input class and data-symbol attribute to your form inputs:

PYTHONCopied
# In your form template
{{ form.euro_amount|attr:"class:currency-input"|attr:"data-symbol:€" }}
{{ form.pound_amount|attr:"class:currency-input"|attr:"data-symbol:£" }}

This solution provides:

1. Custom form fields that handle currency symbols and thousand separators
2. Proper validation of decimal values
3. JavaScript for live formatting as users type

You may need to adjust the implementation based on your specific requirements and locale settings.