Getting server-side feedback when submitting forms with jQuery Form plugin

Question

I've got a few simple front-end forms that users can use to update their profiles. I'm using the combo of the jQuery Validate and Form plugins to handle validation and submission.

I can successfully update profiles when the fields are technically correct, but can't figure out how to get feedback from the server if an error occurs after submission (aka invalid password, username already in use, etc).

Here's an example of my password update form:

      <form action="" class="secondary-content" method="post" accept-charset="UTF-8" id="pwForm">
    <h2>Update password</h2>
    <fieldset>
      <input type="hidden" name="redirect" value="/profile">
      <input type="hidden" name="action" value="users/saveUser">
      <input type="hidden" name="userId" value="{{ user.id }}">
      <input type="hidden" name="password" value="{{ currentUser.password }}">
      <div id="passwordFields">
        <div class="field">
          <label for="npw">New password <a href="#npw" class="js-show-pw micro pull-right">Show password</a></label>
          <input type="password" id="npw" name="newPassword" class="text-input" value="" required />
        </div>
        <div class="field">
          <button class="button--red" type="submit">Update</button>
        </div>
      </div>
    </fieldset>
  </form>

Here is the javascript (in CoffeeScript syntax):

$('#pwForm').validate
  submitHandler: (form) ->
    $(form).ajaxSubmit
      type: 'POST'
      dataType: 'json'
      beforeSubmit: ->
        $(pwFields).transition opacity: 0
        $('#pwLoader').spin(opts).transition opacity: 1
      error: (xhr, status, error) ->
        $('#pwLoader').stop().transition opacity: 0
        $(pwFields).transition opacity: 1
        $(pwFields).append('<label class="error">There was an error. Please try again.</label>')
      success: ->
        $('#pwLoader').stop().transition opacity: 0
        $(pwFields).text ''
        $(pwFields).html('<h3>Password updated</h3>').transition
          opacity: 1
          delay: 200

In this case, I'm actually tripping the "There was an error…" error no matter what I put in the field. If I pull out the javascript, the page refreshes and I don't get errors, but the password doesn't update.

I'm guessing it has to do with posting to the correct URL. Any ideas? Is it even worth using both/either of these plugins?

Thanks!

Answer 1

I myself am building a data locker using JavaScript to talk to Craft. How I have it set up is that the AJAX request is pointing to a template (which a request can be routed to without defining it in the Control Panel) that will load if there are errors. I can then redirect to a success template if I find no errors. Alternatively, you can set the location to redirect to like you did in your example. I'm returning JSON on both templates so that I can run client-side checks to see what I'm getting back.

So if I have errors, I check for those on my request url template and output the JSON if necessary. If I don't, I load my redirect template which either returns a success message or the data I'm looking to retrieve.

You can tell Craft that it's returning a JSON file by giving it a ".json" extension. Alternatively you can also set it manually with:

{% header "Content-Type: application/json" %}

Either way, this should get you what you're looking to achieve.