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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript validator not getting form data

    HTML:
    Code:
    <script src="./include/js/drinkValidation.js" type="text/javascript"></script>
    
    <form name="add-drinks" action="include/add-drink.php" method="POST" onSubmit="return addDrinkFormValidation(this);" enctype="multipart/form-data" >
    		<span id="colour" class='modify_form'>
    			<label for='drinkColour'>Spirit Colour:</label> <br />
    			<select name='drinkColour' tabindex=1>
    				<option value='' >None</option>
    				<option value='R' >R</option>
    				<option value='G' >G</option>
    				<option value='Y' >Y</option>
    			</select>
    		</span>
    		<div class='modify_form'>
    			<label for='drinkType'>Type:</label> <br />
    			<select name='drinkType' tabindex=1 onChange="HideObjects(this.value)">
    				<option value="">Select a Drink type:</option>
    				<option value='Cask' >Cask Ales</option>
    				<option value='Guest' >Guest Ale</option>
    				<option value='Lager' >Lager</option>
    				<option value='Bottled Beers' >Bottled Beer</option>
    				<option value='Wines' >Wine</option>
    				<option value='Ciders' >Cider</option>
    				<option value='Softs' >Soft</option>
    				<option value='Spirits' >Spirit</option>
    			</select>
    		</div>
    		<div id="drinkABV" class='modify_form'>
    			<label for='drinkABV'>ABV:</label> <br />
    			<input name='drinkABV' size='2' tabindex=4 maxlength="4" placeholder="ie: 4.2"/>
    		<label for='drinkABV'>%</label>
    		</div>
    		<div id="name"class='modify_form'>
    			<label for='name'>Name:</label> <br />
    			<input name='name' size='25' tabindex=3 placeholder="Drink name"/>	
    		</div>
    		<div id="drinkInfo" class='modify_form'>
    			<label for='drinkInfo'>Description:</label> <br />
    			<textarea name='drinkInfo' rows='5' cols='30' maxlength='255' tabindex=5 placeholder="Max 255 characters"></textarea>
    		</div>
    		<div id="pint" class='modify_form'>
    			<label for='drinkPintPrice'>Pint (&pound;):</label> <br />
    			<input name='drinkPintPrice' size='10' tabindex=8 />
    		</div>
    		<div id="halfpint" class='modify_form'>
    			<label for='drinkHalfPrice'>Half Pint (&pound;):</label> <br />
    			<input name='drinkHalfPrice' size='10' tabindex=7 />
    		</div>
    		<div id="drinkSpecialPrice" class='modify_form'>
    			<label for='drinkSpecialPrice'>Offer Price (&pound;):</label> <br />
    			<input name='drinkSpecialPrice' size='10'tabindex=6  />
    		</div>
    		<div id="drinkbottlePrice" class='modify_form'>
    			<label for='drinkbottlePrice'>Bottle/Spirit Price (&pound;):</label> <br />
    			<input name='drinkbottlePrice' size='10'tabindex=6  />
    		</div>
    		<br />
    		<br />
    		<input type="file" name="cons_image"  />
    		<br />
    		<br />
    		<div id='submit'>
    		<input type='submit' value='Add New Drink' />
    		</div>
    		<br />
    		<p><b>Please add the information you wish to add then click Add New Drink</b></p>
    	</form>
    Javascript containing validation

    Code:
    var ck_abv = /[0-9]{1,2}\\.[0-9]{1}$/;
    var ck_price = /[0-9]{1,2}\\.[0-9]{2}$/;
    var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
    var ck_info = /^[A-Za-z0-9 ]{3,255}$/;
    alert ("Im in the file");
    
    function addDrinkFormValidation(form){
    var type = form.drinkType.value;
    var abv = form.drinkABV.value;
    var name = form.name.value;
    var info = form.drinkInfo.value;
    var pint = form.pint.value;
    var halfpint = form.halfpint.value;
    var bottle = form.drinkbottleprice.value;
    var offer = form.drinkSpecialprice.value;
    var errors = [];
    alert (form);
    alert (type);
    alert (abv);
    alert (info);
    alert (pint);
    alert (halfpint);
    alert ("Anything showing");
    
    	if(type==0){
    		errors[errors.length] = "Please select a drink type.";
    	}
    	if(!ck_name.test(name) || (name == "")){
    		errors[errors.length] = "Please enter a drink name.";
    	}
    	if(!ck_info.test(info) || (info == "")){
    		errors[errors.length] = "Please enter a drink description.";
    	}
    	if(!ck_abv.test(abv)){
    		errors[errors.length] = "Illegal character in ABV";
    	}
    	if(!ck_price.test(pint)){
    		errors[errors.length] = "Illegal character in pint";
    	}
    	if(!ck_price.test(halfpint)){
    		errors[errors.length] = "Illegal character in halfpint";
    	}
    	if(!ck_price.test(bottle)){
    		errors[errors.length] = "Illegal character in Bottle/Spirit Price";
    	}
    	if(!ck_price.test(offer)){
    		errors[errors.length] = "Illegal character in Offer price";
    	}
    	if (errors.length > 0) {
    	  reportErrors(errors);
    	  return false;
    	 }
    	  return false;	
    }
    
    function reportErrors(errors){
     var msg = "Please Enter Valid Data...\n";
     for (var i = 0; i<errors.length; i++) {
     var numError = i + 1;
      msg += "\n" + numError + ". " + errors[i];
    }
     alert(msg);
    }
    For some reason i dont know why the javascript isnt reading the function even tho they are correctly named, the file is being read as the 1st test alert comes up.

    the 2nd one inside the function doesnt know.

    can anyone point in the right place or show me where i am going wrong.

    as you can see i have put both my entire form and and the java file up.

    so you can easily see what goes on

    #on a note i have multiple forms in a tab system if that has anything to do with it although i shouldnt see why it should.

    #oh and did i get my regex correct for ck_price e.g "9.99 or 10.99" and ck_abv eg "4.2 or 10.2 or 34"

    #im also using wampserver 2.1 with win7 and chrome if it's needed

    thanks ste

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Just use the error console

  • #3
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Error console?

    Where would i find that i use notepad++. or will it be in the browser?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Best: Use Firefox browser and install the FireBug plugin. And then use it to debug your code.

    But even in MSIE, if you click on the error message icon at bottom of the window, you will get an error message that will point you to the bugs.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Error console?

    Don't got firebug will look into it. looking over code don't know if it will help as it named correctly. it just skipping the function any help with that

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Well, just for starters:

    var pint = form.pint.value;
    var halfpint = form.halfpint.value;

    You don't have any form fields named either pint or halfpint.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Kersh86 (09-10-2011)

  • #7
    New Coder
    Join Date
    May 2011
    Location
    UK
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ah yeah thanks, didnt see that looks like i used the div id instead of the input name.

    Solved it's working correctly now just need to sort out the regex
    Last edited by Kersh86; 09-10-2011 at 01:59 PM.


  •  

    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
    •