Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Jquery form validation seems to be preventing form submission

    I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is.

    Here is the code.

    Code:
    // BEGIN JAVASCRIPT
    $(function(){
    	
        //original field values
        var field_values = {
                //id  :  value
                'name'  :  'your name',
                'email'  :  'your email',
    			'yourmessage'  :  'I would like to inquire about'
        };
    
        //inputfocus
        $('input#name').inputfocus({ value: field_values['name'] });
        $('input#email').inputfocus({ value: field_values['email'] });
    	$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });
    
        //form validation
        $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
        $('#submit').click(function(){
            //remove classes
            $('#sendamessage input').removeClass('error').removeClass('valid');
    
            //ckeck if inputs aren't empty
            var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
            var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
            var error = 0;
            fields1.each(function(){
                var value = $(this).val();
                if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                    $(this).addClass('error'); // css class
                    $(this).effect("shake", { times:3 }, 50);
    
                    error++;
                } else {
                    $(this).addClass('valid'); // css class
                }
            });     
            
            if(!error) {
            	// this is where I get confused. How do I make this send the form?
            	alert('Data sent');
        		});
            } 						
        }); 	
    });
    // END JAVASCRIPT
    
    
            <form method="post" action="" onsubmit="return validateForm()" >
    			<input type="hidden" name="ccf_customhtml" value="1" />
    			<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
    			<input type="hidden" name="destination_email" value="[email protected]" />
                <input type="hidden" name="required_fields" value="" />
    
                	<label for="name">Name</label>
                		<input type="text" name="name" id="name" value="your name" /> 
                
                	<label for="email">Email</label>
                		<input type="text" name="email" id="email" value="your email" /> 
                
                	<label for="yourmessage">Your Message</label>
                		<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>
    
                		<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
            </form>
    I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent.

    Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page.

    Cheers!
    -Dave

  2. #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
     $('form').submit(function validateForm(){ return false });
    this will make your submit function always return false, so the form will never submit or email. Also your basically creating a function here named validateForm, that does absolutely nothing other than return false. your submit.click code should actually be in the validateForm function and should return false if error is greater than 0 and return true if not.

    also using the click function this way also means if the user hits enter instead of clicking on the submit button it will always return false.
    Last edited by DanInMa; May 13th, 2011 at 10:30 PM.

  3. #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    didnt have time to test it, but your looking for something more like this:
    also fair warning, this code will apply itself to ANY form on the page, your best served giving the form an ID and using $('#myformid').submit etc...

    Code:
        
        $('form').submit(function(){
            //remove classes
            $('#sendamessage input').removeClass('error').removeClass('valid');
    
            //ckeck if inputs aren't empty
            var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
            var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
            var error = 0;
            fields1.each(function(){
                var formvalue = $(this).val();
                if( formvalue.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                    $(this).addClass('error'); // css class
                    $(this).effect("shake", { times:3 }, 50);
    
                    error++;
                } else {
                    $(this).addClass('valid'); // css class
                }
            });     
            
            if(error <= 0) {
            	
            	alert('Data sent');
            	return true
        		}
        	else{
        	return false
        	alert("check your answers etc...")
        	}	
        		});
    Last edited by DanInMa; May 13th, 2011 at 10:44 PM.

  4. Users who have thanked DanInMa for this post:

    dauidus (May 13th, 2011)

  5. #4
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    didnt have time to test it, but your looking for something more like this:
    also fair warning, this code will apply itself to ANY form on the page, your best served giving the form an ID and using $('#myformid').submit etc...

    Code:
        
        $('form').submit(function(){
            //remove classes
            $('#sendamessage input').removeClass('error').removeClass('valid');
    
            //ckeck if inputs aren't empty
            var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
            var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
            var error = 0;
            fields1.each(function(){
                var formvalue = $(this).val();
                if( formvalue.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                    $(this).addClass('error'); // css class
                    $(this).effect("shake", { times:3 }, 50);
    
                    error++;
                } else {
                    $(this).addClass('valid'); // css class
                }
            });     
            
            if(error <= 0) {
            	
            	alert('Data sent');
            	return true
        		}
        	else{
        	return false
        	alert("check your answers etc...")
        	}	
        		});

    Thank you for such a quick response. I tried this one, and it just sends the email without validating the form at all. This is different that what I was experiencing... before, the form wouldn't submit after validation. Now, it submits without it.

    Also, I would like to have the form validate itself without using an alert("check your answers etc...") like you suggested.

    Thanks for the help!

  6. #5
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Also, the form just submits without showing an alert if validation doesn't pass.

  7. #6
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nevermind... I messed up while putting the code in.

    With your updated version, everything seems to work beautifully!!! Thank you so much!!!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •