[Solved]-How to make a form field numeric only in Django

by

3👍

✅

In the end I ended up using a jQuery based solution.
Question here. Instead of adding type I added a class “number” and added jquery number validation on it. But this is a hackish solution, especially when we have html 5 “number” in place. If anyone finds a way to do this please answer.

In the form:

 def __init__(self,*args,**kwargs):
    super( PropertyFloorForm, self).__init__(*args, **kwargs)
    self.fields['number_of_units'].widget.attrs['class'] = "number"

In the template

$(document).ready(function() {
    $(".number").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
            // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
            // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        } else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    });
});
👤Akash Deshpande

22👍

Django 1.6 has a NumberInput Widget, but 1.6 is currently not stable.

But you could try something like this:

from django.forms import ModelForm, CharField, TextInput

class PropertyForm(ModelForm):

    brokers_phone_number = CharField( widget=TextInput(attrs={'type':'number'}))

    class Meta:
     ...
👤shry

2👍

Here is another solution:

  • Add validators in the model file
  • Add css class to fields in the model form
  • Use jquery to change type of the the above class to ‘number’ on document/page load

IN THE MODEL: 

    exp_from = models.IntegerField(default=0,
        validators=[
            MaxValueValidator(100),
            MinValueValidator(0)
        ])

    exp_to = models.IntegerField(default=1,
        validators=[
            MaxValueValidator(100),
            MinValueValidator(1)
        ])

IN THE MODEL FORM – add a jquery class

self.fields['exp_from'].widget.attrs['class'] = "text_type_number"
self.fields['exp_to'].widget.attrs['class'] = "text_type_number"

IN THE HTML FILE/JS FILE

$(document).ready(function(){
   $('.text_type_number').attr('type', 'number');
});
👤Nav

1👍

I know this is a faily old thread, am adding this for posterity

To get around this issue save the following as html5type.py

from django import template
register = template.Library()
def html5type(var):
    if isinstance(var, int):
        return 'number'
    else:
        return 'text'  

register.filter('html5type', html5type)

Then, in template:

{% load html5type %}
<input type={{ field.value | html5type }} ></input>

Of course you can extend the html5type function further for other types

Caveat: Numeric fields need a default value for the above to work

👤Mabura Ze Guru

1👍

Instead of RegexValidator, give validation in forms attributes only like…

class StaffDetailsForm(forms.ModelForm):
    number = forms.CharField(required=True,widget=forms.TextInput(attrs={'class':'form-control' , 'autocomplete': 'off','pattern':'[0-9]+', 'title':'Enter numbers Only '}))

and so on…

Else you will have to handle the error in views.
It worked for me try this simple method…
This will allow users to enter only Number only

👤Javed

Leave a comment