 | |
Submitting after Validation
jQuery jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Submitting after Validation -
10-27-2009
, 01:02 PM
#2
| |||
| |||
|
|
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" } }); }); |
#3
| |||
| |||
|
|
Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02, StephenJacob <turnstylecreat... (AT) gmail (DOT) 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" * * * *} }); }); |
#4
| |||
| |||
|
|
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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02, StephenJacob <turnstylecreat... (AT) gmail (DOT) 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" } }); }); |
#5
| |||
| |||
|
|
form.submit() just submit in the normal way. To submit via ajax you could use this plugin:http://www.malsup.com/jquery/form/#apithen use: $(form).ajaxSubmit(); or you can do by yourself withouth any plugin via jQuery Post:http://docs..jquery.com/Ajax/jQuery.post On Tue, Oct 27, 2009 at 18:16, StephenJacob <turnstylecreat... (AT) gmail (DOT) 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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02, StephenJacob <turnstylecreat... (AT) gmail (DOT) 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" * * * *} }); }); |
#6
| |||
| |||
|
|
Thanks Leonardo, I've tried to implement AjaxSubmit and the Jquery.Post but have had no luck. The form keeps submitting the normal way no matter what I do. On Oct 28, 7:48 am, Leonardo K <leo... (AT) gmail (DOT) com> wrote: form.submit() just submit in the normal way. To submit via ajax you could use this plugin: http://www.malsup.com/jquery/form/#apithen use: $(form).ajaxSubmit(); or you can do by yourself withouth any plugin via jQuery Post: http://docs.jquery.com/Ajax/jQuery.post On Tue, Oct 27, 2009 at 18:16, StephenJacob <turnstylecreat... (AT) gmail (DOT) 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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02, StephenJacob turnstylecreat... (AT) gmail (DOT) 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" } }); }); |
#7
| |||
| |||
|
|
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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02, StephenJacob <turnstylecreat... (AT) gmail (DOT) 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" * * * *} }); }); |
#8
| |||
| |||
|
|
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... (AT) gmail (DOT) 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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02,StephenJacob<turnstylecreat... (AT) gmail (DOT) 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" * * * *} }); }); |
#9
| |||
| |||
|
|
@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... (AT) gmail (DOT) 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... (AT) gmail (DOT) 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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02,StephenJacob<turnstylecreat... (AT) gmail (DOT) 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" * * * *} }); }); |
#10
| |||
| |||
|
.|
Just to clarify, the $.post function works perfectly and returns my json results. Due to the limitations of the validation system i was using (no remote options) i had to begin using the standard jquery .validate library. Please help me understand how to implement the .Validate w/ my HTML form. As you can see the $.post option has the process.php written in the Jquery and leaves the HTML form action blank. *With the Jquery .Validate, I need to define the process.php as the Action correct? *If so, why does the form continue to submit normally? Thanks for all the help everyone! I think with a bit more guidance i'll have a really strong understanding of the validation system. On Nov 4, 3:33*pm, StephenJacob <turnstylecreat... (AT) gmail (DOT) com> wrote: @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... (AT) gmail (DOT) 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... (AT) gmail (DOT) 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... (AT) gmail (DOT) com> wrote: Look the submitHandler option: http://docs.jquery.com/Plugins/Validation/validate#toptions On Tue, Oct 27, 2009 at 15:02,StephenJacob<turnstylecreat... (AT) gmail (DOT) 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 * * * * * * * *} ... read more » |
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.