How to Add Input Mask using JQuery in Django?
This tutorial will give you example of how to add input mask using jquery in python django. we will help you to give example of how to add input mask using jquery in django. I’m going to show you about django python input mask using jquery. let’s discuss about input mask using jquery.
Let's see bellow example I explained simply about django python input mask using jquery.
Step 1 : Create a ProjectIn this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:
django-admin startproject exampleappStep 2 : Create a App
python3 manage.py startapp contactForm
Next, you need to add it in the settings.py file as follows:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'contactForm',
]
Step 3 : Create a Model
In this step. we will require the database model for storing contacts.Open the contactForm/models.py file and add the following code:
contactForm/forms.py
from django.db import models
class Contact(models.Model):
contact = models.CharField(max_length=100)
Step 4 : Create a FormClass
First of all in this step we will create a new file called forms.py and create a Django form you need to use Django Form Class
contactForm/forms.py
from django.forms import ModelForm
from django import forms
from core.models import Contact
class ContactForm(forms.ModelForm):
contact = forms.CharField(required=True,
widget=forms.TextInput(attrs={'placeholder': 'Contact',
'class': 'form-control inputmask',
}))
class Meta:
model = Contact
fields = "__all__"
Step 5 : Creating the Views
In this step, we need to create the views for performing fetch record to the database.Open the contactForm/views.py file and add:
contactForm/views.py
from django.shortcuts import render, redirect
from .forms import ContactForm
def contactForm(request):
if request.method == "POST":
form = ContactForm(request.POST)
if form.is_valid():
try:
return redirect('contact')
except:
pass
else:
form = ContactForm()
return render(request,'contact.html',{'form':form})
Step 6 : Creating the Templates
Next, open the contactForm/templates/index.html file and the add:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How To Add Input Mask Using Jquery In Django Python ?</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5 pt-5">
<div class="row d-flex justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h4>How To Add Input Mask In Django Forms ? - <span class="text-primary">Tuts-Station.com</span></h4>
</div>
<div class="card-body">
<form method="POST" novalidate>
{% csrf_token %}
<div class="form-row">
<div class="col-md-12">
<div class="form-group">
<label class="small mb-1">Contact:</label>
{{ form.contact }}
</div>
</div>
</div>
<div class="form-group mt-2 mb-0">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.inputmask').inputmask('(999)-999-9999');
});
</script>
</html>
Step 7 : Creating Urls
In this section, we’ll create the urls to access our views.Go to the urls.py contactForm/urls.py file and update it as follows:
contactForm/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.contactForm, name='contact'),
]
Next, we will require the modify the urls.py your root preoject folder lets update the file.
exampleapp/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('contactForm.urls')),
]
Run the Server
In this step, we’ll run the local development server for playing with our app without deploying it to the web.
python manage.py runserver
Next, go to the url address bar with a web browser.
http://localhost:8000/
I Hope It will help you....