Jquery form validation and submission

I am trying to submit a form using jquery and ajax. I have been at this for the past 2 DAYS but i do not know why this isn't working. Basically, the issues are:

Get request sent instead of post

Form data not being validated

the form is reset after i press submit button.

for the 1st problem, I have tried using $.post() as well, but that doesn't work either. I tried using dataType:'text', which didn't work either. Also, as @AnilPanwar pointed out, i used #formdata instead of this , which didn't work either

I have no idea why the second problem exists. I have changed the structure of my code time and again, but data is not being validated. I have tested the functions separately and they work, however they do not work when the submit button is pressed, i.e the if condition that is supposed to send the post data returns false (goes to else), even when the tests inside the if condition are true individually

the 3rd problem, i suspect, is probably due to the first. I am not so sure though.

also, using console there are no js errors shown. A GET request is sent from the page when submit is clicked, with the field values in the URL.

Below are the links to snaps i took of the form

a snapshot of the console after submitting the form:

a snapshot of the requests after submitting the form:

As @ADyson pointed out, the data inputted into the form is not being stored. I moved the variable declarations inside the submit function to solve that. That does solve problem number 3. But now, i cannot get data into my script when i press the submit button for a second time. I have put the edited code into the question.

Your form is submitting (in the conventional way with a full refresh) before the ajax call can be made. That's why you're seeing a GET request. This happens because your button is input[type="submit"]. The default behaviour of this type of button is to submit the form it is within when clicked.

The solution:

First, move event.preventDefault(); right to the first line of your click event. This will stop the form submission from happening. Currently the prevention is happening too late in the process (and not at all when the form is invalid).

Second, as mentioned in the comments, replace $("#this").serializeArray(); with $("#formdata").serializeArray();. In the context of the click event, $(this) means the button that was clicked, not the whole form.

inside your click event. Otherwise the validation will probably fail, because currently these variables are being populated when the page loads, not when the user submits. If you then use these variables to check the validity of the data at submission, they don't take into account what the user has entered into the fields.

Lastly, remove event.unbind(); entirely. Unbind applies to elements, not to events. I don't think this command is actually doing anything bad necessarily, but it's better to remove redundant/incorrect code. See http://api.jquery.com/unbind/ for how to use this method.