Styling errors in the form - django

Question

There is the following form.
<form id="contact_form" class="get-in-touch-form" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h1 class="title {% if component.css_title_style %}{{ component.css_title_style }}{% endif %}">
{{ component.title }}
</h1>
<p class="subtitle {% if component.css_subtitle_style %}{{ component.css_subtitle_style }}{% endif %}">
{{ component.description }}
</p>
<div class="row">
<div class="col-sm-6">
<div class="input-wrapper">
{{ contact_form.name }}
</div>
<div class="input-wrapper">
{{ contact_form.email }}
</div>
<div class="input-wrapper">
{{ contact_form.phone }}
</div>
<div class="input-wrapper" style="position: relative;">
{{ contact_form.text }}
<img id="clip" src="{% static 'images/clip.png' %}" style="position: absolute; left: 95%; top: 5%;" onclick="document.querySelector('#id_file').click()">
</div>
<div class="input-wrapper" style="display: none">
{{ contact_form.file }}
</div>
<div class="input-wrapper">
<div class="col-md-5">
<div class="custom-checkbox">
{{ contact_form.nda }}
<label for="checkbox1">Send me an NDA</label>
</div>
</div>
<img src="/static/images/loader.svg" height="65" alt="Loading..." style="display: none;">
<input type="submit" value="Send" class="green-button">
</div>
</div>
<div class="col-sm-6">
<img src="{% static 'images/map_all.png' %}">
</div>
</div>
</form>
When I submit it and errors occur, text is displayed near the field that generates the error in its usual form. How can I style this text? For example, to highlight this field somehow?
I tried to do this through ajax, but it didn’t work. When I try to send a form containing errors to the server, I immediately get an error (for example, this field is required) and accordingly it does not reach any styling.
Now the error output looks like this.
How can you style it this way?

Answer 1

Add novalidate to form tag.
Add following block after your input fields.
<div class="contact_form_name" style="font-size:15pt; position: absolute; right: 30px; top: 20px; color: #FD7900; display: none"></div>
Add jquery + ajax code.
var frm = $('#contact_form');
frm.submit(function (e) {
e.preventDefault();
$.each($("div[class^='contact_form_']"), function(ind, value){
$(value).hide();
$(value).prev().css('border', 'none')
})
$.ajax({
type: frm.attr('method'),
url: '',
data: frm.serialize(),
success: function(data) {
console.log(data)
if (data.result == 'error'){
$.each(data.response, function(key, value) {
$('.contact_form_' + key).css('display', 'block')
$('.contact_form_' + key).prev().css("border", 'solid #FD7900')
$('.contact_form_' + key).text(value)
})
} else {
location.reload();
}
}
});
return false;
});
Add view function.
def post(self, request, *args, **kwargs):
contact_form = ContactFormForm(request.POST, request.FILES)
if contact_form.is_valid():
contact_form.save()
return JsonResponse({})
else:
response = {}
for k in contact_form.errors:
response[k] = contact_form.errors[k][0]
return JsonResponse({'response': response, 'result': 'error'})