|
JavaScript - Help - Html5 Validation Javascript Option
On all my html 5 pages of http://www.countyfairgrounds.net I have a drop down javascript menu for selecting a state. The thing has worked for years fine. However in switching to html5 the validator will not validate it. The are saying the option tag is obsolete. First I don't java, I do html5 and css3 currently. Ca anyonepoint me to a script dropdown that I can cut and paste - that will validate?
Similar TutorialsI have a code that will randomly select a div from a list and inside of that div i want there to be a sound file. How would I use html5 and javascript to make it so that when a user clicks a button it would play whatever sound was associated with that button? Code: <div id="randomdiv1" class="article_example_div"> <embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed> </div> I am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration
- returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered
This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks Hello, I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on. Thanks for help! Here's a draft of what it looks like so far in the front end with my grids still in place: HTML file: Code: <div id="slider" class="span-24 last">
<div id="slide2Left"> ←</div>
<div id="slideFrame">
<div id="slideBoard">
<!-- the slides -->
<div class="slidePoint">
Slide 1 Goes Here
</div>
<div class="slidePoint">
Slide 2 Goes Here
</div>
<div class="slidePoint">
Slide 3 Goes Here
</div>
<!-- end slideBoard -->
</div>
<div id="slideReference"></div>
<!-- end slideFrame -->
</div>
<div id="slide2Right" class="last"> →</div>
<!-- end slider section -->
</div>
Javascript code Code: // JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();
var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;
//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;
//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});
$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});
//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});
CSS Code Code: /* CSS Document */
#slider {
position: relative;
margin: 79px 0 50px 0;
height: 500px;
padding-bottom: 50px;
border-bottom: 1px solid #9B9B9B;
}
#slideFrame {
width:870px;
left: 40px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#test {
width:30px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#slideBoard {
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:400px;
margin:0px;
padding:0px;
background: #ccc;
opacity: .3;
}
.slidePoint {
width:870px;
min-height:400px;
height:410px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p {
padding:5px;
}
#slide2Left, #slide2Right{
position:absolute;
top: 200px;
bottom: 5px;
cursor:pointer;
width:20px;
height:20px;
color:#9B9B9B;
border:#9B9B9B solid 1px;
border-radius: 5px;
padding:3px;
text-align:center;
display: inline-block;
}
#slide2Right{
left: 920px;
}
#slideReference {
position:absolute;
width: 770px;
min-height:10px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber {
border-radius: 2px;
background:#929292;
color:#ffffff;
cursor:pointer;
display:inline-block;
padding:3px;
margin:3px;
text-align:center;
min-height:15px;
min-width:15px;
}
I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he http://www.storiesinflight.com/html5/audio.html I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome. Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question. I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance: Code: <table>
<tr>
<td onmouseout="window.alert('you moused out of td');">
<img src="image0.gif" style="height:50px; width:50px;" />
</td>
</tr>
</table>
In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element. I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You. Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right. How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5 Code: <audio controls="controls"> <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" /> <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> THANKS!!!! Hi there, I am just writing to see if I can receive some help regarding an issue I'm having? I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such. I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/ Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page) Code: // ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;
// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
if (isPlaying !== false) {
var nextNote = 60000 / curTempo / 4;
// Turn off all lights on the tracker's row
$("#tracker li.track").removeClass("active");
// Light up the tracker on the current track
$("#tracker li.track.col_" + curNote).addClass("active");
// Find each active note, play it
var tmpAudio;
$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
tmpAudio = document.getElementById($(this).data('sound_id'));
if (!tmpAudio.paused) {
// Pause and reset it
tmpAudio.pause();
tmpAudio.currentTime = 0.0;
}
tmpAudio.play();
});
// Move the track forward
curNote = (curNote + 1) % 16;
} // if (isPlaying)
} // playTune
// Make a new hash
function buildHash() {
// Start it
var newhash = '';
// For each track, check and add in a 0/1 as appropriate
$(".playBar[id^=control] li.track").each(function(i){
newhash += $(this).is('.active') ? '1' : '0';
});
// Separate it
newhash += '|';
// Now, toss in the note
newhash += $('#temposlider').slider('value');
// Check and see if we really need to update
if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash
// Read in our hash
function parseHash() {
if (location.hash.length > 0) {
// Split it up, work it out, removing the actual hashmark
var pieces = location.hash.substring(1).split('|');
// Set the lights
var lights = pieces[0];
$(".playBar[id^=control] li.track").each(function(i){
// Make sure we haven't exceeded
if (i >= lights.length) return false;
// Check our location, turn on class if need be
if (lights.charAt(i) == '1') {
$(this).addClass('active');
}
});
// Set the tempo
if (typeof pieces[1] !== 'undefined') {
$('#temposlider').slider('value', parseInt(pieces[1]));
$('#tempovalue').innerHTML = pieces[1];
curTempo = parseInt(pieces[1]);
}
}
} // parseHash
// Clear it!
function clearAll() {
$(".playBar[id^=control] li.active").removeClass('active');
}
// Run on DOM ready
$(document).ready(function(){
// Process each of the audio items, creating a playlist sort of setup
$("audio").each(function(i){
// Make a self reference for ease of use in click events
var self = this;
// Make a sub-list for our control
var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
$ul.append('<li class="header">' + this.title + '</li>');
// Add 16 list items!
for (j = 0; j < 16; j++) {
var $li =
$('<li class="track col_'+j+'">'+self.id+'</li>')
.click(function(){
$(this).toggleClass('active');
buildHash();
})
.data('sound_id', self.id);
$ul.append($li);
} // for (i = 0; i < 16; i++)
// Append it up
$('<li>').append($ul).appendTo('#lights');
});
// Bind up a click for our button
$("#soundstart").click(function(){
if (isPlaying === false) {
// Start the playing!
curNote = 0;
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
// Change our display
this.innerHTML = "Stop";
} else {
clearInterval(isPlaying);
isPlaying = false;
$("#tracker li.track").removeClass("active");
$("audio").each(function(){
this.pause();
this.currentTime = 0.0;
});
this.innerHTML = "Play";
}
});
$('#clearall').click(clearAll);
$('#reload').click(parseHash);
// ===== Misc =====
// Build or read the hash
if (location.hash == '') {
// I was building this at load - but now, no, just to be safe
//buildHash();
} else {
parseHash();
}
// Show our value, now that we've built off of the hash
$('#tempovalue').html(curTempo);
// Make our tempo slider
$('#temposlider').slider({
'value': curTempo,
'min': 30,
'max': 170,
'step': 2,
'slide': function(e, ui) {
curTempo = ui.value;
$('#tempovalue').html(curTempo);
if (isPlaying !== false) {
clearInterval(isPlaying);
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
}
},
'stop': function(e, ui) {
buildHash();
}
});
});
How to make request "rtsp://localhost:554/sample_100kbit.mp4"? (in HTML5 or Javascript) I want to access video streaming data which source is present on Darwin server
Hi everyone, I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed. I have attached a picture as an example because its quite hard to explain! Any help would be appreciated! Thanks, Luke I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name. I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg. I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it. Any help appreciated. Hey, how do I make the following accessible if JS is disabled? Code: <select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;">
<option value="www.domain.com">Your Domain</option> </select>
Hello, I have a shopping cart that calculates shipping on products based on weight. What I'm wanting to do is use Javascript to scan the contents of the visitors shopping cart for a particular word, as well as scan the quantity of the product in the cart. The condition: If the product name = some string I want to compare AND if the quantity < some number I want to compare. If these two conditions are met, I wan't to hide a shipping option called 'Free Shipping' once the user clicks the Estimate Shipping & Tax button. Here is a link to the websites cart.php page: All Commercial Furniture.com - Shopping Cart The platform we use is a little limited, so they don't give us access to their PHP files. Having to find a workaround for right now. Please let me know if you need any info. Any point in the right direction would be great. 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");
Hi again all, back with another hopefully easy question to fix. Please check this out in Internet explorer: http://www.lindesigns.us/rma/rmaonline.html I googled for the answer, but could not come up with a good response in terms of my own script on how to make the return code fields EXPAND to full length when pressed like they do in firefox and chrome. Does anyone have a quick fix for this? It's all dynamically loaded except for the first 10 fields (Which i might as well take out anyway), so I'm thinking I have to put something in the javascript somewhere, just no idea what. Thanks a lot! -pcitech Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help function loadme(listVle){ // listVle is the List<SelectItem> var ele = document.getElementById('numadts'); for (var i=0;i<listVle.length;i++) { var elOpt = document.createElement('option'); var fldName = listVle.item(i).getAttribute('name'); // This line the problem is elOpt.text = fldName; elOpt.value = fldName; try { ele.add(elOpt, null); } catch(ex) { ele.add(elOpt); } } } and the HTML <BODY> <FORM> <select name="numadts" id="numadts" onclick="loadme()""> </select> </FORM> </BODY> i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist">
<select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
<option value="Baddeck">Baddeck</option>
<option value="Banff">Banff</option>
</select>
<select id="hotelnames" name="hotelnames" onChange="loadHotel();">
<option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
</select>
</form>
<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>
below is my javascript functions Code: function loadHotel() {
var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value;
window.frames["hotelframe"].location = destURL; }
var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
hotelslist.hotelnames.options.length=0;
switch(i)
{
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}
can some one please advise on a cross browser solution? thanks in advance. Omar. 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, 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) |
|||||||