@Leonard, unfortunately it's not due to the function argument.
@Dylan, I've looked at this tutorial a few times. It's not using the
official Jquery Validate system and hasn't been able to help me fill
in any gaps in my learning curve... It seems that every tutorial has
their own convoluted system to doing validation.. And the ones that do
use the standard validation system none of them thoroughly explain the
form submission part.
This is my current working Validation code + Submit function that does
not work properly. It post the page normally, like any HTML form
would.
$(document).ready(function(){
$("#contactForm").validate({
rules: {
fullname: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
company: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 2
},
},
messages: {
fullname: '<span class="error">Please enter your
<b>full name</b>.</
span>',
email: '<span class="error">Please enter a valid
<b>email address</
b>.</span>',
company: '<span class="error">Please enter your
<b>company</b>.</
span>',
phone: '<span class="error">Please enter your <b>phone
number</b>.</
span>'
},
submitHandler: function() {
form.submit();
}
});
});
// HTML FORM
<form id="contactForm" method="POST" action="process.php">
//Stuff goes here
</form>
// WORKING VALIDATION USING LIMITED VALIDATION SYSTEM
$(document).ready(function(){
$("#signupForm #submit").click(function(){
$(".error").hide();
var hasError = false;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var regarding_Val = $("#regarding").val();
var message_Val = $("#message").val();
var subcontact = $("#subcontact").val();
var fullname_Val = $("#fullname").val();
if(fullname_Val == '') {
$("#fullname").after('<span class="error">Please enter
your full
name.</span>');
hasError = true;
}
var company_Val = $("#company").val();
if(company_Val == '') {
$("#company").after('<span class="error">Please enter
your
company.</span>');
hasError = true;
}
var phone_Val = $("#phone").val();
if(phone_Val == '') {
$("#phone").after('<span class="error">Please enter a
phone
number.</span>');
hasError = true;
}
var email_Val = $("#email").val();
if(email_Val == '') {
$("#email").after('<span class="error">Please enter an
email
address.</span>');
hasError = true;
} else if(!emailReg.test(email_Val)) {
$("#email").after('<span class="error">Please enter a
valid email
address.</span>');
hasError = true;
}
if(hasError == false) {
$.post("process.php",
$("#signupForm").serialize(),
function(data){
$('#signupForm').clearForm();
if (data.success) {
$("#success").html(data.message);
}
},
"json"
);
}
return false;
});
});
On Oct 29, 6:22 am, Dylan <dylan.h...@gmail.com> wrote:
> Have a look at some of the ideas from this
> ...http://tutorialzine.com/2009/09/fancy-contact-form/
>
> On Oct 27, 8:16 pm,StephenJacob<turnstylecreat...@gmail.com> wrote:
>
> > Leonardo, I've been looking into the submitHandler option but i'm
> > having problems getting it to work correctly. Here is a sample of the
> > code i'm testing.
>
> > $("#signupForm").validate({
>
> > rules: {
> > fullname: "required",
> > company: "required",
> > phone: "required",
> > email: {
> > required: true,
> > email: true
> > }
> > },
> > messages: {
> > fullname: "Please enter your fullname",
> > company: "Please enter a company name",
> > phone: "Please enter a phone number",
> > email: "Please enter a valid email address"
> > },
> > submitHandler: function() {
> > form.submit();
> > }
>
> > });
>
> > <form class="cmxform" id="signupForm" method="POST"
> > action="process.php">
> > <div class="formline">
> > <label for="fullname">* Name:</label>
> > <input type="text" id="fullname" name="fullname"
> > class="textbox" />
> > </div>
> > <div class="formline">
> > <label for="company">* Company:</label>
> > <input type="text" name="company" id="company"
> > class="textbox" />
> > </div>
> > <div class="formline">
> > <label for="email">* Email:</label>
> > <input type="text" name="email" id="email" class="textbox" />
> > </div>
> > <div class="formline">
> > <label for="phone">* Phone:</label>
> > <input type="text" name="phone" id="phone" class="textbox" />
> > </div>
> > <div class="formline">
> > <label for="message">Message:</label>
> > <textarea name="message" id="message" class="messagebox"></
> > textarea>
> > </div>
> > <div class="formline">
> > <label for="button"></label>
> > <input type="submit" value="Submit" alt="Send Message" />
> > <input type="hidden" name="subcontact" value="1" />
> > </div>
> > </form>
>
> > On Oct 27, 1:42 pm, Leonardo K <leo...@gmail.com> wrote:
>
> > > Look the submitHandler option:
>
> > >http://docs.jquery.com/Plugins/Validation/validate#toptions
>
> > > On Tue, Oct 27, 2009 at
> > > 15:02,StephenJacob<turnstylecreat...@gmail.com>wrote:
>
> > > > I'm trying to create a contact form using Jquery Validation and Ajax
> > > > Submit. I'm having a problem figuring out the best way to submit the
> > > > results to a php file. Below is a break down of my validation code.
>
> > > > $().ready(function(){
>
> > > > $("#signupForm").validate({
>
> > > > rules: {
> > > > fullname: "required",
> > > > company: "required",
> > > > phone: "required",
> > > > email: {
> > > > required: true,
> > > > email: true
> > > > }
> > > > },
> > > > messages: {
> > > > fullname: "Please enter your fullname",
> > > > company: "Please enter a company name",
> > > > phone: "Please enter a phone number",
> > > > email: "Please enter a valid email address"
> > > > }
>
> > > > });
>
> > > > });
