FORM: 'onsubmit' js validation not working when enctype="multipart/form-data"

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • scubak1w1
    New Member
    • Feb 2008
    • 53
    #1

    FORM: 'onsubmit' js validation not working when enctype="multipart/form-data"

    ['moved' from HTML/CSS board, as suggested, thanks...]

    Hello,

    I am building a form that collects some data about a file and throws it into a PosgreSQL database and also allows the user to upload and process the file using PHP's $_FILES...

    i.e., <input type="file" name="file" id="file" size="50"/>

    Action is a PHP_SELF, method is POST, check with array_key_exist s, etc... anyway..... :-)

    The form works just fine if all of the data is entered correctly...

    However, the 'onsubmit' js validation is not 'triggered' when the form's enctype="multip art/form-data" ??

    Help! TIA! <smile>

    Aside:

    - once I get it working, any validation suggestions for the file upload part of the form as I can't check the $_FILES criteria prior to the submit of course

    - I previously had it working via two forms - upload, check $_FILES, AJAX to turn on the submit for the details form, details entered, submit, working as desired - but only in IE! (in non-IE browsers, the submit button for the details part of the 2nd form was turned on correctly by AJAX but simply 'ignored' when clicked...)

    Cheers!:
    GREG...
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      The onsubmit should work. Post your code.

        Comment

        • scubak1w1
          New Member
          • Feb 2008
          • 53
          #3
          Of course, thank you:

          (i) I put the validation javascript at the bottom, even though it is in the <head> - and may be you don't need it, as it it not getting there anyway
          (ii) I gave you the lot, even though most is not relevant of course - apart from the PHP to process the form (as this is working)
          (iii) the page is a *.php, necessarily
          (iv) look for "DRAFT @ ..." to see which bits I am still working on (not relevant to this issue)
          (v) I am not used to the formatting commands in the forum, so apologies in advance if it is a bot off kilter!
          (vi) looking at it further, is it related the form tags are not totally within the table tags? (or vica versa)

          --------------
          Code:
          <form action="<?php print $_SERVER['PHP_SELF']; ?>" method="post" name="add_new_module_details" enctype="multipart/form-data" onsubmit="return validate_module_details_add_form">
                  
        		 <input type="hidden" name="_add_new_module_details" value="1" />
                  
               <table align="center" cellpadding="10" width="95%" style="font-size:10px">
            	
               	<tr style="font-weight:bold; font-size:24px; color:blue">
            			<td align="center" colspan="2">
                  		<!-- DRAFT @ 03/12/09 - delete me --><h2 style="color:red">UNDER CONSTRUCTION</h2>
               			Add The New Module File &amp; Details
                     </td>
            		</tr>
               
               
               	<tr>
            			<td colspan="2">
               			<hr /> <!-- spacer -->
            			</td>
            		</tr>
               
               
               	<tr valign="top">
                  
               		<td align="left" width="50%">
								<strong style="font-size:12px">
                        	Module ID:
                        </strong>
                        <br />
              	 	 	 	<input type="text" name="new_module_id" size="6" maxlength="6" />
                        <br />
                 			<em style="color:gray">
                        	(&le; 6 letters, numbers &amp; underscores,
                         	<br />
                         	using a proscribed 'pattern.')
                      </em>
                     </td>
                     
                  	<td align="right" width="50%" rowspan="2">
							  	 <strong style="font-size:12px">
                           	Module Title:
                         </strong>
                      <textarea name="new_module_title" cols="25" rows="7" style="margin-top:-1px; margin-bottom:-1px"></textarea>
							</td>
                     
            		</tr>
                  
                  
                  <tr valign="top">
        				 <td align="left">
								<strong style="font-size:12px">
                        	File Name:
                        </strong>
                    <input type="text" name="new_module_filename" size="30" maxlength="50"/>
                        <br />
						  <em style="color:gray">
								(&le;50 letters, numbers and underscores only;
								<br />
						    no file extension)                         </em>
                     </td>
                  </tr>

               	<tr valign="top">
              		<td align="left">
                 			<strong style="font-size:12px">
                        	File Extension:
                        </strong>
                        <br />
                        <select name="new_module_file_extension">
                        	<option value="not_yet_selected" selected="selected">[select]</option>
									<?php
										foreach($ary_possible_file_extensions as $ary_query_row)
											{
												if($ary_query_row['file_extension'] != $ary_selected_module_details['file_extension'])
													{
														print "<option value=\"".$ary_query_row['file_extension']."\">".$ary_query_row['file_extension']."</option>";
													}
													else
													{
														print "<option value=\"".$ary_query_row['file_extension']."\" selected=\"selected\">".$ary_query_row['file_extension']."</option>";
													};
											};
									?>
                 	   	</select>
                     	<br />
                     	<em style="color:gray">
                 				(see fuller descriptions at the base of the page)                        </em>                     </td>
                  	<td align="right">
								<strong style="font-size:12px">
                        	Module Group:
                        </strong>
                        <br />
                        <select name="new_module_group">
                     		<option value="not_yet_selected" selected="selected">[select]</option>
									<?php
										foreach($ary_possible_module_groups as $ary_query_row)
											{
												print "<option value=\"".$ary_query_row['module_group']."\">".$ary_query_row['module_group']."</option>";
											};
									?>
                     	</select>
                        <br />
                     	<em style="color:gray">
                    			(see fuller descriptions at the base of the page)                     	</em>                     </td>
               	</tr>
               
               	<tr valign="top">
              		<td align="left">
								<strong style="font-size:12px">
                        	Module Contact:
                        </strong>
                        <br />
                        <select name="new_module_contact_id">
									<option value="not_yet_selected" selected="selected">[select]</option>
									<?php
										foreach($ary_possible_module_contacts as $ary_query_row)
											{
												print "<option value=\"".$ary_query_row['contact_id']."\">".$ary_query_row['fname']." ".$ary_query_row['lname']." [".$ary_query_row['contact_id']."]</option>";
											};
									?>
                     	</select>
                        <br />
                     	<em style="color:gray">
                 				(employee name, with [eID])                        </em>                     </td>
                     
                     <td align="right">
								<strong style="font-size:12px">
                      		Date Created:
                        </strong>
                        <br />
                        <input type="text" name="new_module_date_created" size="10" style="text-align:right" maxlength="10" />
                     	<br />
                        <em style="color:gray">
                    			(format is mm/dd/yy)
                        </em>
                     </td>
               	</tr>
                  
                  <tr valign="top">
                 	 <td align="left">
								<strong style="font-size:12px">
                        	Est. Completion Time (mins.):
                        </strong>
                  		<br />
                     	<input type="text" name="new_module_reasonable_completion_minutes" size="3" maxlength="3" />
						 </td>
                     
                     <td align="right">
								<strong style="font-size:12px">
                        	Current / Active?:
                        </strong>
                     	<br />
              				<img src="images/icon_checkbox_false1.gif" alt="[checked box icon]" title="NOT 'clickable'" />
                     	<br />
                     	<em style="color:gray">
                     		(NOTE: the module will be 'inactive' until the site manager can 'process' the uploaded file/s)
                     	</em>
							</td>
                  </tr>
                  
                  <tr valign="top">
              		 <td align="left">
                    		<strong style="font-size:12px">
                        	Limited Access?:
                        </strong>
                        <br />
                        <input type="checkbox" name="new_module_limited_access" value="true" />
                        <br />
                    	  <em style="color:gray">
                 				(i.e., this module's access is limited to 'certain' employees)
                    	  </em>
                     </td>
                     <td align="right">
                    		<strong style="font-size:12px">
                        	Test Required?:                        </strong>
                        <br />
                        <input type="checkbox" name="new_module_test_required" value="true" />
                   </td>
                  </tr>
                  
                  <tr valign="top">
                  	<td align="left">
                    		<strong style="font-size:12px">
                        	Number Test Questions?:
                        </strong>
                        <br />
                        <input type="text" name="new_module_number_test_questions" size="2" maxlength="2" />
                        <br />
                        <em style="color:gray">
                    			(if applicable)
                        </em>
                     </td>
                     
                     <td align="right">
                     	<strong style="font-size:12px">
                        	Open Book Test?:
                        </strong>
                        <br />
                        <input type="checkbox" name="new_module_open_book_test" value="true" />
                       	<br />
                        <em style="color:gray">
                    			(if applicable)
                     	</em>
                     </td>
                  </tr>
                  
                  <tr valign="top">
               		<td colspan="2" align="left">
								<strong style="font-size:12px">
                        	Module Comment:
                        </strong>
                        <textarea name="new_module_comment" cols="60" rows="5" style="margin-top:-1px; margin-bottom:-1px"></textarea>
                        <br />
								<em style="color:gray">
                    			(Note: the date &amp; time and the logged-on user that added these module details will be appended to these comments 'automagically')
                     	</em>
                     </td>
    </tr>
                  
                  
                  <tr valign="top">
        				 <td colspan="2" align="center">
								<strong style="font-size:12px">
                    			Select The <strong>*.ZIP</strong> File For Upload:
                        </strong>
								<br />
                    <input type="file" name="file" id="file" size="50"/>
                    </td>
                  </tr>
                  
                  
                  <tr valign="top">
                  	<td align="left">
                     	<img src="images/icon_reset7.gif" alt="Click To Reset" title="Reset The Pulldowns, etc" onclick="return funResetAddModuleDetailsForm()" style="cursor:pointer" />
                 		</td>
                     <td align="right">
                     	<input
                           	type = "image"
                              value = "Upload"
                              name = "submit_add_new_module_details"
                              class = "toggleopacity"
                              src = "images/icon_submit4.gif"
                              title = "Upload New Module Presentation File"
                           />
                     </td>
                  </tr>
               
     		 </form>
          --------------

          Code:
          //validate the module detail edits form contents
		function validate_module_details_add_form()
			{
			
				//DRAFT @ 03/12/09 - delete these lines 
				alert('Form validation triggered...');
				
				//check to see if MODULE ID text field was left blank
				if(document.add_new_module_details.new_module_id.value.length == 0)
					{
               	alert("Please enter some text for the new MODULE ID...");
                  document.add_new_module_details.new_module_id.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
					
				//check to see that the MODULE ID is numbers, letters and underscores (note - 6 characters or less 'requirement' is via form entry field size setting)
				var AllowedChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890_";
				for(var i = 0; i < document.add_new_module_details.new_module_id.value.length; i++)
					{
  						if (AllowedChars.indexOf(document.add_new_module_details.new_module_id.value.charAt(i)) == -1) 
  							{
  								alert("For the new MODULE ID, only use:\n\n - letters\n\n - numbers\n\n - underscores");
								document.add_new_module_details.new_module_id.focus(); //set the focus to this element, so the user can 'correct' the entry
  								return false;
  							};
	 				};
					
				//check to see that the MODULE ID is UNIQUE
				var IDAlreadyUsed = false;
				<?php
					foreach($ary_existing_module_details_sum as $ary_row)
						{
							?>
								if(document.add_new_module_details.new_module_id.value == '<?php print $ary_row['module_id']; ?>')
									{
										IDAlreadyUsed = true;
									};
							<?php
						};
				?>
				if(IDAlreadyUsed == true)
					{
               	alert("     MODULE ID\nis already in use...\n\n     Please adjust...");
                  document.add_new_module_details.new_module_id.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
				
				
				//check to see if MODULE TITLE text field was left blank
				if(document.add_new_module_details.new_module_title.value.length == 0)
					{
               	alert("Please enter some text for the new MODULE TITLE...");
                  document.add_new_module_details.new_module_title.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
					
				//check to see that the MODULE TITLE is UNIQUE
				var TitleAlreadyUsed = false;
				<?php
					foreach($ary_existing_module_details_sum as $ary_row)
						{
							?>
								if(document.add_new_module_details.new_module_title.value == '<?php print $ary_row['module_title']; ?>')
									{
										TitleAlreadyUsed = true;
									};
							<?php
						};
				?>
				if(TitleAlreadyUsed == true)
					{
               	alert("     TITLE\nis already in use...\n\n     Please adjust...");
                  document.add_new_module_details.new_module_title.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
				
				//check to see if new module's FILE NAME field was left blank
				if(document.add_new_module_details.new_module_filename.value.length == 0)
					{
               	alert("Please enter a some text for the new module's FILE NAME...");
                  document.add_new_module_details.new_module_filename.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
					
				//check to see if new module's FILE NAME field seemingly includes a file extension (assuming that it is unless shown otherwise) - NOTE THAT would be 'caught' as the peroid would lick back in the form validiation as a 'illegal character', but this way it is easier for the user to comprehend the issue and edit
				if((document.add_new_module_details.new_module_filename.value).substr(document.add_new_module_details.new_module_filename.value.length-4,1) == '.')
					{
               	alert("It appears that you have added a FILE EXTENSION to the new module's FILE NAME...\n\nPlease delete before resubmitting...\n\n(use the extension 'pull-down' to record this info...)");
                  document.add_new_module_details.new_module_filename.focus(); //set the focus to this element, so the user can 'correct' the entry
                  return false;
					};
					
				//check to see that the FILE NAME is numbers, letters and underscores (note - 50 characters or less 'requirement' is via form entry field size setting)
				var AllowedChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890_";
				for(var i = 0; i < document.add_new_module_details.new_module_filename.value.length; i++)
					{
  						if (AllowedChars.indexOf(document.add_new_module_details.new_module_filename.value.charAt(i)) == -1) 
  							{
  								alert("For the new FILE NAME, only use:\n\n - letters\n\n - numbers\n\n - underscores");
								document.add_new_module_details.new_module_filename.focus(); //set the focus to this element, so the user can correct the entry
  								return false;
  							};
	 				};
					
				//check to see that the FILE NAME is UNIQUE
				var FileNameAlreadyUsed = false;
				<?php
					foreach($ary_existing_module_details_sum as $ary_row)
						{
							?>
								if(document.add_new_module_details.new_module_filename.value == '<?php print $ary_row['file_name']; ?>')
									{
										FileNameAlreadyUsed = true;
									};
							<?php
						};
				?>
				if(FileNameAlreadyUsed == true)
					{
               	alert("     FILE NAME\nis already in use...\n\n     Please adjust...");
                  document.add_new_module_details.new_module_filename.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
				
				//check to make sure the user has selected a FILE EXTENSION from the pulldown
				if(document.add_new_module_details.new_module_file_extension.value == 'not_yet_selected')
					{
         			alert("Please select the new module's FILE EXTENSION from the appropiate form 'pull-down'...");
            		document.add_new_module_details.new_module_file_extension.focus(); //set the focus to this element, so the user can correct the entry
            		return false;
					};
				
				//check to make sure the user has selected a MODULE GROUP from the pulldown
				if(document.add_new_module_details.new_module_group.value == 'not_yet_selected')
					{
         			alert("Please select the new module's MODULE GROUP from the appropiate form 'pull-down'...");
            		document.add_new_module_details.new_module_group.focus(); //set the focus to this element, so the user can correct the entry
            		return false;
					};
				
				//check to make sure the user has selected a MODULE CONTACT from the pulldown
				if(document.add_new_module_details.new_module_contact_id.value == 'not_yet_selected')
					{
         			alert("Please select the new module's MODULE CONTACT from the appropiate form 'pull-down'...");
            		document.add_new_module_details.new_module_contact_id.focus(); //set the focus to this element, so the user can correct the entry
            		return false;
					};
				
				//check that the DATE CREATED field is not blank
				if(document.add_new_module_details.new_module_date_created.value.length == 0)
					{
               	alert("Please enter the new module's DATE CREATED...");
                  document.add_new_module_details.new_module_date_created.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
				
				//check that the DATE CREATED field is in the correct format
				if(checkValidDate(document.add_new_module_details.new_module_date_created.value) == false)
					{
               	alert('The DATE CREATED is not in a valid date format...\n\nPlease adjust before resubmitting...');
						document.add_new_module_details.new_module_date_created.focus(); //set the focus to this element, so the user can 'correct' the entry
                  return false;
               };
				
				//grab the date, add the right century, make into a js date
				var entered_date_string = document.add_new_module_details.new_module_date_created.value;
				if(((entered_date_string).substr(entered_date_string.length-3,1) == '/'))
					{
						//if the full years (i.e., 20##) are not there, add them so the js date creation works properly - with the assumption that the date is 20##
						left = entered_date_string.substr(1,entered_date_string.length-3);
						right = entered_date_string.substr(entered_date_string.length-2,2);
						if(parseInt(right) < 30)
							{
								century = '20';
							}
							else
							{
								century = '19';
							}
						entered_date_string_adjusted = left + century + right;
					}
					else
					{
						entered_date_string_adjusted = entered_date_string; //i.e., already has the century included
					}
				
				//check that the DATE CREATED field is not in the future
				var today = new Date();
				
				var entered_date_converted = new Date(entered_date_string_adjusted);
				if(entered_date_converted > today)
					{
						alert('The DATE CREATED is in the future...\n\nPlease adjust before resubmitting...');
						document.add_new_module_details.new_module_date_created.focus(); //set the focus to this element, so the user can 'correct' the entry
                  return false;
					}
					else
					{
						//ensure the date on the form is this century, even though the user will not see (although the code doesn't likely need this...)
						document.add_new_module_details.new_module_date_created.value = entered_date_string_adjusted;
					};
				
				//check to see if ESTIMATED COMPLETION TIME field was left blank
				if(document.add_new_module_details.new_module_reasonable_completion_minutes.value.length == 0)
					{
               	alert("Please enter a numeric value for the ESTIMATED COMPLETION TIME (minutes)...");
                  document.add_new_module_details.new_module_reasonable_completion_minutes.focus(); //set the focus to this element, so the user can correct the entry
                  return false;
					};
					
				//check to see that the ESTIMATED COMPLETION TIME is a numeric value (note - 3 characters or less 'requirement' is via form entry field size setting)
				if(!IsNonZeroInteger(document.add_new_module_details.new_module_reasonable_completion_minutes.value))
					{
						alert('The ESTIMATED COMPLETION TIME (minutes) needs to be an integer value (1 to 999)');
						document.add_new_module_details.new_module_reasonable_completion_minutes.focus(); //set the focus to this element, so the user can 'correct' the entry
						return false;
					};
					
				//if the new module is indicated as 'test required', check to see the user has entered a numeric value for the number of test questions, etc
				if(document.add_new_module_details.new_module_test_required.checked == true)
					{
						
						//check that the module's desired number of questions is an integer (or null)
						if(!IsNonZeroInteger(document.add_new_module_details.new_module_number_test_questions.value))
							{
								alert('The desired NUMBER TEST QUESTIONS needs to be an integer value (1 to 99)');
								document.add_new_module_details.new_module_number_test_questions.focus(); //set the focus to this element, so the user can 'correct' the entry
								return false;
							};
				
						//if the 'test required' is true, then confirm that a value for number of test questions has been entered
						if(document.add_new_module_details.new_module_number_test_questions.value == 0)
							{
								alert("As the module is indicated as TEST REQUIRED,\n\nplease enter the number of desired NUMBER TEST QUESTIONS");
								document.add_new_module_details.new_module_number_test_questions.focus(); //set the focus to this element, so the user can 'correct' the entry
								return false;
							};
						
						//if the number of desired test questions, if applicable, is over 50 then confirm with the user that this is correct
						if(parseInt(document.add_new_module_details.new_module_number_test_questions.value) > 50)
							{
								var answer = confirm('Greater than fifty (50) desired TEST QUESTIONS was entered as the value...\n\nIs this correct?');
								if(answer == false)
									{
										document.add_new_module_details.new_module_number_test_questions.focus(); //set the focus to this element, so the user can 'correct' the entry
										return false;
									};
							};
							
					};
				
				//if the new MODULE COMMENT field is empty, confirm that this is the user's intention
				if(document.add_new_module_details.new_module_comment.value.length == 0)
					{
               	var answer = confirm('The new MODULE COMMENT field is blank...\n\nIs this correct?');
								if(answer == false)
									{
										document.add_new_module_details.new_module_comment.focus(); //set the focus to this element, so the user can 'correct' the entry
										return false;
									};
					};
				
				//check to make sure that the file upload field has been populated
				//DRAFT @ 03/12/09 - to write
				
				//check to make sure that the file upload field has the letters ZIP on it's far right
				//DRAFT @ 03/12/09 - to write
				
				//final confirmation of the desire to add the module details, copy presented in alert box
				var answer =	confirm
									(
										'PLEASE CONFIRM:\nThe following new MODULE DETAILS will be added ??\n\n\n'
										+ 'MODULE ID =>     ' + document.add_new_module_details.new_module_id.value + '\n\n'
										+ 'MODULE TITLE =>     ' + document.add_new_module_details.new_module_title.value + '\n\n'
										+ 'FILE NAME =>     ' + document.add_new_module_details.new_module_filename.value + '\n\n'
										+ 'FILE EXTENSION =>     ' + document.add_new_module_details.new_module_file_extension.value + '\n\n'
										+ 'MODULE GROUP =>     ' + document.add_new_module_details.new_module_group.value + '\n\n'
										+ 'MODULE CONTACT eID =>     ' + document.add_new_module_details.new_module_contact_id.value + '\n\n'
										+ 'DATE CREATED =>     ' + document.add_new_module_details.new_module_date_created.value + '\n\n'
										+ 'COMPL. TIME =>     ' + document.add_new_module_details.new_module_reasonable_completion_minutes.value + ' mins.\n\n'
										+ 'LIMITED ACCESS? =>     ' + document.add_new_module_details.new_module_limited_access.checked + '\n\n'
										+ 'TEST REQUIRED? =>     ' + document.add_new_module_details.new_module_test_required.checked + '\n\n'
										+ 'NO. QUESTIONS =>     ' + document.add_new_module_details.new_module_number_test_questions.value + '\n\n'
										+ 'OPEN BOOK? =>     ' + document.add_new_module_details.new_module_open_book_test.checked + '\n\n'
										+ 'COMMENT =>     ' + document.add_new_module_details.new_module_comment.value
									);
				if(answer == false)
					{
						document.add_new_module_details.new_module_comment.focus(); //set the focus to this element, so the user can 'correct' the entry
						return false;
					};
				
				//return the 'yay', now that the various elements have been validated as OK...
				return true;

			};

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              You forgot the () :
              Code:
              <form ... onsubmit="return validate_module_details_add_form()">

                Comment

                • scubak1w1
                  New Member
                  • Feb 2008
                  • 53
                  #5
                  in the vernacular, d'oh!

                  <embarrassed>

                  Cheers!

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Don't worry: we've all been there at some point! :)

                        Comment

                        Previous template Next
                        Working...