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