Name, email ,checkbox and payment option i.e credit card no. ,cvv and zip code are mandatory fields to be filled before submitting.I have added scroll to top method along with showing the error message.But when I select credit card and fill all options accept the cvv field and submit the form it does not show the error message at the top instead the the form gets refreshed.
Similarly, when I select payment option bitcoin or Paypal and fill all details and do not select an event i.e (clicking the checkbox) and submit the form.It gets refresh.
The codepen link is given below:
The form refreshes because the jQuery code fails at some point. Have you seen the console for errors?
If you wanted to apply the scroll top then you can see this jQuery ScrollTop article. Scroll top feature will not cause problem with your validation.
I saw your form on codepen, i have corrected some css styles which were breaking when filling the form.
Add attribute “required” to all of your input fields. This is how its handled that “you didn’t enter you <name_of_the _field”> thing. Thus being said, on server-side should be decided how is something being filtered(those regex) not on client-side. Also you don’t need method=“post”(or get) in the form since you’re handling this with jquery ajax.