Hey Guys!
Im a little stuck with a problem you hopefully will solve:
Im currently creating a form which is livevalidated by the
livevalidation library (http://www.livevalidation.com/) and submitted
by the jquery ajax function. Separately they work great for me. But
when I combine both of them, I dont get it to work. Probably because
they dont like if the other one binds form objects.
By now, there is no page reload and the form is not submitted when I
press the submit button, as long as an invalid field exists. Thats
fine so far.
Here the problem:
As soon as every single field is valid and I press the submit button,
the page will reload (which I dont want due this should be ajax) and
nothing will happen. I dont recieve an email.
When I remove this code...
[code]
//Check if livevalidation has validated all fields.
if(returnValue == false){
return false; //do not continue if any field is invalid
}
[/code]
...the form will be submitted perfectly. Unfortunately even if invalid
fields exist (i.e. every field is left blank). Thats not what I want.
Here my form markup:
[code]
<html>
<head>
<title>Contact Form</title>
<link href="css/cform.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></
script>
<script src="js/livevalidation_standalone.js" type="text/
javascript"></script>
<script src="js/formsubmit.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h2>Web 2.0 Contact Form</h2>
<form id="myForm" action="" method="post">
<div class="label">Name</div>
<input id="name" name="name" size="20">
<script type="text/javascript">
var name = new LiveValidation('name');
name.add( Validate.Presence );
</script>
<div class="label">First name</div>
<input id="firstname" name="firstname">
<script type="text/javascript">
var firstname = new LiveValidation('firstname');
firstname.add( Validate.Presence );
</script>
<div class="label">Adress</div>
<input id="adress" name="adress">
<script type="text/javascript">
var adress = new LiveValidation('adress');
adress.add( Validate.Presence );
adress.add( Validate.Length, { minimum: 10 } );
</script>
<div class="label">Phone</div>
<input id="phone" name="phone">
<script type="text/javascript">
var phone = new LiveValidation('phone');
phone.add( Validate.Presence );
phone.add( Validate.Numericality, { onlyInteger:
true } );
</script>
<div class="label">Email</div>
<input id="email" name="email">
<script type="text/javascript">
var email = new LiveValidation('email');
email.add( Validate.Presence );
email.add( Validate.Email );
</script>
<div class="label">Message</div>
<textarea id="message" name="message" cols="25" rows="5"></
textarea>
<script type="text/javascript">
var message = new LiveValidation('message');
message.add( Validate.Presence );
</script>
<input id="submitBotton" value="send Form" type="submit"
name="submit" class="button">
</form>
</div>
</body>
</html>
[/code]
And here the formsubmit.js file where the problem seams to be:
[code]
$(function() {
$(".button").click(function() {
//Check if livevalidation has validated all fields.
if(returnValue == false){
return false; //do not continue if any field is invalid
}
var name = $("input#name").val();
var firstname = $("input#firstname").val();
var adress = $("input#adress").val();
var phone = $("input#phone").val();
var email = $("input#email").val();
var message = $("textarea#message").val();
var dataString = 'name='+ name + '&firstname='+ firstname +
'&adress='+ adress + '&phone='+ phone + '&email=' + email +
'&message=' + message + '&submit=send+Form';
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "php/cform.php",
data: dataString,
success: function() {
$('#container').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("We will be in touch soon.
")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='img/check.png' /