AMP(Accelerated Mobile Pages) API call

Question

I have a form with fields name, mobile number,email and city . while submitting the form i am calling one api. I need to call one api for checking whether the email id exists and one for mobile number exists. I am not getting how to call api on input change. which is the best way to do it? Thanks in advance

Answer 1

As far as I understand, the best way is to use the verify-xhr attribute --> verify the fields on the server --> server responds with any errors in JSON format. https://www.ampproject.org/docs/reference/components/amp-form#verification

<form
  method="post"
  action-xhr="/form/verify-json/post"
  verify-xhr="/form/verify-json/post"
  target="_blank">
    <fieldset>
        <label>
            <span>Email</span>
            <input type="text" name="email" required>
        </label>
        <label>
            <span>Zip Code</span>
            <input type="tel" name="zip" required pattern="[0-9]{5}(-[0-9]{4})?">
        </label>
        <input type="submit" value="Submit">
    </fieldset>
    <div submit-success>
        <template type="amp-mustache">
            <p>Congratulations! You are registered with {{email}}</p>
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
                <p>{{message}}</p>
            {{/verifyErrors}}
            {{^verifyErrors}}
                <p>Something went wrong. Try again later?</p>
            {{/verifyErrors}}
        </template>
    </div>
</form>

Response from server can be like:

{
  "verifyErrors": [
    {"name": "email", "message": "That email is already taken."},
    {"name": "zip", "message": "The city and zip do not match."}
  ]
}