JavaScript - Validator

Hi, basically it's a simple postcode validator.

It checks to see whether the postcode is in UK format, then tells you if it isn't with an alert box, then I want it to clear the field. The input field's ID is postcode.

Code:

function testPostCode () {
	var myPostCode = document.getElementById('postcode').value;
	if (checkPostCode (myPostCode)) {
    document.getElementById('postcode').value = checkPostCode (myPostCode)
	} 
	else {alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.")};
	document.postcode.value="";
	}

Anyone able to help me?

Hello,

I am trying to add a simple script to my CSS menu for a little bit more eye candy. However, when I add the script - it causes issues in my online store (ex; the javascript-powered one page checkout stops working).

Here is the exact error from the error console:

Quote:
Error: jQuery.validator is undefined
Source File: https://www.gem-tech.com/store/pc/onepagecheckout.asp
Line: 288
And here is the exact script:
Quote:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}


var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);



});



</script>
I believe there is some sort of conflict? Not sure though.

Any input on this?
Thanks,

<script type="text/javascript">

Code:

function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }}}//
function switchImg(i){document.images["wine"].src = i;}

</script>

used in this page

seems to object to option.length

Frank.

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

Hi There,

I really need your help.

I am aware that there is no isDate() function for javascript, however, how could one check a date against a validator to ensure that the date entered is either returned true or false

the date format that I would like to check would consist of the dd/mm/yyyy

so essentially:

isDate("12/01/2012") would return as true

isDate("N/A") = would return as false

I have searched high and low and am counting on the experts on this forum for some major help.

A huge thanks in advance and I really appreciate everything.

Cheers,

Jay

I have the following script in the head;
Code:

		<script type="text/javascript">
	<![CDATA[

	<!--This function validates the data from the three input boxes on the MAILTO form-->
	function validate()
	{
	Check="Valid";
	Name=document.contact.name.value;
	Mail=document.contact.mail.value;
	Comment=document.contact.comment.value;
	if (Name=="your name" || Name.length<1)
	{
	alert("Please enter your name");
	Check="Invalid";
	}
	else if (Mail.indexOf("@")<1 || Mail.indexOf(".")<1)
	{
	alert("Please enter a valid email address");
	Check="Invalid";
	}
	else if (Comment=="your comment" || Comment.length<1)
	{
	alert("Please enter your comment");
	Check="Invalid";
	}
	if (Check=="Invalid")
	{
	return false;
	}
	else
	{
	alert("Thank you for your comment");
	}
	}
	
	]]>
	</script>

and the following form in the body;
Code:

<div>
						<form name="contact"  onsubmit="return validate()" action="email.asp" method="post">

    <div class="input_title">Name:</div><input type="text" name="name" size="25" class="input_box" />
 
 	<br />

	<div class="input_title">Your Email:</div><input type="text" name="sender" size="25" class="input_box" />
	 
	<br />
	 
	<div class="input_title">Phone Number:</div><input type="text" name="tel" size="25" class="input_box" />(Optional)
	 
	<br />
	 
	Message:
	
	<br />
	
	<textarea name="enquiry" cols="50" rows="6" class="input_box"></textarea>
	 
	<br />
	 
	<input type="submit" value="Submit" name="submit" /><input type="reset" value="Reset" name="reset" />
	 
	<br />

</form>

		<br /><br />
</div>

It is a aspx file and validates fine as XHTML Trans. Why won't it work?

Hi,

I've been looking for a client-side form validation script which will check each field before submitting the form.

Can anyone point me to a good one that looks professional. I want it to make a nice presentation of any errors as well, perhaps, as showing a 'tick' sign when the field is correctly filled in .

bazz

Validator (My CSE HTML Validator v9.0 ) reports javascript errors but program runs. There seems to be a problem with commands used twice and a missing semi-colon.

Also there are problems with Firefox. Unable to reselect another image. OK with IE8.

I would appreciate it if someone with better eyesight than me could give the jscript a once over for me.

Thanks oin advance.

Frank

Culprit is here.

EDITED.