<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>

CC BY-SA 4.0
2019-02-07T15:19:18.903Z
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?
Ed Hebert
CC BY-SA 4.0
2019-02-07T15:33:17.523Z
@EdHebert i had a working example in my answer, take a look and feel free to ask for more details!
Maxime Lafrenière
CC BY-SA 4.0
2019-02-07T16:24:22.737Z
Thank you so much, Maxime! Makes perfect sense.
Ed Hebert
CC BY-SA 4.0
2019-02-08T14:34:14.787Z
@EdHebert feel free to mark my answer as THE answer ;)
Maxime Lafrenière
CC BY-SA 4.0
2019-02-07T15:16:23.127Z
2019-02-07T15:32:39.053Z
2019-02-07T15:32:39.053Z
Maxime Lafrenière
<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>

CC BY-SA 4.0
2019-02-07T16:51:49.487Z
2019-02-07T16:51:49.487Z
Ed Hebert
<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>

CC BY-SA 4.0
2019-12-06T17:03:02.940Z
2019-12-06T19:44:42.423Z
2019-12-06T19:44:42.423Z
Dave
<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>

<login><modal>
Login Modal - How to handle incorrect password / credentials?
# 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, Maxime. 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**: @EdHebert 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, Maxime! Makes perfect sense.  
> **username_1**: @EdHebert feel free to mark my answer as THE answer ;)  

---

### Answer by username_0 on 2019-02-07. Score: 2

@Maxime, 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.


---

