How can i redirect user to registration page when he failed to enter correct email (ID) in AMP form?

Question

Please kindly advise if there is walk-around to redirect to new page when amp-form validation returns error? i.e. user has limited attempts to log-in by populating his e-mail and then when this limit exceeds, client-side AMP-form fires redirect to registration page?

Thanks in advance. V.

Answer 1

After some research I found a relatively good solution to this problem. First of all, I describe the task specifics, for a complete understanding of the process of its solution: There is a form for users authentication on my website. It requires correct login (obviously users email) so each time user enter his emeil, verify-xhr request is being sent to server, and this happens without submitting the form, as it is in amp-form instructions. Verification endpoint processing verification request and return result, which we can use for form validation messages if any error occurs. According to documentation, there is no any conditional logick implemented in AMP-form which may help to limit such requests and make redirect. That means that there will be users who will pick up a forgotten login day's and night's, and this is not correct. In order to save the nerves of such users, they must be limited in the number of attempts, and as an alternative solution, simply invite them to register again.

In the following scenario, user enters 4 times wrong email, and as a result, it is redirected to the registration page (please note, I use Handlebars as a view engine):

{{!-- verify-xhr server response, in addition to standard verifyError object,--}}
{{!-- contains with 'attempt' value which is a number of verification attempts made --}}
{{!-- during this session.  --}}

{{!-- This number is used to determine 'sclerosis' state (true || false). 'sclerosis' --}} 
{{!-- state is responsible for responsible for changing the visibility between  --}} 
{{!-- inputs: '#verification-username' & '#verification-username-fraud'.  --}} 

   
<form method="post" name="testFormName" id="testForm" action-xhr="/test/submit" target="_top" verify-xhr="/test/verify"
    on="verify-error:AMP.setState({sclerosis: event.response[0].attempt >= 3 ? false : true})"
    custom-validation-reporting="as-you-go">
    <fieldset>
        <label>
{{!-- For the sake of simplicity only login input is used for this setup --}}
{{!-- input 'change' event used to set 'lastEntry' with input value  --}}

        <input name="email" id="verification-username" type="email" placeholder="Enter 
               email" required
               on="change:AMP.setState({lastEntry: event.value})" [hidden]=!sclerosis>
        
{{!-- input value from amp-state 'lastEntry'  --}}
        <input name="email" id="verification-username-fraud" [value]="lastEntry" 
               type="email" hidden
               [hidden]=sclerosis placeholder="Enter email"
{{!-- lastly navigate to registration page  --}}
               on="change:AMP.navigateTo(url='https://biletalu.local:80/user/reg')" 
               required>
        </label>
        <span visible-when-invalid="typeMismatch" validation-for="verification-username">incorrect email format</span>
        <input type="submit" value="Войти" id="subscribe">
    </fieldset>
    <div verify-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
            {{message}}{{attempts}}
            {{/verifyErrors}}
            {{^verifyErrors}}
            <p>Something went wrong. Try again later?</p>
            <div class="customError">
                \{{#verifyErrors}}
                \{{message}} \{{attempt}}
                \{{/verifyErrors}}
                <br>
                
                Wrong address used, feel free to proceed with new  <a href="/user/reg"> 
                registration </a>
            </div>
            {{/verifyErrors}}
        </template>
    </div>
</form>

This solution has one drawback, in my opinion. In the event that the user enters the correct email for the fourth time, he will still be redirected to the registration page. In all other cases, this construction works correctly.