Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: mailhandler script and validation

  1. #1
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default mailhandler script and validation

    hello all and happy new year

    I would like to ask for your help please as I cannot figure out how to make the form work....
    I am using a JS Animated form with jquery validation that once submitted, it gets redirected to a mailhandler.asp file

    the form valuates and submits without a problem but when I add an element file-upload, then the form is not submitting anymore unless the upload file element is completed (user to select a file to upload).

    can you please help me out how to make this field optional? i.e. remove the validation for the file-upload element?

    thanking you in advance


    my form is this:
    HTML Code:
                            <form id="form2" enctype="multipart/form-data" method="post">
                            	<div class="success"><div class="success_txt">Contact form submitted!<br /><strong> We will be in touch soon.</strong></div></div>
                                <fieldset>
                                	<label class="name rel">
                                    	<span class="inp">
                                        	<input type="text" value="Name:">
                                        </span>
                                        <span class="error">*Not a valid name.</span> <span class="empty">*This field is required.</span>
                                    </label>
                                	<label>
                                    	<span class="inp">
                                        	<input type="file" name="FILE1" value="no_upload">
                                        </span>
                                    </label>
                                    <label class="verification rel">
                                    	<span class="inp">
                                        	<input type="text" value="What is the answer? 1 + 1 =" maxlength="1">
                                        </span>
                                        <span class="error">*Not a valid answer.</span> <span class="empty">*This field is required.</span>
                                    </label>
                                    <label class="message rel">
                                    	<span class="text_a">
                                        	<textarea>Message:</textarea>
                                        </span>
                                        <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span>
                                    </label>
                                    <div class="buttons"><a class="link3" href="#" data-type="reset">clear</a> &nbsp; <a class="link3" href="#" data-type="submit">send</a></div>
                            	</fieldset>
                            </form>
    the form.js file is this one:
    Code:
    //forms
    ;(function($){
    	$.fn.forms=function(o){
    		return this.each(function(){
    			var th=$(this)
    				,_=th.data('forms')||{
    					errorCl:'error',
    					emptyCl:'empty',
    					invalidCl:'invalid',
    					notRequiredCl:'notRequired',
    					successCl:'success',
    					successShow:'4000',
    					mailHandlerURL:'includes/MailHandlertestim.asp',
    					stripHTML:true,
    					targets:'input,textarea',
    					controls:'a[data-type=reset],a[data-type=submit]',
    					validate:true,
    					rx:{
    						".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
    						".verification":{rx:/2/,target:'input'},
    						".message":{rx:/.{20}/,target:'textarea'}
    					},
    					preFu:function(){
    						_.labels.each(function(){
    							var label=$(this),
    								inp=$(_.targets,this),
    								defVal=inp.val(),
    								trueVal=(function(){
    											var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
    											return defVal==''?defVal:tmp
    										})()
    							trueVal!=defVal
    								&&inp.val(defVal=trueVal||defVal)
    							label.data({defVal:defVal})								
    							inp
    								.bind('focus',function(){
    									inp.val()==defVal
    										&&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
    								})
    								.bind('blur',function(){
    									_.validateFu(label)
    									if(_.isEmpty(label))
    										inp.val(defVal)
    										,_.hideErrorFu(label.removeClass(_.invalidCl))											
    								})
    								.bind('keyup',function(){
    									label.hasClass(_.invalidCl)
    										&&_.validateFu(label)
    								})
    							label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
    						})
    						_.success=$('.'+_.successCl,_.form).hide()
    					},
    					isRequired:function(el){							
    						return !el.hasClass(_.notRequiredCl)
    					},
    					isValid:function(el){							
    						var ret=true
    						$.each(_.rx,function(k,d){
    							if(el.is(k))
    								ret=d.rx.test(el.find(d.target).val())										
    						})
    						return ret							
    					},
    					isEmpty:function(el){
    						var tmp
    						return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
    					},
    					validateFu:function(el){							
    						el.each(function(){
    							var th=$(this)
    								,req=_.isRequired(th)
    								,empty=_.isEmpty(th)
    								,valid=_.isValid(th)								
    							
    							if(empty&&req)
    								_.showEmptyFu(th.addClass(_.invalidCl))
    							else
    								_.hideEmptyFu(th.removeClass(_.invalidCl))
    							
    							if(!empty)
    								if(valid)
    									_.hideErrorFu(th.removeClass(_.invalidCl))
    								else
    									_.showErrorFu(th.addClass(_.invalidCl))								
    						})
    					},
    					getValFromLabel:function(label){
    						var val=$('input,textarea',label).val()
    							,defVal=label.data('defVal')								
    						return label.length?val==defVal?'nope':val:'nope'
    					}
    					,submitFu:function(){
    						_.validateFu(_.labels)							
    						if(!_.form.has('.'+_.invalidCl).length)
    							$.ajax({
    								type: "POST",
    								url:_.mailHandlerURL,
    								data:{
    									name:_.getValFromLabel($('.name',_.form)),
    									verification:_.getValFromLabel($('.verification',_.form)),
    									message:_.getValFromLabel($('.message',_.form)),
    									owner_email:_.ownerEmail,
    									stripHTML:_.stripHTML
    								},
    								success: function(){
    									_.showFu()
    								}
    							})			
    					},
    					showFu:function(){
    						_.success.slideDown(function(){
    							setTimeout(function(){
    								_.success.slideUp()
    								_.form.trigger('reset')
    							},_.successShow)
    						})
    					},
    					controlsFu:function(){
    						$(_.controls,_.form).each(function(){
    							var th=$(this)
    							th
    								.bind('click',function(){
    									_.form.trigger(th.data('type'))
    									return false
    								})
    						})
    					},
    					showErrorFu:function(label){
    						label.find('.'+_.errorCl).slideDown()
    					},
    					hideErrorFu:function(label){
    						label.find('.'+_.errorCl).slideUp()
    					},
    					showEmptyFu:function(label){
    						label.find('.'+_.emptyCl).slideDown()
    						_.hideErrorFu(label)
    					},
    					hideEmptyFu:function(label){
    						label.find('.'+_.emptyCl).slideUp()
    					},
    					init:function(){
    						_.form=_.me						
    						_.labels=$('label',_.form)
    
    						_.preFu()
    						
    						_.controlsFu()
    														
    						_.form
    							.bind('submit',function(){
    								if(_.validate)
    									_.submitFu()
    								else
    									_.form[0].submit()
    								return false
    							})
    							.bind('reset',function(){
    								_.labels.removeClass(_.invalidCl)									
    								_.labels.each(function(){
    									var th=$(this)
    									_.hideErrorFu(th)
    									_.hideEmptyFu(th)
    								})
    							})
    						_.form.trigger('reset')
    					}
    				}
    			_.me||_.init(_.me=th.data({forms:_}))
    			typeof o=='object'
    				&&$.extend(_,o)
    		})
    	}
    })(jQuery)
    $(window).load(function(){
    	$('#form2').forms({
    		ownerEmail:'#'
    	})
    })

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I'd go for the obvious first and see if that works:

    Code:
    <input class="notRequired" type="file" name="FILE1" value="no_upload">
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Foundas (12-31-2013)

  4. #3
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    many thanks for the reply...you were on the right track...the class was needed for the <label> ... i.e.. <label class="notRequired">


    now it's working perfectly!!!

    Thanks

  5. #4
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi everybody,

    with the above form, I tried to add a multiple select input

    <label class="notRequired mixedlollybartypes rel">
    <span class="inp2">
    <select name="mixedlollybartypes" multiple size="10" >
    <option value="Party Mix">Party Mix</option>
    <option value="Snakes">Snakes</option>
    <option value="Bananas">Bananas</option>
    <option value="Strawberries & Creams">Strawberries & Creams</option>
    <option value="Orange Drops">Orange Drops</option>
    <option value="Marshmallows">Marshmallows</option>
    <option value="Jubes">Jubes</option>
    <option value="Teeth">Teeth</option>
    <option value="Raspberries">Raspberries</option>
    <option value="Liquorice Allsorts">Liquorice Allsorts</option>
    </select>
    </span>
    </label>
    in the form.js file I added this (it's not last so that's why there's a comma):

    mixedlollybartypes:_.getValFromLabel($('.mixedlollybartypes',_.form)),

    when the form is submitted, the variable mixedlollybartypes is empty. If I remove the tag "multiple", then the variable gets a value

    can you please advice how I can solve this issue?

    thanking you in advance

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    In my experience jQuery tries to normalize server side form behavior to javascript. So I would try what is required for a multiple select element there, which is to give it a name which implies an array:

    Code:
    <select name="mixedlollybartypes[]" multiple size="10" >
    Hopefully you will not have to change anything else.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Looking a bit closer, getValFromLabel from the first post in this thread doesn't work for selects. It probably would (at least in some browsers) if it were changed:

    Code:
    					getValFromLabel:function(label){
    						var val=$('input,textarea,select',label).val()
    							,defVal=label.data('defVal')								
    						return label.length?val==defVal?'nope':val:'nope'
    					}
    But if it does then work, it will be returning an array for a multiple select.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi John,


    thank you for the suggestions. Actually, in the updated js file im using, I have already this function:

    getValFromLabel:function(label){
    var val=$('input,select,textarea',label).val()
    ,defVal=label.data('defVal')
    return label.length?val==defVal?'nope':val:'nope'
    }
    and then in the data list, I added:
    mixedlollybartypes:_.getValFromLabel($('.mixedlollybartypes',_.form)),


    I tried <select name="mixedlollybartypes[]" multiple size="10" >

    in the .asp file, I have both options just in case:
    body = body & "Mixed Lolly Bar Types: " & Request("mixedlollybartypes") & "<br>"
    body = body & "Mixed Lolly Bar Types: " & Request.Form("mixedlollybartypes") & "<br>"
    response.write body

    but still it doesn't get the values. this code however works if the select has no multiple as option. and without the [] of course that I just added.

    any ideas?

    thanks

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    As I said, it should work in at least some browsers. But if it does, and it's a multiple, it will be an array, not a string. I was using Chrome and it looked to work there. It also occurred to me that the jQuery version might matter. I was using 1.8.3

    What browser (include version please), and what jQuery version are you using?

    If it doesn't work in some browsers, we can detect a multiple and hopefully figure out how to get the value(s) from it.

    And/or if it's 'working' and it's just that the code cannot effectively deal with an array at that point, that can probably be tweaked.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    I tried with IE10 and Chrome 31.0.1650 (latest) and it doesn't work.

    I tried this though, (if it helps)

    mixedlollybartypes:$('.mixedlollybartypes option:selected').length,

    and in my asp file I was getting the number "3" (I did select three out of the 10)... but when I tried:
    mixedlollybartypes:$('.mixedlollybartypes option:selected').val(), ---- this gave me only the first option I selected (not the rest)
    and
    mixedlollybartypes:$('.mixedlollybartypes').val(), ---- this doesn't return any result at all.


    as for jquery, the file says: /*! jQuery v1.10.2 |

  11. #10
    Join Date
    Nov 2007
    Posts
    60
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Default

    hey John,

    finally i got it to work!!!

    I put this in the js to collect the data:
    mixedlollybartypes:$('.mixedlollybartypes').find(":selected").text(),

    only problem is that the result is like this:
    Mixed Lolly Bar Types: SnakesBananasJubesTeeth

    is there a way to put a , between each option ???

    ----- update ----

    no worries, used simple replace function in asp

    thanks for your help on this issue
    Last edited by Foundas; 01-09-2014 at 07:28 PM.

Similar Threads

  1. W3C Validation of script
    By s.willett in forum Flash
    Replies: 1
    Last Post: 09-06-2010, 09:17 PM
  2. Looking for validation script
    By jscoder in forum Looking for such a script or service
    Replies: 2
    Last Post: 01-02-2007, 09:31 AM
  3. w3c validation script
    By neilkw in forum HTML
    Replies: 6
    Last Post: 08-02-2006, 02:14 PM
  4. validation script
    By toolman in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-12-2006, 10:35 PM
  5. Help with validation of script
    By christy in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-17-2004, 06:23 AM

Bookmarks

Posting Permissions

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