Template source: accounts/member_signup_form.html

{% extends 'base.html' %} {% load staticfiles crispy_forms_filters front_tags languages_tags i18n %} {% block body_id %}sign-up{% endblock %} {% block content %} <main itemscope itemtype="//schema.org/ProfilePage"> <section id="edit-hero" class="darkgreybg whitecolor"> <div class="container"> <h2 class="pull-left">{% trans 'Sign Up' %}</h2> <div class="edit-notice pull-right"> <span>{% trans 'Already have an account?' %}</span> <a href="#" data-toggle="modal" data-target="#modal-login">{% trans 'Log in now' %} <i class="fa fa-sign-in" aria-hidden="true"></i></a> </div> </div> </section> <section id="author-page" class="sectionpadding"> <div class="container"> <form id="member-profile-form" method="post" enctype="multipart/form-data"> <div class="row"> <div class="col-md-4"> <h3 class="author-article-title">{% trans 'My information' %}</h3> {% csrf_token %} {#{{ form|crispy }}#} {{ form.first_name|as_crispy_field }} {{ form.last_name|as_crispy_field }} {{ form.email|as_crispy_field }} {{ form.password1|as_crispy_field }} {{ form.password2|as_crispy_field }} <div class="custom-checkbox"> <input id="newsletter" type="checkbox" name="newsletter" value="newsletter"> <label for="newsletter">Subscribe to newsletter</label><br> </div> <div class="custom-checkbox"> <input id="author_request" type="checkbox" name="author_request" value="author_request"> <label for="author_request">{% trans 'I want to become author' %}</label><br> </div> {{ form.facebook_link|as_crispy_field }} {{ form.twitter_link|as_crispy_field }} </div> <div class="col-md-8"> <h3 class="author-article-title">{% trans 'Profile picture' %}</h3> <button class="btn btn-primary" id="avatar-upload">{% trans "Upload" %}</button> <img id="avatar-image" style="margin-left: 20px;"> {{ form.avatar|as_crispy_field }} {{ form.avatar.errors }} <h3 class="author-article-title">{% trans 'Short Description' %}</h3> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#english" aria-controls="english" role="tab" data-toggle="tab">English</a></li> <li role="presentation"><a href="#espanol" aria-controls="espanol" role="tab" data-toggle="tab">Español</a></li> <li role="presentation"><a href="#francais" aria-controls="francais" role="tab" data-toggle="tab">Français</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="english"> {{ form.short_desc_en|as_crispy_field }} </div> <div role="tabpanel" class="tab-pane" id="espanol"> {{ form.short_desc_es|as_crispy_field }} </div> <div role="tabpanel" class="tab-pane" id="francais"> {{ form.short_desc_fr|as_crispy_field }} </div> {{ form.short_desc_en.errors }} </div> <div class="pull-right"> <a href="#" class="btn btn-grey">{% trans 'Cancel' %}</a> <input type="submit" id="save" class="btn btn-primary" value="{% trans 'Save' %}"/> </div> </div> </div> </form> </div> </section> </main> {% endblock %} {% block extra_js %} {{ block.super }} <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script> <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script> <script> $(function(){ var f_name_field = $(this).find('#id_first_name'), l_name_field = $(this).find('#id_last_name'), email_field = $(this).find('#id_email'), pwd1_field = $(this).find('#id_password1'), pwd2_field = $(this).find('#id_password2'), avatar = $(this).find('#id_avatar'); f_name_field.attr('required', 'required'); l_name_field.attr('required', 'required'); email_field.attr('required', 'required'); pwd1_field.attr('required', 'required'); pwd2_field.attr('required', 'required'); email_field.keyup(function() { console.log(email_field.val().toLowerCase()); var email = email_field.val().toLowerCase(); email_field.val(email); }); $('#member-profile-form').on('submit', function(e){ e.preventDefault(); var submit = true; if(pwd1_field.val() != pwd2_field.val()){ pwd2_field.closest('#div_id_password2').addClass('has-error'); submit = false; } if($('#avatar-image').attr('src') == '' || $('#avatar-image').attr('src') == undefined){ if($('#div_id_avatar+.errorlist').length){ $('#div_id_avatar+.errorlist').remove(); } $('#div_id_avatar').after('<ul class="errorlist"><li>{% trans 'This field is required.' %}</li></ul>'); submit = false; }else{ if($('#div_id_avatar+.errorlist').length){ $('#div_id_avatar+.errorlist').remove(); } } $.post('{% url 'email_is_unique' %}',{ "email": email_field.val() }, function(res){ console.log(res); if (res['result'] == 'error') { email_field.closest('#div_id_email').addClass('has-error'); submit = false; } if(submit){ $('#member-profile-form').off('submit').submit(); } }); }); }); </script> {% endblock %}