[Answer]-How to implement bootstrapvalidation inDjango

by

1👍

Ok, I figured it out, it was really quite simple. I included this javascript as the last thing before the closing html tag in my base.html file:

    <body>

<script type="text/javascript">
$(document).ready(function() {
    $('#PersonForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            parent_or_guardian_email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and can\'t be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            },

        }
    });
});
</script>
</body>

above which (in base.html) I made sure to include the correct files (order does matter)

<link href ="../../../../static/spotlight/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link href ="../../../../static/spotlight/assets/css/bootstrap.css" rel="stylesheet">
    <link href ="../../../../static/spotlight/assets/css/bootstrapValidator.min.css" rel="stylesheet">

and made my html for the page containing the form look like this

 {% extends "spotlight/base.html" %}

{% block content %}
<h3> Add Athlete</h3>
<br>
<form  class="form-horizonal" role="form" action="{% url 'spotlight:addstu' person_id team_id %}" method="post" >
    {% for field in form %}
            <div class="fieldWrapper"><p>
                {% if field.label = "Parent or guardian email" %}

                            <div class="col-lg-5" id="PersonForm">
                            {{ field.label_tag }}&nbsp;{{ field }}
                            </div>

                {% else %}
                {{ field.label_tag }}&nbsp;{{ field }}
                {% for error in field.errors %}
                    &nbsp;<font color="Red">{{ error }}</font>&nbsp; 
                {% endfor %}
                {% endif %}
            </p></div>
        {% endfor %}
{% csrf_token %}

<input class="btn btn-default" type="submit" value="add athlete" /> 
</form>
{% endblock content %}

and I didn’t need to create a widget outside the form, just include it like this

parent_or_guardian_email = forms.EmailField(widget =forms.TextInput(attrs={'type':'text', 'class':'form-control','name':"parent_or_guardian_email",'class':"col-lg-5",}),help_text = "Changing this field will create a new user for this email address, if you wish to change this user's contact information"
        +" please ask them to do so on their page or contact a site admin ",max_length=75)

for some reason the feedbackIcons aren’t showing, but the validation messages are displaying as the user fills in the field, which is what I really needed. Hope someone else finds this so they don’t have to bag their head for as long as I did.

👤wrongsmellbabybird

Leave a comment