0

My index page starts with login form, underneath the "Log in" button there's a sign up message for those who have not made the account yet. I made both registration and login form inside one div and used javascript to toggle between them when clicking anchor tag (either "Log in" or "Sign up"). I've made a login system already but Im having issues with registration and it's validation. Since both forms are on the same page and default one is login one there is a problem with validation because when you're trying to register a and you provide a username that's too short the page reloads and you're back to login form, then need to click "Sign up" again to toggle between the forms and there's the validation error. Is there anyway I can somehow stop the page from reloading or making it so the website remember that you were at registration form?

I hope I explained my issue good enough, english is not my native language...

I can provide any code needed.

Well I guess the other way to prevent that from happening would be swapping forms and making registration form the default one but is there an answer to my question?

Ekono
  • 15
  • 6
  • Duplicate question? https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser – nstanard Jan 21 '19 at 02:48
  • or this one... https://stackoverflow.com/questions/3527041/prevent-any-form-of-page-refresh-using-jquery-javascript – nstanard Jan 21 '19 at 02:49
  • Well, I might have made a mistake asking my question. I can't really use that js script because since it stops you from reloading then validation error won't occur and I want it to occur but after it reloads make it go back to registration instead of clicking anchor tag to toggle forms again. Hope that clears it out. Is this even possible? – Ekono Jan 21 '19 at 02:56
  • I'm a bit more confused now actually. You need to provide example code and more details for people to help Sorry. – nstanard Jan 21 '19 at 02:58
  • https://codepen.io/anon/pen/QYLNwY This is the code for the forms, as you can see they are both on the same page - main page. Clicking "sign in" tag doesn't reload the page, just animates/toggles to the other form. Because of that when you submit a registration form and it doesn't go correctly through validation process it reloads the page and the login form is default so you need to click the tag again in order to go back and try to register again. – Ekono Jan 21 '19 at 03:02
  • Basically I want the website to remember that you've failed to register and when it reloads it would show the register form again instead of default one - login form. – Ekono Jan 21 '19 at 03:08
  • Post what you have tried so we can help you. – Jonny Jan 21 '19 at 03:53

1 Answers1

1

I would use a query string on the url. https://codepen.io/adrianparr/pen/XJEbQW

You might have to add it to the url when they click sign up. Then on page load you can check if the query string is there and animate to the registration form instead of the login form. I'd use a query string like.... ?signup=true

So,

  1. User clicks sign-up -> animate form and add to url
  2. The page reloads for some reason...
  3. Check on page load for query string value of "signup=true" or just "signup" and animate to the sign up form.

Note: So really your goal is to check for a value on pageload, or you could even use a hashtag, cookies, or local storage technically. The point is that on click you are setting a value somewhere, and on pageload you are checking for that value. And of course, after the user finished what you want them to you need to clear the value.

nstanard
  • 593
  • 3
  • 12