Jump to content

I'm about ready to commit suicide - please prevent!


PicnicTutorials

Recommended Posts

Here is my test page. http://tinyurl.com/yg9nw9a Press submit and you can see how it performs.

 

I have tried about a million things. I am simply trying to combine jquery validation plugin with ajax form submit. I have resigned myself to being happy with a simple javascript popup thank you message via an ajax submit. This is done in order to prevent the user from leaving the page on form submit.

 

I "think" I need to use a submitHandler in the validation JS and call the ajax submit. But I am unable to piece it together. This is the very last piece of the puzzle for me and this site. Once I get this backend stuff working it's all formatting (easy stuff).

 

The JS validation works perfect. When JS is off I'll just use my good old PHP script I have. Here is the page in it's entirety. Please help put me out of my misery. I'm definitely working above my pay-grade here.

 

edit-your-website.com

html, body {

overflow:hidden;

background:none;

}

#contactform {

float:left;

position:relative;

width:319px;

padding:0;

font-size:13px;

}

#contactform:hover, #contactform:focus {

background-position:0 -322px;

}

#contactform input {

margin:4px 0 15px;

border:0;

padding:13px;

height:17px; /* actual height = 43px */

width:293px; /* actual width = 244px */

background:url(img/input3.jpg) 100% 0 no-repeat;

}

* html #contactform input {

background-attachment:fixed;

}

#contactform input:hover, #contactform input:focus {

background-position:100% -43px;

outline:0;

}

#contactform textarea {

height:129px; /* actual height = 155px */

width:293px; /* actula width = 319px */

border:0;

background:none;

background:url(img/textarea.jpg) 0 0 no-repeat;

overflow:auto;

outline:0;

padding:13px;

resize:none;

}

#contactform textarea:hover, #contactform textarea:focus {

background-position:0 -155px;

}

#contactform input#captcha {

width:108px;

margin:13px 0 0; /* if JS is off this kicks in */

float:left;

background:url(img/captcha.jpg) 0 0 no-repeat;

}

#contactform input#captcha:hover {

background-position:0 -43px;

}

#contactform input#contact-login {

float:right;

width:134px;

height:43px;

cursor:pointer;

margin:13px 0 0;

background:url(img/captcha.jpg) no-repeat;

}

* html #contactform input#contact-login {

margin-left:-6px;

}

#contactform #contact-login:hover, #contactform #contact-login:focus {

background-position:0 -43px;

}

#contactform input.error {background-position:100% -86px;}

#contactform textarea.error {background-position:0 -310px;}

#contactform input#captcha.error {background-position:0 -86px;}

.required {color:red; font-weight:bold;}

$.validator.methods.equal = function(value, element, param) {

return value == param;

};

$(document).ready(function(){

$("#contactform").validate({

rules: {

name: "required",

email: {

required: true,

email: true

},

comments: {

required: true,

minlength: 5

},

captcha: {

equal: 4

}

},

messages: {

email: "",

name: "",

comments: "",

captcha: ""

}

});

});

function clearText(a){if(a.defaultValue==a.value){a.value=""}else{if(a.value==""){a.value=a.defaultValue}}};

 

 

 

 

 

 

Edited by Eric
Link to comment
Share on other sites

Sorry can't help. Tear your hair out and rip your clothes if you must, but please don't commit suicide no web site is worth that sacrifice...!!!

 

I guess I was being a little over dramatic. This is just driving me crazy! Usually (actually always) if I read and apply myself for this long Im able to put the pieces together. Although, with this, I just keep running into brick walls. Here is my simplified post of where I'm at now, and what I'm trying to accomplish. http://www.sitepoint.com/forums/showthread.php?t=645199 I'll try for a couple more days, and if I still can't do it I will just give up and do it the only way I know how (the less cool way).

 

You see, the problem I'm having is, there are a few good tuts around the web that show how to do an Ajax submit and fade out the form and replaceing it with a thank you message. But none of them provide any validation along with it. Well other than empty or not. And I do not posess the ability to add validation to it. I can't combine the two.

Edited by Eric
Link to comment
Share on other sites

and I just figured out how to fade the form out and replace it with a thank you message. I couldn't figure out all the JS ways to do it, so I somehow managed it with css (well a lttle js). When I'm all done with my nightmare site I will put it all in plain English. That is, if I can remember how I did it by that time.

 

The only thing left is to figure out how to write an addMethod for the validation rules. I need to prevent url's from being input into the textarea. I posted all the details here if anyone has a clue... http://stackoverflow.com/questions/1668093/help-adding-a-custom-addmethod-to-bassistance-de-validation-plugin

Edited by Eric
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...