Web Analytics Made Easy -
StatCounter Javascript validator not getting form data - CodingForum

Announcement

Collapse
No announcement yet.

Javascript validator not getting form data

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    Just use the error console

    Comment


    • #3
      Error console?

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

      Comment


      • #4
        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.
        Be yourself. No one else is as qualified.

        Comment


        • #5
          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

          Comment


          • #6
            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.
            Be yourself. No one else is as qualified.

            Comment


            • #7
              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; Sep 10, 2011, 07:59 AM.

              Comment

              Working...
              X
              😀
              🥰
              🤢
              😎
              😡
              👍
              👎