Answers.Body: <p>You may use some ajax to send your form so your modal will not validate and/or close and your page wont reload.</p>
  
  <p>Here's a working example of what you will need to do in JS (this example use jQuery):</p>
  
  <pre><code>$('#yourFormId').submit( function (e ) {
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
          method: 'POST',
          url: '/',
          data: data,
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
      .success(function(data) {
            console.log('success', data);
      })
        .error(function(data) {
          console.log('error', data);
        });
      });
  </code></pre>
  
  <p>If validation errors happen, you will see that in the data object folowwing the <code>.error</code>.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T15:19:18.903Z
Answers.Text: Thanks, Maxime. Is it possible to submit a standard Craft 2 login form via AJAX, or would I need to use a plugin like SproutForms?
Answers.UserDisplayName: Ed Hebert
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T15:33:17.523Z
Answers.Text: @EdHebert i had a working example in my answer, take a look and feel free to ask for more details!
Answers.UserDisplayName: Maxime Lafrenière
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T16:24:22.737Z
Answers.Text: Thank you so much, Maxime! Makes perfect sense.
Answers.UserDisplayName: Ed Hebert
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-08T14:34:14.787Z
Answers.Text: @EdHebert feel free to mark my answer as THE answer ;)
Answers.UserDisplayName: Maxime Lafrenière
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T15:16:23.127Z
Answers.LastActivityDate: 2019-02-07T15:32:39.053Z
Answers.LastEditDate: 2019-02-07T15:32:39.053Z
Answers.UserDisplayName: Maxime Lafrenière
Answers.Body: <p>@Maxime, I had to edit your code slightly, as $.ajax() doesn't accept .success as a chain. </p>
  
  <pre><code>$('#login-form').submit( function (e ) {
      e.preventDefault();
      var data = $(this).serialize();
      $.ajax({
          method: 'POST',
          url: '/',
          data: data,
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          success: function(){
              console.log('success', data);
          },
          error: function() {
              console.log('error', data);
          }
  
      });
  
  });
  </code></pre>
  
  <p>Also, I notice that the code above returns success regardless of whether the password is correct. That is, if I type the wrong password, I still get "success" and the data string.</p>
  
  <p>Any ideas?</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-02-07T16:51:49.487Z
Answers.LastActivityDate: 2019-02-07T16:51:49.487Z
Answers.UserDisplayName: Ed Hebert
Answers.Body: <p>I am developing in Craft 3 and the accepted answer needs some modification to work.  I might also be ahead a version of jQuery.  Craft 3 looks for the 'Accept' header in the controller to determine if a JSON response is needed.  Therefore you need to also send an 'Accept','application/json; charset=utf-8' header to elicit a JSON response from the login command.</p>
  
  <pre><code>$('#main-nav-login').submit(function (e) {
      e.preventDefault();
      var data = $(this).serialize();
      $.ajax({
              method: 'POST',
              url: '/',
              data: data,
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                  'Accept':'application/json; charset=utf-8'
              }
          })
          .done(function (data) {
              console.log(data);
  
              // example error
              // {errorCode: "invalid_credentials", error: "Invalid username or password."}
              if(typeof data.error !== "undefined"){
                  // handle error here
                  console.log(`Something's not right. ${data.error}`);
              }
  
              // handle success redirect
              if(typeof data.success !== "undefined" &amp;&amp; data.success === true){
                  typeof data.returnUrl !== "undefined" ? location.href = data.returnUrl : location.href = '/';
              }
  
          })
          .fail(function (data) {
              console.log('error', data);
          });
  });
  </code></pre>
  
  <p>If the user login has failed, you will get a JSON response from the .done method that looks something like this:</p>
  
  <pre><code>{errorCode: "invalid_credentials", error: "Invalid username or password."}
  </code></pre>
  
  <p>You can then use this to display error messages appropriately.  A successful sign in will return JSON like this:</p>
  
  <pre><code>{success: true, returnUrl: "http://localhost/", csrfTokenValue: "Q5c..."}
  </code></pre>
  
  <p>The returnUrl field could be used to navigate to the appropriate page.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-12-06T17:03:02.940Z
Answers.LastActivityDate: 2019-12-06T19:44:42.423Z
Answers.LastEditDate: 2019-12-06T19:44:42.423Z
Answers.UserDisplayName: Dave
Body: <p>I'm <a href="http://hdm.wsm.mybluehost.me/" rel="nofollow noreferrer">developing a site</a> in Craft 2, using a modal to display the login form. The modal can be seen by clicking the Login button at top right. </p>
  
  <p>I'm essentially using the form as outlined in the <a href="https://docs.craftcms.com/v2/templating/login-form.html" rel="nofollow noreferrer">Craft 2 docs here</a>. But it's not set up to work properly with a modal behavior. Currently, if a user types the wrong password credentials, the form still executes, refreshing to the homepage. It's only when the user once again clicks the "login" button that the modal is once again revealed, now showing the error message.</p>
  
  <p>How might I check whether the user's credentials are valid <strong><em>before</em></strong> submitting the form? If credentials are incorrect, I'd like to prevent execution of the form and keep the modal on screen for the user to try again.</p>
  
  <p>Thanks</p>
  
