M
M
Mike2017-03-13 17:59:29
JavaScript
Mike, 2017-03-13 17:59:29

How to make form validation in modal window?

I'm doing a user authorization in a modal window. Authorization works, but if the user enters a non-existent login or an incorrect password, the modal window is hidden, but in it (in the modal window) if it is called again, a message appears stating that the password or login were incorrect. How can I make it not hide after wrong input?
views.py

class LoginFormView(FormView):
    form_class = AuthenticationForm
    template_name = 'fighter/index.html'
    success_url = "/profile"

    def form_valid(self, form):
        self.user = form.get_user()
        login(self.request, self.user)
        return super(LoginFormView, self).form_valid(form)

index.html
<div id="modal_form"><!-- Сaмo oкнo --> 
        <div id="stupidForm">ВХОД</div>
      <span id="modal_close">X</span> <!-- Кнoпкa зaкрыть --> 

      <form id="loginform" action="" method="POST">{% csrf_token %}
          <br><br><br>
            {{ form.as_p }}
          <input type="submit" name="login" value="ВОЙТИ">
      </form>
    </div>
    <div id="overlay"></div><!-- Пoдлoжкa -->

modal_window.js
$(document).ready(function() {
  $('a#go').click( function(event){ // клик пo ссылки с id="go"
    event.preventDefault(); 
    $('#overlay').fadeIn(400, 
     	function(){ 
        $('#modal_form') 
          .css('display', 'block') 
          .animate({opacity: 1, top: '50%'}, 200); 
    });
  });
  /* Зaкрытие мoдaльнoгo oкнa*/
  $('#modal_close, #overlay').click( function(){ 
    $('#modal_form')
      .animate({opacity: 0, top: '45%'}, 200,
        function(){ // пoсле aнимaции
          $(this).css('display', 'none'); 
          $('#overlay').fadeOut(400); 
        }
      );
  });
});

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Kitaev, 2017-03-14
@deliro

Send the form with AJAX, instead of hiding put some kind of spinner and wait for a response. And if the answer is positive - fadeOut and reload the current url. Errors from django send JsonResponse(form.errors).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question