JSON error message not displayed in AMP amp-mustache <submit-error> form

Question

I have the following form in an AMP website to display an input for an email registration dialog:

<form method="post" action-xhr="/amp-register-email" target="_top" id="emailForm" enctype="application/json">
 <label for="email">Email Address:</label>
 <input type="email" id="email" name="email" required on="change:AMP.setState({emailState: {hasError: false}})">
 <div [hidden]="!emailState.hasError" hidden>
 Email incorrect.
 </div>
 <input type="submit" value="Registrieren">
 <div submitting>
 <template type="amp-mustache">
 <div class="spinner">X</div>Wait...
 </template>
 </div>
 <div submit-success>
 <template type="amp-mustache">
 Registration successful.
 </template>
 </div>
 <div submit-error>
 <template type="amp-mustache">
 Error: {{ errorMessage }}
 </template>
 </div>
 </form>

Now in the backend I got the following method in my flask backend:

@app.route('/amp-register-email', methods=['POST'])
def register_email():
 email = request.form.get("email", None)
 
 # Just for testing purpose I am always sending an error message
 response_dict = {"errorMessage": "Die eingegebene E-Mail-Adresse ist bereits registriert."}
 response = Response(response=json.dumps(response_dict), mimetype="application/json", status=406) # 406 not acceptable
 return response

However, this errorMessage is not displayed in the part of the form. Instead I only see "Error:" and nothing afterwards.

How can I send a customized error message from the backend to the frontend and display it in an AMP website?

• Undesirable: Could you please clarify wether this is plain old Jinja or is this some sort of frontend JS framework for your email registration dialog snippet?
• toom: Plain old standard html 5 but embedded in jinja, so yes. Good point jinja uese {{}} as well... how to solve this?
• toom: @Undesirable Okay, fixed it with {% raw %}{{ errorMessage }}{% endraw %}. If you want write an answer I can accept it so you will get the credit. If you want to.
• Undesirable: Did some research on my end (since I'm not that well-rehearsed in AMP) - hope it helps in terms of another solution you could use :)

Answer 1

It appears that Jinja was interpreting your Mustache template variable ({{ errorMessage }}) as a Jinja variable - as both were using the same {{ }} delimiters.

As per your comment, you managed to fix this by using the Jinja {% raw %} tag.

The other way which you could fix this would be to redefine the delimiters that Mustache uses (perhaps instead of using {{ }} for your mustache templating delimiters you could use [[ ]] instead).