Tags: <login><modal>
Title: Login Modal - How to handle incorrect password / credentials?
ThreadText: # Login Modal - How to handle incorrect password / credentials?
  
  (Asked by: username_0 on 2019-02-07)
  
  I'm [developing a site](http://hdm.wsm.mybluehost.me/) in Craft 2, using a modal to display the login form. The modal can be seen by clicking the Login button at top right.
  
  I'm essentially using the form as outlined in the [Craft 2 docs here](https://docs.craftcms.com/v2/templating/login-form.html). But it's not set up to work properly with a modal behavior. Currently, if a user types the wrong password credentials, the form still executes, refreshing to the homepage. It's only when the user once again clicks the "login" button that the modal is once again revealed, now showing the error message.
  
  How might I check whether the user's credentials are valid ***before*** submitting the form? If credentials are incorrect, I'd like to prevent execution of the form and keep the modal on screen for the user to try again.
  
  Thanks
  
  **Tags:** login, modal
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_1 on 2019-02-07. Score: 2 | Accepted answer
  
  You may use some ajax to send your form so your modal will not validate and/or close and your page wont reload.
  
  Here's a working example of what you will need to do in JS (this example use jQuery):
  
  ```
  $('#yourFormId').submit( function (e ) {
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
          method: 'POST',
          url: '/',
          data: data,
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
      .success(function(data) {
            console.log('success', data);
      })
        .error(function(data) {
          console.log('error', data);
        });
      });
  
  ```
  
  If validation errors happen, you will see that in the data object folowwing the `.error`.
  
  > **Comments:**
  > **username_0**: Thanks, username_1. Is it possible to submit a standard Craft 2 login form via AJAX, or would I need to use a plugin like SproutForms?  
  > **username_1**: @username_0 i had a working example in my answer, take a look and feel free to ask for more details!  
  > **username_0**: Thank you so much, username_1! Makes perfect sense.  
  > **username_1**: @username_0 feel free to mark my answer as THE answer ;)  
  
  ---
  
  ### Answer by username_0 on 2019-02-07. Score: 2
  
  @username_1, I had to edit your code slightly, as $.ajax() doesn't accept .success as a chain.
  
  ```
  $('#login-form').submit( function (e ) {
      e.preventDefault();
      var data = $(this).serialize();
      $.ajax({
          method: 'POST',
          url: '/',
          data: data,
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          success: function(){
              console.log('success', data);
          },
          error: function() {
              console.log('error', data);
          }
  
      });
  
  });
  
  ```
  
  Also, I notice that the code above returns success regardless of whether the password is correct. That is, if I type the wrong password, I still get "success" and the data string.
  
  Any ideas?
  
  
  ---
  
  ### Answer by username_2 on 2019-12-06. Score: 1
  
  I am developing in Craft 3 and the accepted answer needs some modification to work. I might also be ahead a version of jQuery. Craft 3 looks for the 'Accept' header in the controller to determine if a JSON response is needed. Therefore you need to also send an 'Accept','application/json; charset=utf-8' header to elicit a JSON response from the login command.
  
  ```
  $('#main-nav-login').submit(function (e) {
      e.preventDefault();
      var data = $(this).serialize();
      $.ajax({
              method: 'POST',
              url: '/',
              data: data,
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                  'Accept':'application/json; charset=utf-8'
              }
          })
          .done(function (data) {
              console.log(data);
  
              // example error
              // {errorCode: "invalid_credentials", error: "Invalid username or password."}
              if(typeof data.error !== "undefined"){
                  // handle error here
                  console.log(`Something's not right. ${data.error}`);
              }
  
              // handle success redirect
              if(typeof data.success !== "undefined" && data.success === true){
                  typeof data.returnUrl !== "undefined" ? location.href = data.returnUrl : location.href = '/';
              }
  
          })
          .fail(function (data) {
              console.log('error', data);
          });
  });
  
  ```
  
  If the user login has failed, you will get a JSON response from the .done method that looks something like this:
  
  ```
  {errorCode: "invalid_credentials", error: "Invalid username or password."}
  
  ```
  
  You can then use this to display error messages appropriately. A successful sign in will return JSON like this:
  
  ```
  {success: true, returnUrl: "http://localhost/", csrfTokenValue: "Q5c..."}
  
  ```
  
  The returnUrl field could be used to navigate to the appropriate page.
  
  
  ---
  
  