CODEWITHSUNDEEP
djangodjango-forms
xtrinch
xtrinch

Reputation: 2281

Django forms error placeholder

I am using Django's ModelForms. I have placeholders on my text inputs, and I want the placeholders to change on error (as to indicate the error inside the inputs, not outside). I haven't found a way to override templates from widgets. How can I accomplish that?

class BusinessForm(ModelForm):
    color = forms.ChoiceField(choices=Business.colors)
    category = forms.ModelChoiceField(
        queryset=BusinessCategory.objects.all(),
        to_field_name='id',
        empty_label='Select Business category'
    )
    image = forms.ImageField(widget=ImageInput(), required=False)

  class Meta:
      model = Business
      fields = ['name', 'strapline', 'story', 'category', 'color',
              'address', 'secondary_address', 'city', 'county', 'postcode',
              'phone_number', 'email', 'website', 'image']
      widgets = {
        'name': forms.TextInput(attrs={'placeholder': 'Business name * Required'}),
        'strapline': forms.TextInput(attrs={'placeholder': 'Business strapline'}),
        'story': forms.Textarea(attrs={'placeholder': 'Your business story'}),
        'address': forms.TextInput(attrs={'placeholder': 'Address 1'}),
        'secondary_address': forms.TextInput(attrs={'placeholder': 'Address 2'}),
        'city': forms.TextInput(attrs={'placeholder': 'Town/City'}),
        'county': forms.TextInput(attrs={'placeholder': 'Country'}),
        #'postcode': forms.TextInput(attrs={'placeholder': 'Postcode*', 'ng-blur': 'validatePostCode()', 'ng-model': 'postcode'}),
        'postcode': forms.TextInput(attrs={'placeholder': 'Postcode * Required'}),
        'phone_number': forms.TextInput(attrs={'placeholder': 'Business phone number * Required'}),
        'email': forms.EmailInput(attrs={'placeholder': 'Business email * Required'}),
        'website': forms.TextInput(attrs={'placeholder': 'Enter business website e.g. www.mybusiness.co.uk'}),
    }
      labels = {
        'name': 'Business Name',
        'strapline': 'Business Strapline',
        'story': 'Your Business Story',
        'category': 'Select Business category',
        'address': 'Address 1',
        'secondary_address': 'Address 2',
        'city': 'Town/City',
        'county': 'Country',
        'postcode': 'Postcode*',
        'phone_number': 'Business phone number*',
        'email': 'Business email*',
        'website': 'Business Website',

    }

Upvotes: 1

Views: 695

Answers (2)

Yaaaaaaaaaaay
Yaaaaaaaaaaay

Reputation: 476

Don't do that.

Placeholders are displayed only if the input values are blank (empty). It might work for required inputs but not for inputs with values in. In this case the placeholders will disappear and you cannot warn users with the wrong inputs.

That's why most websites are displaying errors next / above / below the inputs fields.

So if you still tend to place errors into placeholders for the empty inputs, you will have to use Javascript (e.g. with jQuery library).

For example if a user leaves an input (blur effect) you will check if the input is required. If so and the input is empty you will place the error into the placeholder attribute.

Upvotes: 2

Matthew Schinckel
Matthew Schinckel

Reputation: 35629

You may pass an attrs dict to a widget, and if you are using the regular form rendering, these will be rendered:

class MyForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={
        'placeholder': _('This is a required value')
    })

If you wanted this to only be shown on an error, then you'd possibly be able to set this in the clean_name method, although it's not normally the sort of thing you'd see in a clean_* method.

Alternatively, you could do it in the template. Have a look at Django Sniplates for a nicer way of building django templates.

Upvotes: 2

Related Questions