|
JavaScript - Javascript Code For Validation
Hello Everyone
I am new on java script and I want to check the form blank text fields by using onChange event. Please guide me, is it possible or not....If possible then please send me the code. MY EMAILID IS dhiman.anurag1@gmail.com ........ THANK YOU Similar TutorialsHi, I've been helped out and given a great code for part of the validation, the problem is I have tried to adapt it on subsequent fields and my validation has stopped working. I am including the email validation which works and then confirm email, select sex and select year of birth, none of the latter three work. I would be extremely grateful for any assistance as I am completely stuck. Code:
<html>
<head>
<script type="text/javascript">
function check(form){
var email=form.email;
if(!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(email.value))){
form.email.value="";
alert("Please enter a valid email!");
myfield = email;
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
var cemail=form.cemail;
var cemailv=form.cemail.value;
form.cemail.value=cemailv;
if(!cemailv =="emailv") {
form.pword.value="";
alert("Your email entries do not match!");
myfield = ln;
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
var msex=form.msex;
var msexv=form.msex.value;
var fsex=form.fsex;
var fsexv=form.fsex.value;
if ((msexv==0 && fsexv==0)||(msexv=="" && fsexv=="")){
alert("Please select your sex!");
return false;
}
var DOBYear=form.DOBYear;
if((var DOBYear==0)&&(varDOBYear>1993)){
alert("You have either not selected a year of birth or are not over eighteen years old!");
myfield = DOBYear;
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
return true;
}
</script>
</head>
<body>
<form action="guestdetails.php" name="form" onsubmit="return check(this)" method="post">
<fieldset class="two">
<legend>Your Information:</legend>
<br />
<label class="two">Email:</label>
<input type="text" class="input" name="email" value="enter email address" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter email address':this.value;" size="30%" />
<br />
<br />
<label class="two">Confirm Email:</label>
<input type="text" class="input" name="cemail" value="confirm email address" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'confirm email address':this.value;" size="30%" />
<br />
<br />
<label class="two">Sex:</label>
<br />
<label class="two">Male</label>
<input type="radio" name="msex" value="male" onclick="1" />
<br />
<label class="two">Female</label>
<input type="radio" name="fsex" value="female" onclick="1" >
<br />
<br />
<select name="DoBYear" class="input">
<option value="0"
selected"selected">Year</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
</select>
<br />
<br />
<br />
</fieldset>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
<br />
<br />
</body>
</html>
I need help with a JavaScript form validation code. I am using the form validation code that is found on this page: http://www.dynamicdrive.com/dynamici...uiredcheck.htm The code works fine for me, but what I'm trying to do is add an additional condition to it. Currently, I just have the code set up to check if the user has enter their name, email, and phone number. But I also need it to validate something else only if a specific condition is true. On my form I have 2 different sets of Radio lists. One is called Function and the other radio list is called Design. If the user selects an option on one of the 2 lists, then it will be required for the user to also select an option from the 2nd list. The user CAN decide not to select anything from either radio list, but can not select from one list and NOT from the other. This is the If statement that I created (don't know if its correct or how to insert it to my current validation code). Code: <script type="text/javascript">
if (Function+Design<1 or == 400 or == 800)
{document.write("Please select both a Function and Design Type");}
</script>
Hi guys, I am working on my first validation form and although the Submit button works fine and puts me to the landing page, I don't get the alert, when nothing is checked. Please look at my code and help if you can. I really don't need anything fancy, just working 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" />
<meta name="keywords" content="social media survey, social media, media survey, survey, danish media, danish media survey" />
<meta name="description" content="This survey is a school project, not an actual research. It has been designed to figure out the connection between the gender of the Danish users and their knowledge and usage of social media." />
<script language="JavaScript" type="text/javascript"></script>
<script>
function isRadioButtonSelected(radioGrpName, errorMsg){
var radios = document.getElementsByName(radioGrpName);
var i;
for (i=0; i<radios.length; i=i+1 ){
if (radios[i].checked){
return true;
}
}
alert(errorMsg);
return false;
}
function validate(){
if(isRadioButtonSelected('gender', 'please select your gender')){
return true;
}
return false;
}
</script>
<title>The Social Media survey</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #8DC63F;
margin: 0;
padding: 0;
color: #000;
}
}
a img {
border: none;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #FFF;
margin-top: 30px;
background-color:transparent;
background-image:url(header.jpg);
background-attachment: fixed;
background-position:left center;
background-repeat:no-repeat;
}
.content {
padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
background-color:#E7EFB9;
font-family:Verdana, Geneva, sans-serif;
font-size: 13px;
}
.footer {
background: #FFF;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><img src="header1.jpg" alt="The Social Media survey" width="960" height="175" /></div>
<div class="content">
<form id="page1" action="http://projects.knord.dk/interaction/saveforminfo.aspx" onsubmit="return validate(); method="post">
<input type="hidden" name="surveyid" value="igakotra" />
<input type="hidden" name="landingpage" value="http://www.google.com" />
<input type="hidden" name="usecookie" value="true" />
<h3>1. Choose your gender</h3>
<input type="radio" name="gender" value="male" id="male"/><label for "male">Male</label>
<input type="radio" name="gender" value="female" id="female"/><label for "female">Female</label><br /><br />
<input type="submit" name="submit" value="Submit"/>
</form>
</div>
<div class="footer"><a href="page1.html"><img src="1page.jpg" width="960" height="99" alt="1/6 pages" /></div>
</div>
</body>
</html>
I really need it asap... thanks guys, you're awesome I am trying to set up a looping structure that tests to see if the user enters a value. If the textbox is null then a global variable is false otherwise a checkbox is checked and the global variable is true. below is what i have done so far, please assist me. var isValid = false; window.onload = startForm; function startForm() { document.forms[0].firstName.focus(); document.forms[0].onsubmit = checkEntries; alert("You have been added to the list") } function checkEntries() { var menus = new Array(); var formObject = document.getElementsByTagName('*'); for (var i=0; i < formObject.length; i++){ if (formObject[i] == "myform") menus.push(formObject[i]); if (document.forms[0].firstName.value.length==0 || document.forms[0].firstName.value.length == null){ isValid= false; alert("Please enter a first name"); } else (document.forms[0].check0.checked=true); isValid=true; if (document.forms[0].lastName=="" || document.forms[0].lastName== null){ alert("Please enter a last name"); isValid = false; } else (document.forms[0].check1.checked=true); isValid=true; if (document.forms[0].email=="" || document.forms[0].email== null) { alert("Please enter a valid email"); } else return (document.forms[0].check0.checked=true); isValid=true; if (document.forms[0].bDate=="" || document.forms[0].bDate== null) { isValid=false; alert("please make sure you enter a valid birth date."); } else (document.forms[0].check0.checked=true); isValid=true; } } here is the form html... <form name="myform" > <input type="checkbox" name="check0" class="check0" id="check0" > First: <input type="text" name="firstName" id="firstName"> <BR> <input type="checkbox" name="check1" class="check1" id="check1" > Last: <input type="text" name="lastName" id="lastName" ><BR> <input type="checkbox" name="check2" class="check2" id="check2" > E-Mail: <input type="text" name="email" id="email"> <BR> <input type="checkbox" name="check3" class="check3" id="check3" > Birthday (mm/dd/yyyy): <input type="text" name="bDate" id="bDate"> <BR> <input type="submit" value="Join our mailing List" /> </form> I'd like to add validation for 5 digits (numbers only) to this code: if($("#newvalue1").val() == "" && operator == "Equals" || $("#newvalue2").val() == "" && operator == "Range" ){ good = false; alert("5 digits please."); I have tried the code below, but it's not working. Could anyone help, please? Thanks! if($("#newvalue1").val() == "" && operator == "Equals" || $("#newvalue2").val() == "" && operator == "Range" || $("#newvalue2").val() !/^\d{5} && operator == "Range" ){ good = false; alert("5 digits please."); hi, i need US zip code formatting on my page. as zip code can be 5 digits or 5-4 digits, our requirement is that when user types in 6th digit, hyphen automatically gets added between 5th and 6th digit. ex: user enters 100161,it should become formatted as 10016-1 and then user can continue to add rest of digits. pls advice, highly appreciate. thanks 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 have a form which when the user hits "submit," the info in the textboxes is entered to a database. the only textbox which is not entered to the DB is an "age" textbox, which i need to verify to see if user is 18yrs or older. if user is not 18 years or older, they get an alert telling them they arent 18+. if they are, then the form submits this is my code so far, and i dont get any alerts when i enter an age younger than 18: Code: <head>
<script language="text/javascript">
var age;
document.getElementById("userage").value = age;
if (age >=18)
document.location="feedbacksaveanddisplay.php";
else {
alert('Sorry, we can not let you in!')
document.location="content.html";
}
</script>
</head>
<form method = "post" action = "FeedbackSaveAndDisplay.php">
<input type = "hidden" name = "user" value = "test"/>
<input type = "hidden" name = "pwd" value = "test"/>
<p>Enter your name, feedback, score</p>
<table>
<tr>
<td>Name</td>
<td>
<input type = "text" name = "name" style="width:150px; height:20px;" />
</td>
</tr>
<tr>
<td>Feedback</td>
<td>
<input type = "text" name = "feedback" style="width:150px; height:20px;" />
</td>
</tr>
<tr>
<td>Score</td>
<td>
<input type = "text" name = "score" style="width:150px; height:20px;" />
</td>
</tr>
<tr>
<td>Product</td>
<td>
<input type = "text" name = "product" style="width:150px; height:20px;" />
</td>
</tr>
<tr>
<td>Age</td>
<td>
<input type = "text" name = "age" style="width:150px; height:20px;" />
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "submit"
value = "Submit" />
</td>
</tr>
</table>
</form>
any tips/advice on how to fix my code? the problem i think is in the javascript... will greatly appreciate any help thanks!! I am trying to use some JavaScript code that I found by searching the web, my goal is to have a form with a "required" checkbox to force my users to acknowledge they have read my "Terms and Conditions" section. The code that I found ALMOST works properly - it does pop-up the "Alert" window when the checkbox is blank and the submit button is clicked... however, if the user closes the Alert window in order to click the checkbox in compliance, the "submit.form" command is executed before they have a chance. In other words, there is no "pause" in the execution of the script to allow the user to make the correction by clicking the checkbox. Here is the code: Code: <script LANGUAGE="JavaScript">
<!--
function ValidateForm(form){
ErrorText= "";
if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; }
if (ErrorText= "") { form.submit() }}
-->
</script>
Here is the HTML for the checkbox: Code: <input name="terms" type="checkbox" value="Yes" /> Here is the HTML for the submit button that calls the function: Code: <input type="submit" value="Continue" onclick="ValidateForm(this.form)" /> I've searched for other examples of code to accomplish this objective, but I'm hoping for a quicker solution by coming to the experts who can see the flaw in this JavaScript. Thanks for any help, Rob Working on college assignment, cant figure it out and need help! Basically a form that asks the user to fill in a valid email and password (ill give them the password), doesnt matter if it isnt secure, or if the email accepts dodgy emails (im just verifying the @ and a . and that is ok for the purpose of this. Anyway been trying with this code for ages now and cant see what is wrong but it isnt working, ive swapped it around and at times it does check that it is a valid email, sometimes it allows empty inputs. here is the code <script type="text/javascript"> function validateForm() { var x=document.forms["myForm"]["email"].value var y=document.forms["myForm"]["password"].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; } </script> I think i need something like && (y!="123") around the 'if' statement, but not a clue how or where it goes. Basically im going to set the password to 123 so dont have to allow for caps etc. Easiest way to do this, anyone plleeeeeaaasseee?? Kind regards Alan 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) 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;
}
}
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'}> 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>
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> 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>
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. 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 Hello Everyone. And thank you for your help in advance. The code below is a basic HTML form that utilizes some javascript validation and CSS styling. It checks to see if the textbox field Is EMPTY. If it is an alert box appears displaying a message that the e-mail field is BLANK. In addition, the empty text box field is outlined in RED. That is great but I ALSO require it to perform some e-mail validation (i.e.) if an incorrect e-mail address is entered an alert box is displayed notifying the user of the error and outlining the text-box yet again. Any and ALL help would be nice. "Thank you." <html> <head> <title>Validation</title> <style type="text/css"> .inpBox { background-color: #FFFFFF; border: solid 2px #666666; } .inpBoxError { border: solid 4px #FF0000; } </style> <script type="text/javascript"> function verify_login(form_id,email) { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var login_email = document.getElementById("email"); var msg = ""; if (login_email.value == "") { msg+= "Email address field cannot be left BLANK \n"; login_email.className = "inpBoxError"; } if (msg == "") { return true; } else { alert(msg); return false; } } </script> </head> <hody> <form id="form_id" method="POST" action="" onSubmit="return verify_login(form_id,email);"> <table border="1" width="30%"> <tr> <td width="15%"><div align="right"><b>E-Mail:</b></td> <td width="15%"><div align="left"><input id="email" name="email" type="text"></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"><div align="center"><input id="submit" name="submit" type="submit" value="Register"></div></td> </tr> <table> </form> </hody> </html> |
|||||||