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...@gmail.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...@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"
> > > > > }
>
> > > > > });
>
> > > > > });
