after login error page redirect
Hi,
I am making Shopify login and signup popup/Modal its working fine but if there is and error in password or email it redirect me to login page instead of showing error on my popup/Modal
Here is the Code:
<div class="Custom_login_box">
<a class="btn" href="#login">Log in</a>
</div>
<div id="login" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="popup_conent">
<div class="row">
<div class="col-md-6"
style=" background: url('https://cdn.shopify.com/s/files/1/0560/8344/7897/files/popup_image.png?v=1669030826'); background-size: cover; background-position: center; ">
<div class="inner_col">
<img src="https://cdn.shopify.com/s/files/1/0560/8344/7897/files/Group_9988.png?v=1648008725" alt="" class="img-fluid">
<h4>Buy directly from the one of America's trusted designers</h4>
</div>
</div>
<div class="col-md-6">
<div class="forms">
<div class="login_form show">
<h3 class="form_title">Sign In</h3>
{%- form 'customer_login', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<h2 class="form__message" tabindex="-1" autofocus>
<span class="visually-hidden">{{ 'accessibility.error' | t }} </span>
<svg aria-hidden="true" focusable="false" role="presentation" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2" />
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B"
stroke-width="0.7" />
<path
d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z"
fill="white" />
<path
d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z"
fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
{{ form.errors | default_errors }}
{%- endif -%}
<div class="field">
<input type="email" name="customer[email]" id="CustomerEmail" autocomplete="email"
autocorrect="off" autocapitalize="off" {% if form.errors contains 'form' %}
aria-invalid="true" {% endif %} placeholder="{{ 'customer.login_page.email' | t }}">
<label for="CustomerEmail">
{{ 'customer.login_page.email' | t }}
</label>
</div>
{%- if form.password_needed -%}
<div class="field">
<div class="show_eye">
<input type="password" value="" name="customer[password]" id="CustomerPassword"
autocomplete="current-password" {% if form.errors contains 'form' %}
aria-invalid="true" {% endif %}
placeholder="{{ 'customer.login_page.password' | t }}">
<span class="eye">
<span class="open_eye active">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 3L21 21" stroke="#303030" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5825 10.5869C9.80102 11.3678 9.80057 12.6344 10.5815 13.4159C11.3624 14.1974 12.629 14.1978 13.4105 13.4169" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.08797 4.40357C8.55698 4.55546 8.24967 5.10905 8.40157 5.64004C8.55346 6.17102 9.10705 6.47833 9.63803 6.32644L9.08797 4.40357ZM12 5L11.9965 6H12V5ZM22 12L22.8682 12.4963C23.0439 12.1888 23.0439 11.8113 22.8682 11.5038L22 12ZM18.7626 14.8092C18.3878 15.2148 18.4127 15.8475 18.8182 16.2224C19.2238 16.5972 19.8565 16.5723 20.2314 16.1668L18.7626 14.8092ZM17.9162 18.1781C18.374 17.8693 18.4949 17.2477 18.1861 16.7899C17.8773 16.332 17.2557 16.2111 16.7979 16.5199L17.9162 18.1781ZM2 12L1.13182 11.5037C0.956079 11.8112 0.956057 12.1887 1.13177 12.4962L2 12ZM7.19335 7.48658C7.65041 7.17656 7.7696 6.55471 7.45958 6.09765C7.14956 5.64059 6.52771 5.5214 6.07065 5.83142L7.19335 7.48658ZM9.63803 6.32644C10.4049 6.10707 11.1989 5.99717 11.9965 6L12.0035 4.00001C11.0175 3.99652 10.036 4.13238 9.08797 4.40357L9.63803 6.32644ZM12 6C15.52 6 18.5732 8.01891 21.1318 12.4962L22.8682 11.5038C20.0928 6.6471 16.48 4 12 4V6ZM21.1318 11.5037C20.3842 12.8116 19.5933 13.9105 18.7626 14.8092L20.2314 16.1668C21.1827 15.1375 22.0598 13.9104 22.8682 12.4963L21.1318 11.5037ZM16.7979 16.5199C15.3292 17.5104 13.7394 18 12 18V20C14.1446 20 16.1228 19.3876 17.9162 18.1781L16.7979 16.5199ZM12 18C8.48001 18 5.4268 15.9811 2.86823 11.5038L1.13177 12.4962C3.9072 17.3529 7.51999 20 12 20V18ZM2.86818 12.4963C4.18518 10.1922 5.63485 8.54371 7.19335 7.48658L6.07065 5.83142C4.19115 7.10629 2.55282 9.01779 1.13182 11.5037L2.86818 12.4963Z" fill="black"/>
</svg>
</span>
<span class="close_eye">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M10.5825 10.5869C9.80102 11.3678 9.80057 12.6344 10.5815 13.4159C11.3624 14.1974 12.629 14.1978 13.4105 13.4169" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.08797 4.40362C8.55698 4.55552 8.24967 5.10911 8.40157 5.64009C8.55346 6.17108 9.10705 6.47839 9.63803 6.32649L9.08797 4.40362ZM12 5.00006L11.9965 6.00006H12V5.00006ZM22 12.0001L22.8682 12.4963C23.0439 12.1889 23.0439 11.8114 22.8682 11.5039L22 12.0001ZM18.7626 14.8093C18.3878 15.2149 18.4127 15.8476 18.8182 16.2224C19.2238 16.5973 19.8565 16.5724 20.2314 16.1668L18.7626 14.8093ZM17.9162 18.1781C18.374 17.8693 18.4949 17.2478 18.1861 16.7899C17.8773 16.332 17.2557 16.2112 16.7979 16.52L17.9162 18.1781ZM2 12.0001L1.13182 11.5038C0.956079 11.8113 0.956057 12.1887 1.13177 12.4962L2 12.0001ZM7.19335 7.48664C7.65041 7.17661 7.7696 6.55477 7.45958 6.09771C7.14956 5.64065 6.52771 5.52146 6.07065 5.83148L7.19335 7.48664ZM9.63803 6.32649C10.4049 6.10713 11.1989 5.99723 11.9965 6.00005L12.0035 4.00007C11.0175 3.99657 10.036 4.13244 9.08797 4.40362L9.63803 6.32649ZM12 6.00006C15.52 6.00006 18.5732 8.01897 21.1318 12.4962L22.8682 11.5039C20.0928 6.64715 16.48 4.00006 12 4.00006V6.00006ZM21.1318 11.5038C20.3842 12.8117 19.5933 13.9106 18.7626 14.8093L20.2314 16.1668C21.1827 15.1375 22.0598 13.9105 22.8682 12.4963L21.1318 11.5038ZM16.7979 16.52C15.3292 17.5105 13.7394 18.0001 12 18.0001V20.0001C14.1446 20.0001 16.1228 19.3876 17.9162 18.1781L16.7979 16.52ZM12 18.0001C8.48001 18.0001 5.4268 15.9812 2.86823 11.5039L1.13177 12.4962C3.9072 17.353 7.51999 20.0001 12 20.0001V18.0001ZM2.86818 12.4963C4.18518 10.1923 5.63485 8.54377 7.19335 7.48664L6.07065 5.83148C4.19115 7.10635 2.55282 9.01784 1.13182 11.5038L2.86818 12.4963Z" fill="black"/>
</svg>
</span>
</span>
</div>
<label for="CustomerPassword">
{{ 'customer.login_page.password' | t }}
</label>
</div>
<a href="account/login/#recover">
{{ 'customer.login_page.forgot_password' | t }}
</a>
{%- endif -%}
<button>
{{ 'customer.login_page.sign_in' | t }}
</button>
<p id="signup_modal">
{{ 'customer.login_page.create_account' | t }}
</p>
{%- endform -%}
</div>
<div class="register_form">
<h3 class="form_title">Sign Up</h3>
{%- form 'create_customer', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<h2 class="form__message" tabindex="-1" autofocus>
<svg aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-error" />
</svg>
{{ 'templates.contact.form.error_heading' | t }}
</h2>
<ul>
{%- for field in form.errors -%}
<li>
{%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
<a href="#RegisterForm-{{ field }}">
{{ form.errors.translated_fields[field] | capitalize }}
{{ form.errors.messages[field] }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<div class="singUp_name">
<div class="field">
<input type="text" name="customer[first_name]" id="RegisterForm-FirstName"
{% if form.first_name %}value="{{ form.first_name }}" {% endif %}
autocomplete="given-name" placeholder="{{ 'customer.register.first_name' | t }}">
<label for="RegisterForm-FirstName">
{{ 'customer.register.first_name' | t }}
</label>
</div>
<div class="field">
<input type="text" name="customer[last_name]" id="RegisterForm-LastName"
{% if form.last_name %}value="{{ form.last_name }}" {% endif %}
autocomplete="family-name" placeholder="{{ 'customer.register.last_name' | t }}">
<label for="RegisterForm-LastName">
{{ 'customer.register.last_name' | t }}
</label>
</div>
</div>
<div class="field">
<input type="email" name="customer[email]" id="RegisterForm-email" {% if form.email %}
value="{{ form.email }}" {% endif %} spellcheck="false" autocapitalize="off"
autocomplete="email" aria-required="true" {% if form.errors contains 'email' %}
aria-invalid="true" aria-describedby="RegisterForm-email-error" {% endif %}
placeholder="{{ 'customer.register.email' | t }}">
<label for="RegisterForm-email">
{{ 'customer.register.email' | t }}
</label>
</div>
{%- if form.errors contains 'email' -%}
<span id="RegisterForm-email-error" class="form__message">
<svg aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-error" />
</svg>
{{ form.errors.translated_fields['email'] | capitalize }}
{{ form.errors.messages['email'] }}.
</span>
{%- endif -%}
<div class="field">
<div class="show_eye">
<input type="password" name="customer[password]" id="RegisterForm-password"
aria-required="true" {% if form.errors contains 'password' %} aria-invalid="true"
aria-describedby="RegisterForm-password-error" {% endif %}
placeholder="{{ 'customer.register.password' | t }}">
<span class="eye">
<span class="open_eye active">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 3L21 21" stroke="#303030" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5825 10.5869C9.80102 11.3678 9.80057 12.6344 10.5815 13.4159C11.3624 14.1974 12.629 14.1978 13.4105 13.4169" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.08797 4.40357C8.55698 4.55546 8.24967 5.10905 8.40157 5.64004C8.55346 6.17102 9.10705 6.47833 9.63803 6.32644L9.08797 4.40357ZM12 5L11.9965 6H12V5ZM22 12L22.8682 12.4963C23.0439 12.1888 23.0439 11.8113 22.8682 11.5038L22 12ZM18.7626 14.8092C18.3878 15.2148 18.4127 15.8475 18.8182 16.2224C19.2238 16.5972 19.8565 16.5723 20.2314 16.1668L18.7626 14.8092ZM17.9162 18.1781C18.374 17.8693 18.4949 17.2477 18.1861 16.7899C17.8773 16.332 17.2557 16.2111 16.7979 16.5199L17.9162 18.1781ZM2 12L1.13182 11.5037C0.956079 11.8112 0.956057 12.1887 1.13177 12.4962L2 12ZM7.19335 7.48658C7.65041 7.17656 7.7696 6.55471 7.45958 6.09765C7.14956 5.64059 6.52771 5.5214 6.07065 5.83142L7.19335 7.48658ZM9.63803 6.32644C10.4049 6.10707 11.1989 5.99717 11.9965 6L12.0035 4.00001C11.0175 3.99652 10.036 4.13238 9.08797 4.40357L9.63803 6.32644ZM12 6C15.52 6 18.5732 8.01891 21.1318 12.4962L22.8682 11.5038C20.0928 6.6471 16.48 4 12 4V6ZM21.1318 11.5037C20.3842 12.8116 19.5933 13.9105 18.7626 14.8092L20.2314 16.1668C21.1827 15.1375 22.0598 13.9104 22.8682 12.4963L21.1318 11.5037ZM16.7979 16.5199C15.3292 17.5104 13.7394 18 12 18V20C14.1446 20 16.1228 19.3876 17.9162 18.1781L16.7979 16.5199ZM12 18C8.48001 18 5.4268 15.9811 2.86823 11.5038L1.13177 12.4962C3.9072 17.3529 7.51999 20 12 20V18ZM2.86818 12.4963C4.18518 10.1922 5.63485 8.54371 7.19335 7.48658L6.07065 5.83142C4.19115 7.10629 2.55282 9.01779 1.13182 11.5037L2.86818 12.4963Z" fill="black"/>
</svg>
</span>
<span class="close_eye">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M10.5825 10.5869C9.80102 11.3678 9.80057 12.6344 10.5815 13.4159C11.3624 14.1974 12.629 14.1978 13.4105 13.4169" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.08797 4.40362C8.55698 4.55552 8.24967 5.10911 8.40157 5.64009C8.55346 6.17108 9.10705 6.47839 9.63803 6.32649L9.08797 4.40362ZM12 5.00006L11.9965 6.00006H12V5.00006ZM22 12.0001L22.8682 12.4963C23.0439 12.1889 23.0439 11.8114 22.8682 11.5039L22 12.0001ZM18.7626 14.8093C18.3878 15.2149 18.4127 15.8476 18.8182 16.2224C19.2238 16.5973 19.8565 16.5724 20.2314 16.1668L18.7626 14.8093ZM17.9162 18.1781C18.374 17.8693 18.4949 17.2478 18.1861 16.7899C17.8773 16.332 17.2557 16.2112 16.7979 16.52L17.9162 18.1781ZM2 12.0001L1.13182 11.5038C0.956079 11.8113 0.956057 12.1887 1.13177 12.4962L2 12.0001ZM7.19335 7.48664C7.65041 7.17661 7.7696 6.55477 7.45958 6.09771C7.14956 5.64065 6.52771 5.52146 6.07065 5.83148L7.19335 7.48664ZM9.63803 6.32649C10.4049 6.10713 11.1989 5.99723 11.9965 6.00005L12.0035 4.00007C11.0175 3.99657 10.036 4.13244 9.08797 4.40362L9.63803 6.32649ZM12 6.00006C15.52 6.00006 18.5732 8.01897 21.1318 12.4962L22.8682 11.5039C20.0928 6.64715 16.48 4.00006 12 4.00006V6.00006ZM21.1318 11.5038C20.3842 12.8117 19.5933 13.9106 18.7626 14.8093L20.2314 16.1668C21.1827 15.1375 22.0598 13.9105 22.8682 12.4963L21.1318 11.5038ZM16.7979 16.52C15.3292 17.5105 13.7394 18.0001 12 18.0001V20.0001C14.1446 20.0001 16.1228 19.3876 17.9162 18.1781L16.7979 16.52ZM12 18.0001C8.48001 18.0001 5.4268 15.9812 2.86823 11.5039L1.13177 12.4962C3.9072 17.353 7.51999 20.0001 12 20.0001V18.0001ZM2.86818 12.4963C4.18518 10.1923 5.63485 8.54377 7.19335 7.48664L6.07065 5.83148C4.19115 7.10635 2.55282 9.01784 1.13182 11.5038L2.86818 12.4963Z" fill="black"/>
</svg>
</span>
</span>
</div>
<label for="RegisterForm-password">
{{ 'customer.register.password' | t }}
</label>
</div>
{%- if form.errors contains 'password' -%}
<span id="RegisterForm-password-error" class="form__message">
<svg aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-error" />
</svg>
{{ form.errors.translated_fields['password'] | capitalize }}
{{ form.errors.messages['password'] }}.
</span>
{%- endif -%}
<button>
{{ 'customer.register.submit' | t }}
</button>
<p id="signin_modal">
Login to my account
</p>
{%- endform -%}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery('#signup_modal').click(function(){
jQuery('.login_form').removeClass('show');
jQuery('.register_form').addClass('show');
});
jQuery('#signin_modal').click(function(){
jQuery('.login_form').addClass('show');
jQuery('.register_form').removeClass('show');
});
jQuery('.show_eye .eye').click(function(){
text_state = jQuery('.show_eye>input').attr('type');
if(text_state == 'password'){
jQuery('.open_eye').removeClass('active');
jQuery('.close_eye').addClass('active');
jQuery('.show_eye>input').attr('type','text');
}
if(text_state == 'text'){
jQuery('.open_eye').addClass('active');
jQuery('.close_eye').removeClass('active');
jQuery('.show_eye>input').attr('type','password');
}
});
</script>
i want the error message after the field but it redirects my to this page
https://garrellassociates.com/account/login
and display error like that
Anyone can Help
Thanks In advance
Community Blog Articles
The 9 Questions You Need To Answer When Starting a B2B Store
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
Get ready for peak holiday selling season 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
Highlights | Top Contributors August '24
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024