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...@gmail.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...@gmail.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...@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
>
> ...
>
> read more »
