|
JavaScript - Spry Validation Problem
Hi,
I am having problem in validating my form using spry tools. The problem is that if I try to include any other validation other than spry along with spry validation the spry validation does not work. Plzz tell a possible solution Similar TutorialsHi All, I searched for an answer but didn't find anything that matched my issue. I am using Dreamweaver CS5 and have a few spry validation select boxes on my page. All but one are working correctly. The one in question is spryselect1 ("spryEquipLoc"). For some reason (which I cannot figure out) this field will display the selectRequiredState even after a selection has been made. Thanks in advance for any help. Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="javascripts/Calendar.js" type="text/javascript"></script>
<!--<script src="javascripts/datetimepicker_css.js"></script>-->
<script type="text/javascript">
var categories = [];
categories["startList"] = ["Equipment issue","Log issue","Operator error","Media issue","Satellite issue","Program issue","Playlist issue","Promo issue"]
categories["Equipment issue"] = ["Digibeta deck","XDCAM deck","Video monitor","Chyron","Switcher","Media port","Downstream keyer","Asset base PC","Device server","Rapid Play X PC","Satellite receiver","Video server","Miranda wall","Crispen automation","Vertigo X-Play"];
categories["Log issue"] = ["Log/Playlist mismatch","Log timing light","Log timing heavy","Incorrect duration","Wrong start time","Events deleted"];
categories["Operator error"] = ["Operator Name1","Operator Name2","Operator name3"];
categories["Media issue"] = ["Damaged tape","Missing media","Dublist not received","Bad media file","Snipe Issue","Bug Issue","Missing audio","Audio out of sync","Audio clipping/distorted","Audio level too low","Embedded credits"];
categories["Satellite issue"] = ["Black on air", "Signal outage", "Sun outage", "Closed captions","Audio issue","Transmitter related"];
categories["Program issue"] = ["Program light","Program heavy","Incorrect program","Incorrect material ID","Program replaced","Incorrect segment lengths","Embedded credits"];
categories["Playlist issue"] = ["Playlist light","Playlist heavy", "Incorrect playlist loaded", "Wrong playback source"];
categories["Promo issue"] = ["Incorrect material ID","Incorrect duration","Incorrect snipe","Incorrect snipe duration","Promo replaced"];
var nLists = 2; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['frmOnAirActivity']['List'+i].length = 1;
document.forms['frmOnAirActivity']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['frmOnAirActivity']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Air Activity Form</title>
<style type="text/css">
body,td,th {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #052F47;
}
body {
background-color: #8E8E8E;
background-image: url();
background-repeat: no-repeat;
}
#form {
behavior: url(PIE.htc);
font-family: Verdana, Geneva, sans-serif;
background-repeat: repeat;
font-size: 14px;
padding: 10px;
width: 660px;
border-radius: 0px 0px 20px 20px;
box-shadow: #666 10px 10px 10px;
border-top-style: none;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: none;
background-color: #589DC6;
float: right;
}
#wrapper {
margin: auto;
width: 860px;
}
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="css/Calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
// show and hide sections of a form
function preparePage() {
document.getElementById("List1").onclick = function() {
if (document.getElementById("List1").value=="Equipment issue") {
// use CSS style to show it
document.getElementById("Equipment").style.display = "block";
document.getElementById("Satellites").style.display = "none";
} else if (document.getElementById("List1").value=="Satellite issue") {
// use CSS style to show it
document.getElementById("Satellites").style.display = "block";
document.getElementById("Equipment").style.display = "none";
} else {
// hide the div
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
};
// now hide it on the initial page load.
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
window.onload = function() {
preparePage();
};
</script>
<div id="wrapper"> <img src="Graphics/banner.png" alt="Banner" width="860" height="84" />
<div id="form">
<form id="frmOnAirActivity" name="frmOnAirActivity" method="post" action="">
<span id="spryAirdate">
<label for="Airdate">Airdate</label><br/>
<input type="Text" id="Airdate" tabindex="1" />
<img src="graphics/cal.gif" onclick="javascript:showCalendar('Airdate')" style="cursor:pointer" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
<span id="spryDiscrepType">
<label for="List1">Event Category</label><br />
<select name="List1" id="List1" tabindex="2" onchange="fillSelect(this.value,this.form['List2'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
</p>
<span id="spryDiscrepSubType">
<label for="List2">Detail</label><br />
<select name="List2" id="List2" tabindex="3" onchange="fillSelect(this.value,this.form['List3'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<div id="Equipment">
<span id="spryEquipLoc">
<label for="EquipLoc">Equipment Location</label><br/>
<select name="EquipLoc" id="EquipLoc" tabindex="4">
<option selected></option>
<option>Master Control</option>
<option>Media Services</option>
<option>Central Tape</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<span id="spryEquipID">
<label for="EquipID">Equipment ID</label><br />
<input type="text" name="EquipID" id="EquipID" tabindex="5" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
</div>
<p>
<div id="Satellites">
<fieldset><legend>Affected Satellites:</legend>
<table width="424">
<tr>
<td width="152"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_12" />
NET Sat1</label></td>
<td width="119"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_16" />
Net Sat2</label></td>
<td width="137"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_20" />
Net Sat3</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_13" />
Net Sat4</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_17" />
Net Sat5</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_21" />
Net Sat6</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_14" />
Net Sat7</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_18" />
Net Sat8</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_22" />
Net Sat9</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_15" />
Net Sat10</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_19" />
Net Sat11</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_23" />
Net Sat12</label></td>
</tr>
</table>
</fieldset>
</div>
<fieldset>
<legend>Network:</legend>
<table width="424">
<tr>
<td width="152">
<label>
<input type="checkbox" name="Network_1" value="checkbox" id="Network_1" />
Networl_1</label>
</td>
<td width="119">
<label>
<input type="checkbox" name="Network_2" value="checkbox" id="Network_2" />
Network_2</label>
</td>
<td width="137">
<label>
<input type="checkbox" name="Network_3" value="checkbox" id="Network_3" />
Network_3</label>
</td>
</tr>
</table>
</fieldset>
<p>
<label for="OnAirVariance">On Air Variance</label>
<input name="OnAirVariance" type="checkbox" value="" />
<p>
<span id="spryDescription">
<label for="Description">Description</label><br />
<textarea name="Description" id="Description" cols="45" rows="5" tabindex="6"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span>
<p>
<span id="spryResolution">
<label for="Resolution">Action Taken</label><br />
<textarea name="Resolution" id="Resolution" cols="45" rows="5" tabindex="7"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span></p>
</form>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryAirdate", "date", {validateOn:["blur"], useCharacterMasking:true, format:"mm/dd/yyyy"});
var sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
var spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryDiscrepType", {validateOn:["blur"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryDiscrepSubType", {validateOn:["blur"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("spryDescription", {validateOn:["blur"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("spryResolution", {validateOn:["blur"]});
</script>
</body>
</html>
I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container. ( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly). I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding [CODE] google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); }); after var map = new google.maps.Map(document.getElementById(canvas), myOptions); [CODE] This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested: Re-centrering the map around the marker [CODE] google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); [CODE] Zooming in and out again to trigger the resize: [CODE] map.setZoom( map.getZoom() ); [CODE] Or using this to do the same thing: [CODE] this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1); [CODE] Suggested for use if there are multiple markers: [CODE] map.setZoom(map.getZoom()); map.fitBounds(bounds); [CODE] I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help! Hi there! I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem: I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong. First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me. When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly. My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); rs_ProfAbility.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_ProfAbility.gallery) { return row; } return null; } rs_ProfAbility.filter(chooseSet); [CODE] This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help! Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he www.iotheatre.com/GoldenAgeAbilities.php -Chris Blockus Need Help with Spry Menu Bar This is the site I am working on: http://www.alpinelakesair.com/newsite/index.php To quickly summarize: (without getting into the *why* of things) - the website has only two pages: 1=index.php, 2=charter-flights.php - the homepage links to specific tabs within the spry region of the main menu bar, which is located on page the 2nd page. - all the sub pages of the site are located within the spry content of the spry tabs of the menu bar (this is so the header image never has to reload) So, the idea goes that you click on the tabs of the home page and it brings you to the 2nd page with the corresponding menu bar item already highlighted. The pages work in Safari and Firefox on my Mac - but - when you try click on the first four tabs from the homepage in Internet Explorer it doesn't open any content. If you click on the last three tabs it opens content - but all the content, and the sub-spry regions do not work... I am new to spry, so if you help please make your answers for someone with a little but not much spry knowledge. Please let me know if more information is needed.. I am reposting this as the issue has not been resolved... alex Hello, trying to cooperate with Spry atm, and its going fairly ok.. Its just one thing, i would like it when you open one spry panel, the rest of them would close. Anyone know how to do that? Thanks I've built a site with DW4 and the spry menus are not working. they worked for a little while and then I changed something in the JS menu on the template and now none of the spry works on my site. also, I imbedded a google gadget and that didn't show up either! any help would be appreciated. thx: Hello there! Brand new to the forums, but a regular reader. I'm currently in the process of putting together a site and before I get too much further I had a few Spry related questions (hope this is the correct forum for such questions). Please bear with me if my questions seem plentiful or ignorant. First off, here's the current progress of the site in question: http://thedeadhamster.com/testing/index.htm As you can (hopefully) see, upon the site's loading the header does some slide in animations. This animation would only animate on the home page; all linked pages would have a static header. While I think it looks rather nice I'm actually hesitant to use it. Here's a few of my concerns, perhaps some of you know of some possible solutions: I can't seem to get the images to animate when they're just div backgrounds. As such, I'm using image tags to make up the header which unfortunately adds the images into the HTML structure itself and doesn't really seem "good practice". Or am I simply missing something? The images sometimes "flash" on screen prior to animating, a result of the browser loading the images before the Spry coding I assume. Any simple workaround to that? Should I just forget animating the header and settle for a static background image header instead? Aka, is this more trouble than it's worth? Any thoughts or suggestions are most welcome, I appreciate any help you guys graciously throw my way. Thanks! Hi, I have got a validation problem in my javascript. The user needs to enter into "city" text box and also to select a state from a drop down list. The problem is that the function "checkValue" goes into the loop. Can anybody pinpoint the problem? Code: <INPUT TYPE='text' NAME='city' size='50' maxlength='50' id="City" onBlur="return checkValue(this),onchange= compLoop
<select name='state' class='dropdown' id="State" onblur="return checkValue(this),onchange= compLoop()">
<option selected value=''>Select a State
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
</select>
<INPUT TYPE='text' NAME='zip' size='10'maxlength='10' id="Zip" onBlur="return checkValue(this),onchange= compLoop()">
This is the function checkValue() Code: function checkValue(textbox)
{
if(textbox.value==""||textbox.value==null)
{
alert("Please enter the value for "+ textbox.id);
textbox.style.background='pink';
textbox.focus();
return false;
}
else
{
textbox.style.background='white';
return true;
}
}
Hi all, I have some problem about validating my form.Infact nothing is happening when clicking the submit button.Can anyone tell me where the problem is.Here are my code. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create New Customer-PAXWine</title>
<style type="text/css">
<!--
body {
margin:0 px;
padding:0px;
}
#container {
clear: both;
float: none;
height: 800px;
width: 970px;
margin-right: auto;
margin-left: auto;
}
#content {
background-color: #BC9C85;
height: 800px;
width: 970px;
}
#content-title{
padding: 25px 5px 5px 25px;
color:#521514;
font-family: Arial, "Times New Roman", Times, serif;
font-size:10px;
}
#fieldset{
border:4px solid #E8E4CB;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:#FCFCF9;
width:700px;
padding:22px 25px 12px 33px;
margin:28px;
}
#legend{
float:left;
font-weight:normal;
font-size:15px;
border:1px solid #fefefe;
background:#521514;
color:#fff;
margin: -33px 0 0 -10px;
padding:2px 8px;
position:relative;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inherit
}
#buttons{
margin:25px 370px;
}
-->
</style>
<script type="text/javascript">
function echeck(str)
{
var at = "@"
var dot = "."
var lat = str.indexOf(at)
var lstr = str.length
var ldot = str.indexOf(dot)
if (str.indexOf(at)==-1)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(at,(lat+1))!=-1)
{
alert("Invalid E-mail ID")
return false;
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(dot,(lat+2))==-1)
{
alert("Invalid E-mail ID")
return false;
}
if (str.indexOf(" ")!=-1)
{
alert("Invalid E-mail ID")
return false;
}
return true;
}
//checkbox function
function DoTheCheck()
{
message = "Your Preference:\n\n"
//For each checkbox see if it has been checked, record the value.
for (i = 0; i < document.myform.wine.length; i++)
if (document.myform.wine[i].checked)
{
message = message +document.myform.wine[i].value + "\n"
}
alert(message)
}
//Created / Generates the captcha function
function DrawCaptcha()
{
var a = Math.ceil(Math.random() * 10)+ '';
var b = Math.ceil(Math.random() * 10)+ '';
var c = Math.ceil(Math.random() * 10)+ '';
var d = Math.ceil(Math.random() * 10)+ '';
var e = Math.ceil(Math.random() * 10)+ '';
var f = Math.ceil(Math.random() * 10)+ '';
var g = Math.ceil(Math.random() * 10)+ '';
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.myform.txtCaptcha.value = code
}
// Remove the spaces from the entered and generated code
function removeSpaces(string)
{
return string.split(' ').join('');
}
function validateform()
{
var nic = document.myform.nic.value;
var firstname = document.myform.fname.value;
var surname = document.myform.sname.value;
var phone = document.myform.phone.value;
var mail = document.myform.mail.value;
var chks = document.getElementsByName('wine[]');
var hasChecked = false;
var username = document.myform.uname.value
var pass1 = document.myform.pass1.value;
var pass2 = document.myform.pass2.value;
var str1 = document.myform.txtCaptcha.value;
var str2 = document.myform.txtInput.value;
var which = document.myform.fname.value;
var which1 = document.myform.sname.value;
var numericExpression = /^[0-9]+$/;
var message = document.getElementById('confirmMessage');
var returnval=false;
if (nic.value == "")
{
window.alert("Please enter your National Identity Card Number.");
nic.focus();
return false;
}
if (firstname.value == "")
{
window.alert("Please enter your First Name.");
fname.focus();
return false;
}
if (/[^a-z]/gi.test(which.value))
{
alert ("Only Alphabets Are Valid In This Field");
which.value = "";
which.focus();
return false;
}
if (surname.value == "")
{
window.alert("Please enter your Last Name.");
sname.focus();
return false;
}
if (/[^a-z]/gi.test(which1.value))
{
alert ("Only Alphabets Are Valid In This Field");
which1.value = "";
which1.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your Phone Number.");
phone.focus();
return false;
}
if (!phone.value.match(numericExpression))
{
alert("Phone Number Must Consists of Only Numbers");
phone.focus();
return false;
}
if (phone.value.length != 7)
{
alert("Phone number must consist of 7 numbers");
phone.focus();
return false;
}
if (mail.value == "")
{
alert("Please Enter your Email Address")
mail.focus()
return false
}
if (echeck(mail.value)==false)
{
mail.value=""
mail.focus()
return false;
}
if (chks.length[i].checked)
{
hasChecked = true;
break;
}
if (hasChecked == false)
{
alert("Please select at least one preference.");
return false;
}
if (username.value == "")
{
window.alert("Please enter a username.");
uname.focus();
return false;
}
if (username.value.length < 8)
{
window.alert("Username must consists of more than 8 character.");
uname.focus();
return false;
}
if (pass1.value == "")
{
window.alert("Please enter A Password.");
pass1.focus();
return false;
}
if (pass2.value == "")
{
window.alert("Please Re-enter the password.");
pass2.focus();
return false;
}
if (pass1.value != pass2.value)
{
window.alert("You did not enter the same password twice. Please re-enter both now.");
pass1.focus();
pass1.select();
return false;
}
if (removeSpaces(str1.value) != removeSpaces(str2.value))
{
windows.alert("The registration code did not match the one displayed.Please re-enter the code");
txtInput.focus();
return false;
}
return window.alert('Registration was Successfull');
}
function allowReset()
{
return window.confirm('Do you really want to clear this form?')
}
</script>
</head>
<body>
<div id="container">
<div id="content">
<div id="content-title">
<h1>Create an Account</h1>
</div>
<div id="fieldset">
<div id="legend">Personal Information</div>
<form name="myform" action="" onSubmit = "return validateform();" onReset = "return allowReset()" method = "post" action = "">
<table>
<tr>
<td>NIC:</td>
<td><input type="text" id="nic" name="nic" value="" size="15"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" id="fname" name="fname" value="" size="15"></td>
</tr>
<tr>
<td>Surname:</td>
<td><input type="text" id="sname" name="sname" value="" size="15"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" id="phone" name="phone" value="" size="15"></td>
</tr>
<tr>
<td>Email address:</td>
<td><input type="text" id="mail" name="mail" value="" size="15"></td>
</tr>
<tr>
<td>Preference:</td>
<td>
<input type="checkbox" name="wine" value="White wine" onclick="DoTheCheck();"/>White wine
<input type="checkbox" name="wine" value="Red wine" onclick="DoTheCheck();"/>Red wine
<input type="checkbox" name="wine" value="Rose wine" onclick="DoTheCheck();"/>Rose wine
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<input type="radio" id="sex" value="Male" checked>Male
<input type="radio" id="sex" value="Female">Female
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<select name="country">
<option value="none">Select Country</option>
<option value="Algeria">Algeria</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Bahamas">Bahamas</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Hungary">Hungary</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Italy">Italy</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Netherlands">Mexico</option>
<option value="New Zealand">New Zealand</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Romania">Romania</option>
<option value="Rwanda">Rwanda</option>
<option value="Seychelles">Seychelles</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Taiwan">Taiwan</option>
<option value="Thailand">Thailand</option>
<option value="Tunis">Tunis</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="Uruguay">Uruguay</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City">Vatican City</option>
<option value="Venezuela">Venezuela</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" id="uname" name="uname" value="" size="15" ></td>
</tr>
</table>
</div>
<div id="fieldset">
<div id="legend">Login Information</div>
<table>
<tr>
<td>Password:</td>
<td><input type="password" id="pass1" name="pass1" value="" size="15" /></td>
<td> </td>
<td>Confirm Password:</td>
<td><input type="password" id="pass2" value="" size="15" /></td>
</tr>
</table>
</div>
<div id="fieldset">
<div id="legend">Capcha</div>
<table>
<tr>
<td>
<input type="text" id="txtCaptcha" style="text-align:center; border:none;font-weight:bold; font-family:Modern"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="txtInput"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />
</td>
</tr>
</table>
</div>
<div id="buttons">
<input type="submit" value="Submit" />
<input type="reset" value="Reset"/>
</div>
</form>
</div>
</div>
</body>
</html>
Thanks to everyone for all the help so far. I've done a search for this but haven't found anything applicable. I have a Spry dataset pulling form an External XML file. The masterColumn needs to scroll horizontally. You can see what I'm talking about here. Under the "pics" section. (Thanks again JWPhillips and Tiny Script for helping to get the shuffle to work. And yeah, not everything is ready so It looks choppy.) Anyway, this is the div tag in question: Code: <div id="contentpics">
<div class="MasterDetail">
<div spry:region="ds2" class="MasterContainer">
<img class="MasterColumn" spry:repeat="ds2" spry:setrow="ds2" spry:hover="MasterColumnHover" spry:select="MasterColumnSelected" src="{thumb}" width="80" height="80"/></div>
<div spry:detailregion="ds2" class="DetailContainer">
<div class="DetailColumn"><img name="" src="{large}" alt="" width="350" height="350"/></div>
</div>
<br style="clear:both" />
</div>
</div>
I've tried several JS custom scrollbars, but I don't think that they work with the spry. Any suggestions? Thanks, SweetAnne hi again i hope somebody will help me to fix this problem I have a form which has not submit button but two options either to pay or to just submit so i use this in my code: Code: td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
so when they click on "Payments" they move to "payments.php and when they click on "More Information" they move to confirmation.php. Now my problem is i wants to validated it either through JavaScript or PHP but there is only one way i know with submit method. here i am using onClick function to move to other page. Please if somebody can help i much appericiate. here is the complete code of form i try to use PHP validation here but no luck please help me Code: <?php
if ($_POST['submit']) {
$title = $_POST['title'];
$name = $_POST['name'];
$insurance = $_POST['insurance'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$email = $_POST['title'];
$error = "";
if (!$title)
$error = $error. "Title <br />";
if (!$name)
$error = $error. "Name <br />";
if (!$insurance)
$error = $error. "National Insurance Number <br />";
if (!$address)
$error = $error. "Address <br />";
if (!$phone)
$error = $error. "Telephone Number <br />";
if (!$email)
$error = $error. "Email Address <br />";
if (!$error !="")
echo "Please Fill in The Following Required Fields <br /> $error";
else {
return $_POST['submit'];
}
}
?>
<div id="form" style="margin: 90px;">
<form action="" method="POST">
<table>
<tr>
<td align="right">
Title:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="title">
</td>
</tr>
<tr>
<td align="right">
Name:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="name">
</td>
</tr>
<tr>
<td align="right">
National Insurance<br /> Number:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="insurance">
</td>
</tr>
<tr>
<td align="right">
Address:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="address">
</td>
</tr>
<tr>
<td align="right">
Tleephone Number:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="phone">
</td>
</tr>
<tr>
<td align="right">
Email:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="email">
</td>
</tr>
<tr>
<td align="right">
CSCS Registration Number:
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="registration">
</td>
</tr>
<tr>
<td align="right">
Special Accommodations:
</td>
<td>
<textarea style="border:1px solid #4088b8;" type="textarea" cols="30" rows="5" name="comments">
</textarea>
</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td>
<td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
</tr>
</table>
</form>
</div>
Hello! There is something wrong in the code below. What is it? Can you help me please? The form validation was working just fine when I added the last 'if' for zip code validation. The function didn't work and returned true. The code is: Code: <script type="text/javascript">
function validateForm()
{
var y=document.forms["form"]["firstname"].value;
var f=document.forms["form"]["zipcode"].value;
var x=document.forms["form"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (y==null || y=="NAME")
{
alert("First name must be filled out");
return false;
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
var re='/(^\d{5}$)/';
if (f!=re)
{
alert ("Not a valid address");
return false;
}
}
</script>
Any ideas or advice? Thank you in advance! Hello, I 'm working on Euro banknote validation, where I'm using authentication of the serial number of Euro banknotes by the calculation of the "checksum". Basically what this algorithm does is to replace the first letter of the serial number by a number (each letter represents where the banknote is originally from), then it calculates the sum of all digits. If the remaining of the division of that sum by 9 is 0 then your note is valid. More info:http://en.wikipedia.org/wiki/Euro_banknotes#Checksum. Some test data. EURO Serial Number V44671133335 T27620110932 A00000000007 The last serial number "A00000000007" works properly. but the first two for some reason don't work properly. Those are my javascript codes: Code: <html>
<body>
<script type="text/javascript">
var EBNSArray = new Array ("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "0", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");
function validation()
{
var i;
var EBNS = document.forms["ebnsform"]["EBNS"].value;
if (EBNS.length != 11 && EBNS.length != 12)
{
alert ("Incorrect EBNS, please enter the correct EBNS");
return false;
}
if (EBNS.length == 11)
{
var letter_real = EBNS.charAt(0);
}
if (EBNS.length == 12)
{
var letter_real = EBNS.charAt(1);
}
var letter_enter = EBNS.substring(1,11);
var checkLetter = letter_enter % 9
if (letter_real == EBNSArray[checkLetter])
{
alert ("Correct EBNS");
return true;
}
else
{
alert ("Incorrect EBNS, please enter the correct EBNS");
return false;
}
}
</script>
<form id="ebnsform">
<P>Euro Banknote Number: <input type="text" id="EBNS" /><br /></form></center>
<input type="button" onclick="validation()" value="Validation"/></p>
</body>
</html>
Hi folks this is my first post Edit: sorry for the incorrect title should have read simple javascript validation problem! i have a fair understanding of php and mysql and have never had to use javascript as i was secretly trying to avoid it. The time has now come where i want to use it for client side validation on a form. I am able to validate most of fields however i need to validate a date to check it has been entered in the following format dd/mm/yyyy and that the date is not greater than todays date. N.B the date is entered into a text field in HTML i wrote a function with lots of if/else statements and failed. Im 100% positive there is a far simpler way to achieve my goal any help would be greatly appreciated. Thanks Code: function checkDate(elem, helperMsg){
var day = elem.substr(0,2);
var month = elem.substr(3,2);
var year = elem.substr(6,4);
if(day < 01 || day > 31)
{
var invalidday = true;
}
if (month < 0 || month > 12)
{
var invalidmonth = true;
}
if (year < 01 || year > 2099)
{
var invalidyear = true;
}
if ( month==04 || month==06 || month==09|| month==11)
{
if (day == 31)
{
var invalidday = true;
}
}
if (month==02)
{
if (day > 28)
{
var invalidday = true;
}
}
if (invalidday || invalidmonth || invalidyear)
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
var dd = today.getDate();
var mm = today.getMonth()+1;//January is 0!
var yyyy = today.getFullYear();
if(dd < 10)
{
dd='0'+dd;
}
if(mm < 10)
{
mm='0'+mm;
}
}
if (day > dd && month > mm && year > yyyy)
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}
I use this javascript validation in my form.. http://www.tizag.com/javascriptT/javascriptform.php but without validation values go to database.. Can anyone guide me how to solve this? First i import javascript file like this.. <script type="text/javascript" src="validate.js"></script> Part of the My code goes like this.... PHP Code: <form action="Process_reg.php" method="post" name="reg" id="reg" onsubmit="return formValidator()"> <div id="accordion" style="width:400px; height:500px; font-size:12px; font-family:Arial, Helvetica, sans-serif"> <h3><a href="#">General Details</a></h3> <div> <table cellpadding="5px" cellspacing="5px"> <tr> <td>First name</td> <td><input type="text" name="fname" id="fname" size="20px" title="Must be at least 8 characters." /></td> </tr> I just only try o validate email field only... email field goes like this PHP Code: <tr> <td>Email</td> <td><input type="text" name="email" id="email" size="20px" title="Enter Valid Email Address" /></td> </tr> My whole code attach here... Click here to download Thanks I have an issue with a form I am creating, I have many check boxs where at least one of the 2 needs to be selected and the final one has to be selected for the submit button to become active Code: <form id="form1" action="#" method="post"> One <input type="checkbox" name="value1" onMouseDown='submit_form()'/> Two<input type="checkbox" name="value2" onMouseDown='submit_form()'/> //atleast 1 of these 2 has to be selected Three<input type="checkbox" name="value3" onMouseDown='submit_form()'/> //this 1 has to be selected <input type="submit" name="submit" value="submit" id="submit" disabled="disabled"/> this is the javascript I have atm to do this Code: function submit_form(){
if (form1.value1.checked == false || form1.value2.checked == false) {
document.getElementById(submit);
orderForm.submit.disabled=false;
}
}
i cant seem to get this to work, forgetting about the 3rd checkbox for now any help would be greatly appreciated! Working of JS form validation now, this is my code: Code: <html>
<head>
<script>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
</script>
</head>
<body>
<form action="mailto:fonzhende1@yahoo.com" method="post">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name" value="" />
</td>
</tr>
<tr>
<td>email address:</td>
<td>
<input type="text" name="email" value="" />
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
<textarea rows="2" cols="20"> Test area </textarea><br/>
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br/>
<br/>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
</form>
</body>
</html>
Problem is when I submit the form I am getting what you see in the attachment, I guess this email form which pops up needs to be directed to Yahoo Hosting then redirected from there back to me? Anyway I would like if it the email could be sent directly to me without this form popping up, is that possible? Also, when I submit the form with the fields empty I am not getting the error message? Hey folks, I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!! Code: <div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
The CSS and Jscript files are attached. Hi All, I am trying to create a script for checking that checks that the email address entered into two input boxes is the same when a submit button is clicked, I have these two input boxes Code: <input type="text" name="user_email" id="user_email" /> <input type="text" name="user_email2" id="user_email2" /> This javascript code Code: <script type="text/javascript">
var email1 = document.getElementById(user_email);
var email2 = document.getElementById(user_email2);
function checkEmail(){
if (email1 != email2)
{
alert("The two email addresses are not the same");
}
}
</script>
and this code for the button Code: <input type="submit" name="submit" id="submit" onSubmit="checkEmail" /> However this code is not working, can anyone see where I am going wrong? Any help will be appreciated Thanks in advance can anyone help me validate a survey page i have? it has many questions and each question has 5 radio buttons. i followed many guides and none of them worked for me. I refered to http://www.dynamicdrive.com/forums/s...00&postcount=9 guide and http://javascript.about.com/library/blradio4.htm but for somereason it doesn't seem to work. So can u guys plz look over my simplified version of the survey and see whats is wrong. Sorry if i sound like a noob, I am new here. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var btn = valButton(form.q1);
if (btn == null) alert('No radio button selected');
else alert('Button value ' + btn + ' selected');
function valButton(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i--) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
</script>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="20">
<form name="science" method="post" action="ad.html" onsubmit="return valButton(btn);">
<tr>
<td width="475"><h3>
<center>
Reasons for organizing Science Olympiad
</center>
</h3></td>
<td width="17"><h3>
<center>
1
</center>
</h3></td>
<td width="17"><h3>
<center>
2
</center>
</h3></td>
<td width="17"><h3>
<center>
3
</center>
</h3></td>
<td width="17"><h3>
<center>
4
</center>
</h3></td>
<td width="17"><h3>
<center>
5
</center>
</h3></td>
</tr>
<tr>
<td width="475">1. It is fun</td>
<td width="17"><input type="radio" id="q1" name="q1" value="1" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="2" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="3" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="4" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="5" /></td>
</tr>
<tr>
<td>2. To motivate students to pursue further education in Science and Engineering</td>
<td width="17"><input type="radio" id="q2" name="q2" value="1" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="2" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="3" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="4" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="5" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" /></td>
</tr>
<tr></tr>
</form>
</table>
testing
</body>
</html>
|
|||||||