Hi Paul like I said in my previous post. I left the $_GET in check-email.php and it is working, while the form has POST
Hi Paul and Pullo i would like to come back to post #10
but where do I apply the actual insert into the database when the validation is ok?
I know I could use the action attribute, but what I was wondering is, if the validation is ok, If I can use another AJAX function to complete the registration like:
$.ajax({
type: "POST",
url: "modules/site/process_registration.php",
data: dataString,
cache: false,
beforeSend: function()
{
$("#send_status").html('<div class="sending">Please wait...</div><br "class="clear">');
},
success: function(response)
{
$("#send_status").html($(response).fadeIn(2000));
$("#reg_form").fadeOut(1000);
$("#name").val('');
$("#email").val('');
$etc.........
}
});
Yes you can - the validation documentation page (yay, documentation!) gives you good details about using the submitHandler method to override the default form submit event.
The example from there is:
$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
using the form plugin api, to achieve an easy ajaxSubmit technique.
Hi Paul and /or Pullo my knowledga about Javascript/jQuery and Ajax is realy subpar. I have been reading rtue the documantation Paul sent me but I cant figure out the right way to do tha actual insert after the validation is ok. So i tried the following (Note both the $(“#registratie_form”).validate({ and function submit_registratie_form(){ are short versions. the validate function is working fine)
$(document).ready(function($){
$("#registratie_form").validate({
rules: {
naam: "required",
},
messages: {
naam: "Naam is verplicht!",
}
});
function submit_registratie_form(){
var naam = $("#naam").val();
var dataString = 'naam='+ naam ;
$.ajax({
type: "POST",
url: "modules/site/process_registratie_form.php",
data: dataString,
cache: false,
success: function(response) {
$("#send_status").html($(response).fadeIn(2000));
$("#registratie_form").fadeOut(1000);
$("#naam").val('');
}
});
}
});
So I added the function submit_registratie_form() under the validate function. I call the function with the button in the form:
<input name="submit" type="submit" value="Registreer nu!" class="regbutton" onClick="submit_registratie_form();">
Above the form I have a div#send_status and the id from the form is registratie_form. What should happen is that if the validation is ok the form is submited and the insert takes place in modules/site/process_registratie_form.php the form should fade out and div#send_status should fade in with a thank you message. But as you probably understand this is not working.
How should I deal with this? Thank you ina advance
Can someone please tell me what I am doing wrong here?
Get rid of the inline onclick attribute - for that interferes with how the validate code works.
Get the form plugin api, which lets you submit the form by ajax with the following simple command:
$("#registratie_form").ajaxForm(function () {
// success
});
Then use the validate submitHandler to connect everything together:
$("#registratie_form").validate({
rules: {
...
},
messages: {
...
},
submitHandler: {
...
}
});
That’s it - nice and simple.
How it might look in full could be something like this:
$("#registratie_form").validate({
rules: {
naam: "required",
},
messages: {
naam: "Naam is verplicht!",
},
submitHandler: {
$("#registratie_form").ajaxForm(function (response) {
$("#send_status").html($(response).fadeIn(2000));
$("#registratie_form").fadeOut(1000);
$("#naam").val('');
});
}
});
HI Paul. I have done exactly what you’ve said :
$("#registratie_form").validate({
rules: {
naam: "required",
profiel: "required",
jaar: "required",
woonplaats: "required",
geslacht: "required",
provincie: "required",
geaardheid: "required",
email: {
required: true,
email: true,
remote: "modules/site/check-email.php"
},
wachtwoord: {
required: true,
minlength: 5
},
herhaal_wachtwoord: {
required: true,
minlength: 5,
equalTo: "#wachtwoord"
},
},
messages: {
naam: "Naam is verplicht!",
profiel: "Profiel naam is verplicht!",
jaar: "Geboorte datum is verplicht!",
woonplaats: "Woonplaats is verplicht!",
geslacht: "Geslacht is verplicht!",
geaardheid: "Geaardheid is verplicht!",
provincie: "Provincie is verplicht!",
email: {
required: "Email adres is verplicht!",
email: "Ongeldig email adres!",
remote: jQuery.validator.format("{0} is al in gebruik!")
},
wachtwoord: {
required: "Wachtwoord is verplicht!",
minlength: "Dient minimaal 5 tekens te bevatten!"
},
herhaal_wachtwoord: {
required: "Herhaal het wachtwoord!",
minlength: "Dient minimaal 5 tekens te bevatten!",
equalTo: "Wachtwoorden komen niet overeen!"
},
},
submitHandler: {
$("#registratie_form").ajaxForm(function (response) {
$("#send_status").html($(response).fadeIn(2000));
$("#registratie_form").fadeOut(1000);
$("#naam").val('');
});
}
});
But I get an error marking this line:
$("#registratie_form").ajaxForm(function (response) {
What does the error say?
Where are you seeing it?
Do you have the form plugin api obtained from http://www.malsup.com/jquery/form/#ajaxForm by downloading and using the script from http://malsup.github.com/min/jquery.form.min.js ?
Hi Pullo. I see it in Dreamweaver. as soon as I insert the function
$("#registratie_form").ajaxForm(function (response) {
});
it marks the line where the function start red and the message on the top read ther is a syntax error on line 80.
After that I tried it the following way:
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "modules/site/process_contact_form.php",
data: $(form).serialize()
});
return false;
}
That doesn’t give me an error but the form is not submited either. This is driving me crazy 
The code you posted is fine.
The error is probably elsewhere.
Try viewing your page in the browser’s console, or running your JS through JSHint for more helpful error messages.
Oh of course - the danger of writing scripting code without checking it rears its ugly head.
That submitHandler should be a function:
submitHandler: function () {
...
}
My apologies for the confusion.
@ Paul. Yes i did
@ Pullo
Just tried JSHint it states
There is only one function in this file.
It takes one argument.
This function contains 2 statements.
Cyclomatic complexity number for this function is 1.
and
Three undefined variables
12 $
60 $
63 $
and this is the data on these three lines:
12 $(“#registratie_form”).validate({
60 $.ajax({
63 data: $(form).serialize()
Hi Paul. Now I don’t het the error :). Last question though. Can I add the Ajax call i.e.
$.ajax({
type: "POST",
url: "modules/site/process_contact_form.php",
data: $(form).serialize()
});
return false;
within the $(“#registratie_form”).ajaxForm(function (response) {
});
Hi Paul.
The form is not submitting . To test the functions I made a test page with just one field which you can find here
And this is the HTML:
<div id="wrapper">
<form action="" method="post" name="registratie_form" id="registratie_form">
<input name="naam" type="text" size="20"><br><br>
<input name="submit" type="submit" value="submit">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript">
$("#registratie_form").validate({
rules: {
naam: "required"
},
messages: {
naam: "Naam is verplicht!"
},
submitHandler: function () {
$("#registratie_form").ajaxForm(function () {
var naam = $("#naam").val();
var dataString = 'naam='+ naam;
$.ajax({
type: "POST",
url: "success.html",
data: dataString,
cache: false,
success: function(response) {
$("#send_status").html($(response).fadeIn(2000));
$("#form_content").fadeOut(1000);
$("#naam").val('');
}
});
});
}
});
</script>
What is wrong with this
AjaxForm is sending the ajax submission. The function inside it is the success function that occurs when a response from the server is returned.
Inside of that function you are performing a second ajax submission, which is a bad idea.
What is wrong? Remove one of the ajax submissions, ideally the second one, and put a proper action attribute on your form posting it to success.html