A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: [RESOLVED] Javascript form validation process does not work correctly

  1. #1
    Member
    Join Date
    Dec 2007
    Posts
    71

    resolved [RESOLVED] Javascript form validation process does not work correctly

    I'm having problems with a javascript form validation that i have been working on for 8 hours now and every time I test it, it does something new unexpected.

    I have a form with just 1 select pull down and 2 text inputs.


    I want to check to make sure that any other option has been chosen from the list of selections other than the first generic option. If any other option has been selected, proceed to the next check...

    Next, I want to check if the value of the second input (id="customAmt") is only a number. If not throw the error messages (both in side the input and at the bottom of the form in a <p> tag. If the input is only a number then proceed.

    Last I want to check if a proper email has been added and done correctly. It should throw both an error message inside the input and in the bottom <p> tag.

    Should be easy enough, but I keep running into trouble somewhere and I when I fix 1 thing something else acts unexpected.

    This is in a PHP file which sends the form to itself and processes it after validation.

    Manytimes, the form just skips the validation and sends the form anyway with all of the default values.


    Here is the javascript/jquery I am testing which I put in the head of the code.

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	// Place ID's of all required fields here.
    	required = ["customDays", "customAmt", "customer_email"];
    	// If using an ID other than #email or #error then replace it here
    	email = $("#customer_email");
    	errornotice = $("#msgsC");
    	cAmt = $("#customAmt");
    	// The text to show up within a field when it is incorrect
    	emptyerror = "Enter traffic amount in numbers";
    	emailerror = "Please enter a valid e-mail.";
    	howMuch = "Enter a number";
    
    	$("#customPkg").submit(function(){	
    		//Validate required fields
    		for (i=0;i<required.length;i++) {
    			var input = $('#'+required[i]);
    			if ((input.val() == "") || (input.val() == emptyerror)) {
    				input.addClass("errorAlert");
    				input.val(emptyerror);
    				errornotice.fadeIn(750);
    			} else {
    				input.removeClass("errorAlert");
    			}
    		}
    		//validate if option is selected
    		if ($("#customDays option:selected").length == 0){
    			$("msgsC").addClass("text-error");
    			$("msgsC").html("Please choose how many days");
    		}
    		
    		//validate numbers and commas only in the visits per day feild
    			if (!cAmt.match(/^\d+$/)){
    			cAmt.val(howMuch);
    			$("#msgsC").addClass("text-error");
    			$("#msgsC").html(emptyerror);
    			} 
    		
    		// Validate the e-mail.
    		if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
    			email.addClass("errorAlert");
    			email.val(emailerror);
    			$("#msgsC").addClass("text-error");
    			$("#msgsC").html(emailerror);
    		}
    
    		//if any inputs on the page have the class 'text-error' the form will not submit
    		if ($(":input").hasClass("text-error") || $(":input").hasClass("errorAlert")) {
    			return false;
    		} else {
    			errornotice.hide();
    			return true;
    		}
    	});
    	
    	// Clears any fields in the form when the user clicks on them
    	$(":input").focus(function(){		
    	   if ($(this).hasClass("errorAlert") ) {
    			$(this).val("");
    			$(this).removeClass("errorAlert");
    	   }
    	});
    });	
    
    </script>

    Here is the HTML code
    HTML Code:
    <div style="background-color:#ffffff;" class="thumbnail">
    												<h3>Need A Pkg<br />Customized?</h3>
    												<p style="height:20px;">How Many Days Do You Need?</p>
    										<form id="customPkg" method="post" style="height:150px;" action="<? $_SERVER['PHP_SELF']; ?>">
    										<table>
    										<tr><td align="center"><select name="customDays" id="customDays" style="width:100px;height:22px;padding:0;text-align:center;">
    														<option value="chooseDays">Choose Days</option>
    														<option value="7 days"> 7 days </option>
    														<option value="15 days"> 15 days </option>
    														<option value="30 days"> 30 days </option>
    														<option value="60 days"> 60 days </option>
    														<option value="90 days"> 90 days  </option>
    														<option value="15 days"> 180 days </option>
    										</select> </td></tr>
    										<tr><td align="center">
    										<label style="width:190px;height:15px;margin-top:-10px;">How Much Traffic Per Day?</label></td></tr>
    										<tr><td align="center">
    										 <input size="40" type="text" style="width:92px;height:15px;" name="customAmt" id="customAmt" onclick="this.focus();this.select()" maxlength="7" value="Enter # per Day" />
    										</td></tr>
    										</table>
    										<input size="40" type="text" style="width:190px;height:15px;margin-top:-5px;text-align:center;" class="errorAlert" name="customer_email" id="customer_email" onclick="this.focus();this.select()" maxlength="50" value="Enter your email" />
    										<!-- Button -->
    										<button alt="Customize" name="submit" class="btn btn-large btn-block btn-primary" value="CustomRequest" type="submit">Send Request</button>
    										</form>
    										<span id="msgsC" style="margin:0;">Pageviews Depend On Traffic Amt</span>
    												</div>

    The PHP form sends with no trouble at all. The problem is in the validation code. Any help would be appreciated, as I have been working on this for hours and going around in circles.

  2. #2
    Member
    Join Date
    Dec 2007
    Posts
    71
    Nevermind. I took a breather, walked away for a while, then came back and reassessed. I was missing a parenthesis. Anyhow. I fixed it now. Thread Resolved.

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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center