|
JavaScript - Setting Causes Validation= False Using Javascript
Hi ,
I need your help in toggling the causes validation property of a link button depending upon the value selected from the radio button list...if i select "yes" from radio button then the linkbutton causes validation=true...if i select "no" from radio button then the linkbutton causes validation =false..help me out people Similar TutorialsHi Guys, This isn't the first time I've posted about cookies, and I apologize for that. My cookies were working perfectly until I made some changes to the site (ie. ran it through w3 validation). Now they aren't writing. I can't find any bugs with firebug, and I've tried following it through line by line. I expect my email validation is returning false, and I would really appreciate if you can help me find the bug. Here's the code, which I call with onsubmit="return Getvalue()" The rest of the page is at www.saverally.com Code: 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){
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
return false
}
if (str.indexOf(at,(lat+1))!=-1){
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
return false
}
if (str.indexOf(dot,(lat+2))==-1){
return false
}
if (str.indexOf(" ")!=-1){
return false
}
return true
}
function ValidateForm(emailID){
//var emailID=document.frmSample.txtEmail
if ((emailID.value==null)||(emailID.value=="")){
showDialog('Uh-oh.','Our tech-pigeons say you must enter an email address.','success',3);
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
showDialog('Uh-oh.','Our tech-pigeons say you must enter a "proper" email address.','success',3);
emailID.focus();
return false
}
return true
}
/*Email Validation*/
function Getvalue()
{
var validation=ValidateForm(document.getElementById("email"));
if(validation==true)
{
user_email=document.getElementById("email").value;
createCookie("userEmail",user_email,365);
document.addform.submit();
return true;
}
else
{
return false;
}
}
</script>
Ok , so i have one form <input type="text" onblur="minefunction(this)> and when i deselect it , i need JavaScript to check validation , that there are no numbers. I have made this one for Unique Master Citizen Number exemple: Code: function checkLetter(box)
var letter= new RegExp(/^\d{13}$/);
if(!slovo.exec(box.value))
alert("Only numbers are allowed , and it must be 13th of them!");
I need similiar , where numbers will not be allowed in any part of text form. I really thought this would work, a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure. Here is the javascript (the alert does return the correct value): Code: function OnChangeDay() {
//assign the day id to the hidden variable $day
x=eval(document.getElementById("day_loc_id_select").value)
if(x) {
document.getElementById("test_day_id").value=x;
} else {
document.getElementById("test_day_id").value=0;
}
// test
alert(document.getElementById("test_day_id").value)
}
Here is the calling HTML: Code: <input type="hidden" name="test_day" id="test_day_id" value="">
<select name="day_loc_id" id="day_loc_id_select"
onchange="OnChangeDay()">
<option></option>
<?= form_options($day_loc_options) ?>
</select>
And here is the HTML that should send the value, but I get day= (nothing) Code: <a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a> Can anyone point out where I've messed up? Thanks So this is how I setup an item in the list and it works fine but I can't fine the syntax for setting an option group in javascript. Cheers Daniel. Code: Users[0] = new Option("Text to show in list", "Item Value");
Hello; I have been trying to find files referenced in Acrobat 9 Pro help regarding using javascript in PDF files. I am waiting or Adobe to send me a link I can use to change my password for their forums. Meanwhile, does anyone have good links to these references? Thanks so much JK Hello, I am having some trouble with this Javascript slide show. At the moment when you click on the thumbnails they link to a larger image in a seperate browser page. I would really like to customize it so that the images open up in a smaller window on the same page. I'm sure this is something really simple but as of yet haven't been able to solve this little problem. I'm quite new to webdesign and would really appreciate some help. Thanks Hazel <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Exclusive Ionian</title> <script type="text/javascript"> <!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; // --> </script> <script> function changeimage(towhat,url, toImg){ if (document.images){ document.getElementById(toImg).src=towhat.src gotolink=url } } function sshow(){ window.location=gotolink } </script> <script language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("i/allegra/1.jpg","i/allegra/2.jpg","i/allegra/3.jpg","i/allegra/4.jpg","i/allegra/5.jpg") </script> <style type="text/css"> <!-- #sddm { margin: 0; padding: 0; z-index: 30} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: 11pt Trebuchet MS} #sddm li a { display: block; margin: 0 1px 0 0; padding: 0px 1px; width: 78px; background: #EDEFED; color: #999999; text-align: center; text-decoration: none} #sddm li a:hover { background: #EDEFED} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EDEFED; border: 0px solid #EDEFED} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EDEFED; color: #999999; font: 11pt Trebuchet MS} #sddm div a:hover { background: #F7CB96; color: #999999} --> </style> <link href="file:///E|/c/rou.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- --> </style> </head> <body> <br /> <table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#EFEFED"> <tr> <td width="900" bgcolor="#EFEFED"> <div align="center"> <p><a href="javascript:sshow()"><img src="i/allegra/1.jpg" name="targetimage" width="900" height="425" hspace="0" vspace="15" border="0" id="targetimage"><br /> </a> <a href="file:///E|/i/allegra/1.jpg" onmouseover="changeimage(myimages[0],this.href, 'targetimage')"><img src="i/allegra/1s.jpg" width="180" height="85" hspace="0" vspace="0" border="0"></a><a href="file:///E|/i/allegra/2.jpg" onmouseover="changeimage(myimages[1],this.href, 'targetimage')"><img src="i/allegra/2s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a><a href="file:///E|/i/allegra/3.jpg" onmouseover="changeimage(myimages[2],this.href, 'targetimage')"><img src="i/allegra/3s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a><a href="file:///E|/i/allegra/5.jpg" onmouseover="changeimage(myimages[4],this.href, 'targetimage')"><img src="i/allegra/4s.jpg" width="180" height="85" hspace="0" vspace="0" border="0"></a><a href="file:///E|/i/allegra/4.jpg" onmouseover="changeimage(myimages[3],this.href, 'targetimage')"><img src="i/allegra/5s.jpg" width="180" height="85" hspace="0" vspace="0" border="0" /></a></p> </div></td></tr> <tr> <td valign="top" bgcolor="#EFEFED"><br /> <p align="left" class="style9"><br /> <br /> </p></td> </tr> </table> <p align="center"> </p> </body> </html> Hello! I am playing with CSS3 transitions to show/hide a DIV element. The application will be for a newsletter which will allow a user to show and hide article content. There will be multiple articles. I have a <DIV id="article1" class="content"> and the default height is 0px. When someone clicks the "show/hide article" link I set the height to 250px. A CSS transition on the content class (height) adds a smooth change from 0px to 250px. I have rigged up a simple Javascript function so that when someone clicks the "show/hide article" link, it checks the height of the DIV. If the div is 0px, it should expand the content, if not, it should shrink it. It works when you click the link the first time (i.e. the content div height is set to 250px and the transition works). But when you click it again, it does not set the height to 0px in order to hide the content. I think there is something wrong with the validation of document.getElementById(articleID).style.height ? Any ideas? Thank you! Code: Code: <!DOCTYPE html>
<html land="en">
<head>
<script language="javascript" type="text/javascript">
function showhideContent(articleID) {
if(document.getElementById(articleID).style.offsetHeight = '0px'){
document.getElementById(articleID).style.height = '250px';
}
else{
document.getElementById(articleID).style.height = '0px';
}
}
</script>
<style type="text/css">
p {
margin:10px;
font-size:12px;
}
h1 {
margin:10px;
}
body {
background-color:lightgrey;
font-family:Arial;
font-size:12px;
}
#newsletter {
width:500px;
border:solid;
border-width:1px;
border-color:black;
background-color:white;
text-align:left;
font-size:11px;
}
#header {
height:125px;
}
#footer {
height:50px;
background-color:#330033;
}
#headerbar{
background-color:lightblue;
height:35px;
overflow:hidden;
font-size:12px;
-webkit-transition: background-color 1s;
}
#headerbar:hover{
background-color:#3399FF;
}
.content{
background-color:white;
height:0px;
overflow:hidden;
-webkit-transition: height 0.5s ease-in-out;
}
#expand{
background-color:red;
}
</style>
</head>
<meta charset="UTF-8">
<body>
<center>
<div id="newsletter">
<section id="header">
<img src="newsletter_header_test.jpg">
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem.
</p>
<article>
<section id="headerbar">
<div style="float:left;">
<h1>Introducing: the first article</h1>
</div>
<div style="float:right;">
<p>
<a id="expand" href="#" onClick="javascript:showhideContent
('article1');return false;">Show/Hide Article</a>
</p>
</div>
</section>
<div>
<section id="article1" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis augue, nec cursus metus. Proin dictum,
velit vel vulputate vulputate, ante sem iaculis risus, at faucibus nibh tellus et ante. Vivamus quis enim nec arcu
dictum molestie non quis ipsum.
<br><br>
Proin vel mi eget sapien tincidunt pretium et non eros. Nullam vitae lacus at tortor volutpat feugiat. Vivamus
venenatis risus in urna aliquet laoreet tempus diam consequat. Praesent viverra placerat venenatis. Quisque arcu
nisl, congue sed blandit ut, suscipit eu velit. Nam quam massa, sollicitudin et elementum at, tempus nec eros.
Etiam eget tortor condimentum metus accumsan dignissim eu sed sem. Quisque ultricies volutpat mauris, nec cursus
<br><br>
sapien laoreet ut. Maecenas volutpat porta enim et tincidunt. Sed vel lectus eget dolor dictum ultrices in in
mauris. Praesent laoreet velit vitae est vulputate a varius lorem eleifend.
</p>
</section>
</div>
</article>
<br>
<br>
<section id="footer">
<p>footer</p>
</section>
</div>
</center>
</body>
</html>
hi everyone im here again begging for your help im innocent in this field is there a javascript for setting up a limit in form submit attempts by which someone's attempts can be reset for given time? Shall we say you could try again after 10minutes or tommorow or whatsoever. for example in my form: <form blahblahblah...> <input value=""...blahblahblah/> (then here it goes my problem, if the input value above IS NOT EQUAL to "MYUSERNAME" then limit the form submission attempts to 10 tries, else a warning box will appear saying "You have reach the maximum tries per day") <input type="submit" value="Submit"/> </form> thank you so much and may the God Bless you for your kindness! 1.I want to retain the value of the item selected from the drop down list even if the validation fails 2. The input element should be hghlighted red in colour which fails the validation <html> <script type="text/javascript"> <!-- function validate_form1 ( ) { valid = true; if ( document.contact_form1.question1.value=="" || document.contact_form1.question2.value == "" ) { alert ( "Select at least one option." ); //document.getElementById("question1").focus(); document.getElementById('contact_form1').question1.focus(); valid = false; } return valid; } function validate_form2 ( ) { valid = true; if ( document.contact_form2.question1.value=="" || document.contact_form2.question2.value == "" ) { alert ( "Select at least one option." ); //document.getElementById("question1").focus(); valid = false; } return valid; } //--> </script> <table border="5" width="300"> <tr> <td> <form name="contact_form1" action="DBsaving.php" method="post" onSubmit="return validate_form1 ( );"> 1. Question <select name="question1"><option selected="q1" value="">Select One...</option><option value="1">Yes</option><option value="2">No</option></select><br /><br /> 2. Question <select name="question2"><option selected="selected" value="">Select One...</option><option value="1">Yes</option><option value="2">No</option></select><br /><br /> 3. Faculty ID : <textarea name="comments" rows="2" cols="4"></textarea> <input type="submit" value="Submit" /> </form> </td> <td> <form name="contact_form2" action="DBsaving.php" method="post" onSubmit="return validate_form2 ( );" > 1. Question <select name="question1"><option selected="q1" value="">Select One...</option><option value="yes1">Yes</option><option value="no1">No</option></select><br /><br /> 2. Question <select name="question2"><option selected="selected" value="">Select One...</option><option value="yes">Yes</option><option value="no">No</option></select><br /><br /> 3. Faculty ID : <textarea name="comments" rows="2" cols="4"></textarea> <input type="submit" value="Submit" /> </form> </td> </tr> </table> </html> I have a validation issue. I need the input fields to highlight yellow if no text has been entered and when the form is submitted the error message displays to check the highlighted fields. I get the input boxes to highlight when there is no text but on submit the form goes to the next page without the error alert message. Any suggestions would be appreciated. My HTML page: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Filename: works.htm
Supporting files:
-->
<!-- #BeginEditable "doctitle" -->
<title>Wizard Works Order Form</title>
<!-- #EndEditable -->
<link href="ww.css" rel="stylesheet" type="text/css" />
<script src="functions.js" type="text/javascript"></script>
<script src="valid.js" type="text/javascript"></script>
</head>
<body>
<form id="order" action="file:///F:/JavaScript/case4/done.htm" onsubmit="return validateForm()" method="post">
<div id="page">
<div id="head">
<img alt="Wizard Works" src="logo.jpg" />
</div>
<ul id="links">
<li><a href="#">Home</a></li>
<li><a href="#">Assortments</a></li>
<li><a href="#">Firecrackers</a></li>
<li><a href="#">Fontains</a></li>
<li><a href="#">Cones</a></li>
<li><a href="#">Rockets</a></li>
<li><a href="#">Sparklers</a></li>
<li><a href="#">Online Store</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Your Account</a></li>
<li><a href="#">Safety</a></li>
<li><a href="#">Tech Support</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="webform">
<fieldset id="purchase">
<legend>Order</legend>
<label id="produtLab" class="required" for="product">1) Product</label>
<select id="product">
<option value="">Select a Product</option>
<option value="3.5">Green/Purple Fountain: $3.50 ea.</option>
<option value="4.95">Silver Cone: $4.95 ea.</option>
<option value="6.95">Glitter Cone: $6.95 ea.</option>
<option value="9.95">Glittering Stars: $9.95 ea.</option>
<option value="19.95">Fountain Kit: $19.95 ea.</option>
<option value="29.95">Fountain Kit Deluxe: $29.95</option>
<option value="39.95">Giant Fountain: $39.95</option>
</select>
<br />
<label id="qtyLab" class="required" for="qty">2) Quantity</label>
<select id="qty">
<option value="">Select a Quantity</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5"> 5</option>
<option value="6"> 6</option>
<option value="7"> 7</option>
<option value="8"> 8</option>
<option value="9"> 9</option>
<option value="10">10</option>
</select>
<br />
<label id="shippingLab" class="required" for="shipping">2) Shipping</label>
<select id="shipping">
<option value="">Select a Shipping Option</option>
<option value="4.95">Standard ($4.95)</option>
<option value="8.95">Express ($8.95)</option>
<option value="12.95">Next Day ($12.95)</option>
</select>
<br />
<label id="totalLab" for="total">3) Total Calculated Cost</label>
<input id="total" readonly="readonly" size="20" type="text" />
</fieldset>
<fieldset id="contact">
<legend>Contact Information</legend>
<label id="fnameLab" class="required" for="fname">4) First Name</label>
<input id="fname" size="20" type="text" class="validate" onblur="changeColor(this)" />
<br />
<label id="lnameLab" class="required" for="lname">5) Last Name</label>
<input id="lname" size="20" type="text" onblur="changeColor(this)" />
<br />
<label id="addressLab" class="required" for="address">6) Address</label>
<textarea id="address" cols="20" rows="5"onblur="changeColor(this)" ></textarea>
<br />
<label id="phoneLab" class="required" for="phone">7) Phone (nnn) nnn - nnnn</label>
<input id="phone" size="20" type="text" onblur="changeColor(this)" />
</fieldset>
<fieldset id="credit">
<legend>Payment Information</legend>
<label for="ccard">8) Credit Card</label>
<select id="ccard">
<option value="ae">American Express</option>
<option value="dc">Diners Club</option>
<option value="disc">Discover</option>
<option value="mc">MasterCard</option>
<option value="visa">Visa</option>
</select>
<br />
<label id="cholderLab" class="required" for="cholder">9) Card Holder</label>
<input id="cholder" size="20" type="text"onblur="changeColor(this)" />
<br />
<label id="cnumLab" class="required" for="cnum">10) Card Number</label>
<input id="cnum" size="20" type="text"onblur="changeColor(this)" />
<br />
<label class="required">11) Expiration Date</label>
<select id="cmonth" name="cmonth">
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</option>
<option>10</option><option>11</option><option>12</option>
</select>
/
<select id="cyear" name="cyear">
<option>2010</option><option>2011</option><option>2012</option>
<option>2013</option><option>2014</option><option>2015</option>
</select>
</fieldset>
<input id="sbutton" type="submit" value="Submit Order" onclick="returm validateForm();return false;"/>
</div>
</div>
</form>
</body>
</html>
My valid.js code: Code: /*
Functions List:
initForm()
Initiates the Web form for use by the customer
calcCost()
Calculates the cost of the customer order
validLengths()
Validates that empty values have been entered for required
fields
testLength(field)
Tests the length of the text string in the specified field
validPatterns()
Validates that the field values match their regular expressions
testPattern(field, reg)
Tests a text string against a specified regular expression
validCNum()
Tests that the specified credit card number passes the Luhn formula
validateForm()
Performs a validation test on all of the fields in the form
*/
window.onload = initForm;
var wform;
var productIndex = 1;
var qtyIndex = 1;
var shipIndex = 1;
function initForm() {
wform = document.forms[0];
wform.product.onchange = calcCost;
wform.qty.onchange = calcCost;
wform.shipping.onchange = calcCost;
wform.onsubmit = validateForm;
}
function calcCost() {
productIndex = wform.product.selectedIndex;
productCost = parseFloat(wform.product.options[productIndex].value);
qtyIndex = wform.qty.selectedIndex;
qtyVal = parseFloat(wform.qty.options[qtyIndex].value);
shipIndex = wform.shipping.selectedIndex;
shipVal = parseFloat(wform.shipping.options[shipIndex].value);
if (productIndex != 0 && qtyIndex != 0 && shipIndex != 0) {
wform.total.value = "$"+(productCost*qtyVal+shipVal).toFixed(2);
}
}
function validLengths() {
var isValid = true;
if (testLength(wform.total)== false) isValid = false;
if (testLength(wform.fname)== false) isValid = false;
if (testLength(wform.lname)== false) isValid=false;
if (testLength(wform.address)== false) isValid=false;
if (testLength(wform.phone)== false) isValid=false;
if (testLength(wform.cholder)== false) isValid=false;
if (testLength(wform.cnum)== false) isValid=false;
return isValid;
}
function testLength(field) {
var isValid = true;
if (field.value.length == 0) {
document.getElementById(field.id+"contact").style.bgcolor="yellow";
isValid = false;
} else {
document.getElementById(field.id+"contact").style.bgcolor="white";
}
return isValid;
}
function validPatterns() {
var isValid = true;
phonereg = /^\(?\d{3}[\)-]?\s?\d{3}[\s-]?\d{4}$/;
if (testPattern(wform.phone, phonereg) == false) isValid = false;
creditType = wform.ccard.selectedIndex;
switch (creditType) {
case 0: cregx = /^3[47]\d{13}$/; break;
case 1: cregx = /^30[0-5]\d{11}$|^3[68]\d{12}$/; break;
case 2: cregx = /^6011\d{12}$/; break;
case 3: cregx = /^5[1-5]\d{14}$/; break;
case 4: cregx = /^4(\d{12}|\d{15})$/; break;
}
if (testPattern(wform.cnum, cregx) == false) isValid = false;
return isValid;
}
function testPattern(field, reg) {
var isValid = true;
wsregx = /\s/g;
var fv =field.value.replace(wsregx,"");
if (reg.test(fv) == false) {
isValid = false;
document.getElementById(input.id+"fname").style.bgcolor="yellow";
} else {
document.getElementById(input.id+"fname").style.bgcolor="white";
}
return isValid;
}
function validCNum() {
var isValid = true;
wsregx = /\s/g;
var fv = wform.cnum.value.replace(wsregx,"");
if (luhn(fv)==false) {
isValid = false;
document.getElementById("cnum").style.bgcolor="yellow";
} else {
document.getElementById("cnum").style.bgcolor="white";
}
return isValid;
}
function changeColor(field) {
var fv = field.value;
if (fv.length==0) {
field.style.background="yellow";
} else {
field.style.background="white";
}
}
function validateForm() {
var vLengths = validLengths();
var vPatterns = validPatterns();
var vCNum = validCNum();
var vForm = vLengths && vPatterns && vCNum;
if (!vForm) {
alert("Check the highlighted items in the form for missing/invalid data");
return false;
} else {
return true;
}
}
Hi guys, just need help so when there is no input into card number, postcode, what are you after, delivery address an error message comes up. Also I need to make it so when someone puts numbers in the first and last name or letters in the postcode it will come up error. I have done this for first and lastname but when I copy my code and try and put it on the others then no javascript works. thanks for your help Code: <html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@");
var age=document.getElementById("age").value;
var fname=document.getElementById("fname").value;
var lname=document.getElementById("lname").value;
var ccn=document.getElementById("ccn").value;
submitOK="true";
if (fname.length<1)
{
alert("Please Enter a Valid First Name");
submitOK="false";
}
if (isNaN(age)||age<1||age>100)
{
alert("Age Must be between 1 and 100");
submitOK="false";
}
if (lname.length<1)
{
alert("Please Enter a Last Name");
submitOK="false";
}
if (isNaN(age)||age<1||age>100)
{
alert("Age Must be between 1 and 100");
submitOK="false";
}
if (at==-1)
{
alert("Not a Valid Email Address");
submitOK="false";
}
if (submitOK=="false")
{
return false;
if (ccn.length>16)
{
alert("Credit Card Number is False");
submitOK="false";
}
}
}
</script>
</head>
<body>
<form action="tryjs_submitpage.htm" onsubmit="return validate()">
Name : <input type="text" id="fname" size="20"><br />
Last Name : <input type="text" id="lname" size="20"><br />
Age: <input type="text" size="2" id="age" maxlength="2">
Email: <input type="text" id="email" size="20"><br />
<table><tr>
<td><p>Type of Card</p></td>
<td><form action="21">
<select name="cars">
<option value="season"> </option>
<option value="season">Mastercard</option>
<option value="season">Diners Club</option>
<option value="season">Visa</option>
</select></form></td></tr>
</table>
<table><tr>
<td><p>Expiry Date</p></td>
<td><form action="21">
<select name="cars">
<option value="season"> </option>
<option value="season">2010</option>
<option value="season">2011</option>
<option value="season">2012</option>
</select></form></td></tr>
</table>
Card Number : <input type="text" id="ccn" size="20"><br />
Postcode: <input type="text" size="2" id="postcode" maxlength="4">
Delivery Address: <input type="text" id="da" size="20"><br />
Suburb: <input type="text" id="suburb" size="10"><br />
<table><tr>
<td><p>What are you after</p></td>
<td><form action="21">
<select name="cars">
<option value="poker products"> </option>
<option value="poker chips">Poker Table</option>
<option value="poker table">Poker Chips</option>
<option value="poker table">Both</option>
</select></form></td></tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
for some reason this is not working can anyone tell me why? Code: <script language="JavaScript" type="text/javascript">
function swap(nam,im)
{
eval("document." + nam + ".src=" + im + ".src");
}
van_b = new Image; van_b.src = "images/bus_menu2/busmenub_Passvan01on.jpg";
van_a = new Image; van_a.src = "images/bus_menu2/busmenub_Passvan01off.jpg";
excoach_b = new Image; excoach_b.src = "images/bus_menu2/busmenuB_Excoach01on.jpg";
excoach_a = new Image; excoach_a.src = "images/bus_menu2/busmenuB_Excoach01off.jpg";
specialcoach_b = new Image; specialcoach_b.src = "images/bus_menu/busmenu_specialtycoach01on.jpg";
specialcoach_a = new Image; specialcoach_a.src = "images/bus_menu/busmenu_specialtycoach01off.jpg";
minicoach_b = new Image; minicoach_b.src = "images/bus_menu2/busmenuB_minicoach01on.jpg";
minicoach_a = new Image; minicoach_a.src = "images/bus_menu2/busmenuB_minicoach01off.jpg";
motorcoach_b = new Image; motorcoach_b.src = "images/bus_menu2/busmenub_motorcoach01on.jpg";
motorcoach_a = new Image; motorcoach_a.src = "images/bus_menu2/busmenub_motorcoach01off.jpg";
function checkForm()
{
frm = window.document.contactForm;
if (frm.pickupmonth.value =='')
{
alert('Please enter valid pickup Month');
frm.pickupmonth.focus();
return false;
}
if(frm.pickupday.value== "")
{
alert('Please enter pickup Day');
frm.pickupday.focus();
return false;
}
if(frm.pickupyear.value == "")
{
alert('Please enter pickup Year');
frm.pickupyear.focus();
return false;
}
if(frm.pickupaddress.value == "")
{
alert('Please enter pickup Address');
frm.pickupaddress.focus();
return false;
}
if (frm.pickupcity.value== "")
{
alert('Please enter pickup City');
frm.pickupcity.focus();
return false;
}
if (!validateInt(frm.pickupzip.value))
{
if(frm.pickupzip.value =="" )
alert('Please enter pickup Zip Code');
frm.pickupzip.value="";
frm.pickupzip.focus();
return false;
}
if(frm.pickuphour.value == "")
{
alert('Please enter pickup Hour');
frm.pickuphour.focus();
return false;
}
if(frm.pickupminute.value == "")
{
alert('Please enter pickup Minute');
frm.pickupminute.focus();
return false;
}
if(frm.pickupam.value == "")
{
alert('Please enter pickup AM or PM');
frm.pickupam.focus();
return false;
}
if(frm.dropoffaddress.value == "")
{
alert('Please enter dropoff Address');
frm.dropoffaddress.focus();
return false;
}
if(frm.dropoffcity.value == "")
{
alert('Please enter dropoff City');
frm.dropoffcity.focus();
return false;
}
if (!validateInt(frm.dropoffpzip.value))
{
if(frm.dropoffpzip.value =="" )
alert('Please enter a valid dropoff Zip Code');
frm.dropoffpzip.value="";
frm.dropoffpzip.focus();
return false;
}
if(frm.arrivalhour.value == "")
{
alert('Please enter arrival Hour');
contactForm.arrivalhour.focus();
return false;
}
if(frm.arrivalmin.value == "")
{
alert('Please enter arrival Minute');
frm.arrivalmin.focus();
return false;
}
if(frm.arrivalam.value == "")
{
alert('Please enter arrival AM or PM');
frm.arrivalam.focus();
return false;
}
if(frm.vehicle.value == "")
{
alert('Please enter Vehicle Type');
frm.vehicle.focus();
return false;
}
if(frm.passengers.value == "")
{
alert('Please enter Amount of Passengers');
frm.passengers.focus();
return false;
}
if(frm.guestname.value == "")
{
alert('Please enter Name');
frm.guestname.focus();
return false;
}
if (!validateInt(frm.guestphone.value))
{
if(frm.guestphone.value =="" )
alert('Please enter a valid Telephone number');
frm.guestphone.value="";
frm.cguestphone.focus();
return false;
}
if(!validateEmail(frm.guestemail.value)
{
alert('Please enter proper email address!');
frm.guestemail.focus();
return false;
}
function validateInt(val)
{
switch (isInteger(val))
{
case true:
return true;
break;
case false:
alert("Please enter numbers only!");
return false;
}
}
function isInteger (s)
{
var i;
if (isEmpty(s))
if (isInteger.arguments.length == 1) return 0;
else return (isInteger.arguments[1] == true);
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (!isDigit(c)) return false;
}
return true;
}
function isEmpty(s)
{
return ((s == null) || (s.length == 0))
}
function isDigit (c)
{
return ((c >= "0") && (c <= "9"))
}
function validateEmail(email){
// This function is used to validate a given e-mail
// address for the proper syntax
if (email == ""){
return false;
}
badStuff = ";:/,' \"\\";
for (i=0; i<badStuff.length; i++){
badCheck = badStuff.charAt(i)
if (email.indexOf(badCheck,0) != -1){
return false;
}
}
posOfAtSign = email.indexOf("@",1)
if (posOfAtSign == -1){
return false;
}
if (email.indexOf("@",posOfAtSign+1) != -1){
return false;
}
posOfPeriod = email.indexOf(".", posOfAtSign)
if (posOfPeriod == -1){
return false;
}
if (posOfPeriod+2 > email.length){
return false;
}
return true
}
</script>
Hi. I am trying to do some sim[ple form validation using javascript. I have a simple html file 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>Send Card</title> <script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script> </head> <body> <form action="getName.php" onsubmit="return validate_form(this);"> Receiver (To): <input type="text" name="name"><br> Sender (From): <input type="text" name="sender"><br> Email: <input type="text" name="email"><br> <input type="submit" value="Submit"> </form> </body> </html> Which calls up my javascript and php file (The php file should only be used when the javascript has found no errors). Now I have a js file which does some validation Code: <script type="text/javascript">
function validate_required(field,alerttxt) {
with (field) {
if (value==null||value=="") {
alert(alerttxt);
return false;
}
else {
return true;
}
}
}
function validate_email(field,alerttxt) {
with (field) {
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) {
alert(alerttxt);
return false;
} else {
return true;
}
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required(name,"Please specify your name!")==false) {
name.focus();
return false;
}
if (validate_required(sender,"Please specify the receivers name!")==false) {
sender.focus();
return false;
}
if (validate_required(email,"Email must be filled out!")==false) {
email.focus();
return false;
}
if (validate_email(email,"Not a valid e-mail address!")==false) {
email.focus();
return false;
}
}
}
</script>
When I run it on my server, I get the form and enter nothing into it, I just click submit. However, it goes straight to the php file and brings up my flash movie, which it shouldnt do. When nothing is entered, the js file should return the error. I thought I had everything set up correctly, but obviously not. Can someone see where I am going wrong? cheers I am new to this forum.. and I am hoping to get help with this javascript validation for my form for my assignment. trying to validate multiple fields. I have never done javascript, so with my limited understanding from Google, I put together code snippets. Problems: 1. How can I get one message box when the user presses submit indicating all failed validation at one time 2. The expired credit card validation doesnt work 3. Cant seem to find a good "confirm password" script 3. The form does not submit if all the fields are correct. <script language="javascript"> <!-- function checkAge() { var bday=parseInt(document.forms[0].txtBday.value); var bmo=(parseInt(document.forms[0].txtBmo.value)-1); var byr=parseInt(document.forms[0].txtByr.value); var byr; var age; var now = new Date(); tday=now.getDate(); tmo=(now.getMonth()); tyr=(now.getFullYear()); { if((tmo > bmo)||(tmo==bmo & tday>=bday)) { age=(tyr-byr) } else { age=(tyr-(byr+1)) } if (age<18) { alert ("you must be over 18 years"); return false; } else { return true; } } } //--> function checkEmail() { var x=document.getElementById("email").value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } { return true; } } function onlyNumbers(evt) { var e = event || evt; // for trans-browser compatibility var charCode = e.which || e.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; { return true; } } function checkCardNumber() { var x = document.getElementById("cardNumber").value; if (x.length<16) { alert("Your Credit Card Number must be 16 digits"); return false; } { return true; } } function checkSecurityCode() { var y = document.getElementById("securityCode").value; if (y.length<3) { alert("Your Security number must be three digits"); return false; } { return true; } } function ValidateExpDate() { var ccExpYear = 20 + $F('<%= expYear.ClientID%>'); var ccExpMonth = $F('<%= expMonth.ClientID%>'); var expDate=new Date(); expDate.setFullYear(ccExpYear, ccExpMonth, 1); var today = new Date(); if (expDate<today) { alert("card expired"); // Credit Card is expire return false; } else { // Credit is valid return true; } } function runall() { checkAge(); checkEmail(); checkCardNumber(); checkSecurityCode(); { return false;} } </script> Hi, validation for pin must not be allow given below conditions 6 rising consecutive numbers(e.g 123456,456789 etc) 6 Descending consecutive numbers (eg. 654321,987654) All same digit (eg 111111,222222) Same digit appearing 3 or more time in pin code (eg:121212,1111432) Hello Every1 I need to edit the below form to use JavaScript to Validate if thr Title was put or Not .. its a template i use at my site to add comment and i want the Title to be Requier .Javascript seems the easiest way for me but dont know how. PHP Code: <{if $commentany.com_itemid}> <form action="comment_post.php" method="POST"> <input type="hidden" name="com_itemid" value="<{$commentany.com_itemid}>"> <input type="hidden" name="XOOPS_TOKEN_REQUEST" value="<{$commentany.xoops_token_request}>"> <table class='outer' cellspacing='1' style="margin-top:2em;"> <tr> <th colspan="2"><{$smarty.const._MB_COMMENTANY_LANG_NEW_COMMENT}></th> </tr> <{* <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_RULE}></td> <td class='odd' align='left'> <{$commentany.rule_text}> </td> </tr> *}> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_ICON}></td> <td class='odd' align='left'> <{foreach item=i from=$commentany.com_icon}> <input type="radio" name="com_icon" value="<{$i}>"><img src="<{$smarty.const.XOOPS_URL}>/images/subject/<{$i}>"> <{/foreach}> </td> </tr> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_TITLE}></td> <td class='odd' align='left'> <input type="text" name="com_title" size="64" maxlength="255" value="<{$xoops_default_comment_title}>"> </td> </tr> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_TEXT}></td> <td class='odd' align='left'> <{xoopsdhtmltarea name="com_text" cols=50 rows=4}> </td> </tr> <{* <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_OPTION}></td> <td class='odd' align='left'> <input type="checkbox" name="dosmiley" value="1" checked><{$smarty.const._CM_DOSMILEY}><br/> <input type="checkbox" name="doxcode" value="1" checked><{$smarty.const._CM_DOXCODE}><br/> <input type="checkbox" name="dobr" value="1" checked><{$smarty.const._CM_DOAUTOWRAP}><br/> </td> </tr> *}> <tr> <td class='head' align='left'></td> <td class='even' align='left'> <input type='submit' class='formButton' name='com_dopreview' id='com_dopreview' value='<{$smarty.const._MB_COMMENTANY_LANG_PREVIEW}>' /> <input type='submit' class='formButton' name='com_dopost' id='com_dopost' value='<{$smarty.const._MB_COMMENTANY_LANG_SUBMIT}>' /> </td> </tr> </table> <input type="hidden" name="dohtml" value="0" /> <input type="hidden" name="dosmiley" value="1" /> <input type="hidden" name="doxcode" value="1" /> <input type="hidden" name="dobr" value="1" /> </form> <{/if}> <{$commentsnav|replace:'button':'hidden'}> this is how i call the editor: Code: <!-- editor --> <? include "js/editor/buttons.php"; ?> <iframe id="textbox" class="Eddietor" src="js/editor/editor.php"></iframe><br /> <input type="hidden" id="content" name="content"> <!-- /editor --> and this is editor.js: Code: window.onload = function()
{
Editor = document.getElementById('textbox').contentWindow.document;
Editor.designMode = "on";
document.forms[0].onsubmit = function()
{
var text = document.getElementById('text');
text.value = Editor.body.innerHTML;
}
}
function doColor(colour)
{
document.getElementById("textbox").contentWindow.focus();
document.getElementById("textbox").contentWindow.document.execCommand("forecolor",false, colour);
}
function doClick(command) {
document.getElementById("textbox").contentWindow.focus();
document.getElementById("textbox").contentWindow.document.execCommand(command, false, null);
}
function doLink() {
var mylink = prompt("URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById("textbox").contentWindow.focus();
document.getElementById('textbox').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('URL:', 'http://');
document.getElementById("textbox").contentWindow.focus();
document.getElementById('textbox').contentWindow.document.execCommand("InsertImage", false, myimg);
}
another script i made is having problems with the ID="textbox" , it might be fixed if i change id and start using name="textbox" instead, but i don't know how to do this in js. need to edit the editor.js and change id="textbox"->to->name="textbox" can anyone help me? i got no idea how to use the getElementByName thingie , i'm trying to do this for 4 hours already and still no go. appreciated. Hello, I am using the following javascript to validate a text field on my site: Code: function checkExpire(form)
{
// regular expression to match required date format
re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
if(form.txtExpire.value != '' && !form.txtExpire.value.match(re)) {
alert("Invalid date format: " + form.txtExpire.value);
form.txtExpire.focus();
return false;
}
return true;
}
The above code works fine for the following situations: The default value of the field is: __/__/____ The JavaScript code above will not accept that for a field value. If a user inputs the following for a date 5_/7_/11__ for May 7th, 2011 the JavaScript will not accept the format it must be entered as: 05/07/2011 (in order to clear the validation)... NOW HERE IS WHAT I NEED THE JAVASCRIPT TO DO: 1) It needs to accept __/__/____ as a value that can be inserted into the database 2) still retains the code above so 5_/7_/11__ is not an acceptable date but 05/07/2011 will work just fine 3) Now... the default value of the text field in Internet Explorer is __/__/____ but the value is blank in Mozilla Firefox so in an instance where the text field is completely blank I need the JavaScript to assign the value '__/__/____' ... SO FAR: I did at one point get both the validation working so it worked for rules 1 and 2 mentioned above but I completely destroyed it while trying to integrate rule 3 into the functionality. So I know this can be accomplished with a series of if / else statements as well as assigning a value to a form object to handle rule# 3 ... I am just a novice getting ready to turn intermediate in JavaScript so any help, guidance, reference or example / sample code you could give me would be much appreciated. Thank your for your assitance and I hope you are all doing well. Cordially, aRK This are my codes.. var add = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var email = form.txtEmail.value; if (add.test(email) = false) { alert("Please enter a valid email."); return false; } return true; } bt it wun work.. pls help.. Hi Guys, I have trying to validate my form using JavaScript. On blur of the a text box I am calling a function in JavaScript which checks if the text box is empty or not.... If the text box is empty it display an appropriate error message. The issue I am facing is that, for the first time if any user does not enter any value in the text box, the JS function is invoked and an appropriate error message is displayed.... So when the user tried to enter a value in the text box, a drop down list appear from the past forms data. (The drop down value appear because the user has already filled in the form in the past. Hence the Browser remember the data filed in, and displays it as a drop down list.) This allows the user to select any values from the drop down list to fill in the box.* After the user has selected the appropriate value from the drop down and takes its mouse cursor and navigates to another text box in the form, the first error message does not disappear. The form does not recognize that the value filed has already been filled in the first filed.* If the user actually types into the field it recognizes that the text box has a filed is filled. Please may I know how to solve this issue. |
|||||||