Submitting after Validation

Thanks for the insight Jules! With that it pushed me in the direction
that I finally got working.

1 issue remaining that isn't that big of a deal but i would love to
resolve it.

After submitting the form it opens a div #success and closes it after
3 seconds. If i submit the form again, without refreshing the page,
it doesn't show this success message. Any idea why it's not triggering
the success message again?

$(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) {

$('#contactForm').ajaxSubmit({
resetForm: true,
target: '#success',
success: function() {
$("#success").fadeIn("slow");
var clearSuccess = function() { $('#success').fadeOut('slow',
function() { $("#success").remove(); }); };
window.setTimeout(clearSuccess,3000);
}

});
}
});
});




On Nov 4, 5:03*pm, Jules <jwira... (AT) gmail (DOT) com> wrote:

Hi Stephen,

Try using input type="button" instead of "submit" as per my example
below. *Excuse the aspx .

register.aspx code.

* * * * string usrName = Request["userName"];
* * * * Response.Clear();
* * * * Response.Write("Hello " + usrName);
* * * * Response.End();

-- client side code and html

* * <script type="text/javascript"
* * * * $(document).ready(function() {
* * * * * * $("form").validate();
* * * * * * $("#userName").rules("add",
* * * * * * {
* * * * * * * * required: true,
* * * * * * * * messages: { required: "User Name is required." }
* * * * * * });

* * * * * * $("#submitForm").click(function() {

* * * * * * if ($("form").valid()) {
* * * * * * * * $.post("register.aspx", $("form").serialize(), function
(data, status) { $("#message").text(data) }, "text")
* * * * * * * * }
* * * * * * });
* * * * });

* * </script

body
div id="message"></div
form id="dataForm"
table
tr
td><label>User Name:</label></td
td><input type="text" id="userName" name="userName" value=""/></td
/tr
tr
td colspan="2"><input type="button" id="submitForm" name="submitForm"
value="Submit" /></td
/tr
/table
/form
/body

--- end of client side code and html

On Nov 5, 7:41*am, StephenJacob <turnstylecreat... (AT) gmail (DOT) com> wrote:

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

...

read more »

I'm learning!

I replaced:

$("#success").fadeIn("slow");
var clearSuccess = function() { $('#success').fadeOut('slow', function
() { $("#success").remove(); }); };
window.setTimeout(clearSuccess,3000);

With:

$("#success").fadeIn('slow').fadeTo(5000, 1).fadeOut('slow');


Viola!

On Nov 5, 3:46*pm, StephenJacob <turnstylecreat... (AT) gmail (DOT) com> wrote:

Thanks for the insight Jules! With that it pushed me in the direction
that I finally got working.

1 issue remaining that isn't that big of a deal but i would love to
resolve it.

After submitting the form it opens a div #success and closes it after
3 seconds. *If i submit the form again, without refreshing the page,
it doesn't show this success message. Any idea why it's not triggering
the success message again?

$(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) {

* * * * * * * * * * * * * * * * $('#contactForm').ajaxSubmit({
* * * * * * * * * * * * * * * * * * * * resetForm: true,
* * * * * * * * * * * * * * * * * * * * target: '#success',
* * * * * * * * * * * * * * * * * * * * success: function() {
* * * * * * * * * * * * * * * * * * * * * * * * $("#success").fadeIn("slow");
* * * * * * * * * * * * * * * * * * * * * * * * var clearSuccess = function() { $('#success').fadeOut('slow',
function() { $("#success").remove(); }); };
* * * * * * * * * * * * * * * * * * * * * * * * window.setTimeout(clearSuccess,3000);
* * * * * * * * * * * * * * * * * * * * }

* * * * * * * * * * * * * * * * });
* * * * * * * * * * * * }
* * * * * * * * });

});

On Nov 4, 5:03*pm, Jules <jwira... (AT) gmail (DOT) com> wrote:

Hi Stephen,

Try using input type="button" instead of "submit" as per my example
below. *Excuse the aspx .

register.aspx code.

* * * * string usrName = Request["userName"];
* * * * Response.Clear();
* * * * Response.Write("Hello " + usrName);
* * * * Response.End();

-- client side code and html

* * <script type="text/javascript"
* * * * $(document).ready(function() {
* * * * * * $("form").validate();
* * * * * * $("#userName").rules("add",
* * * * * * {
* * * * * * * * required: true,
* * * * * * * * messages: { required: "User Name is required." }
* * * * * * });

* * * * * * $("#submitForm").click(function() {

* * * * * * if ($("form").valid()) {
* * * * * * * * $.post("register.aspx", $("form").serialize(), function
(data, status) { $("#message").text(data) }, "text")
* * * * * * * * }
* * * * * * });
* * * * });

* * </script

body
div id="message"></div
form id="dataForm"
table
tr
td><label>User Name:</label></td
td><input type="text" id="userName" name="userName" value=""/></td
/tr
tr
td colspan="2"><input type="button" id="submitForm" name="submitForm"
value="Submit" /></td
/tr
/table
/form
/body

--- end of client side code and html

On Nov 5, 7:41*am, StephenJacob <turnstylecreat... (AT) gmail (DOT) com> wrote:

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

...

read more »