|
JavaScript - Javascript Xhtml W3c Validation Issue
I'm having a problem validating this script in w3c its the last one to make the page valid xhtml transitional. here are the errors w3c gives me for the code.the website in question is http://www.orgdesignz.com
Error Line 2722, Column 31: document type does not allow element "p" here Code: document.write('<p class="no">We\'ve detected that you\'re using <strong>AdBlock Plus</strong> or some other adblocking software. Please be aware that this is only contributing to the demise of the site. We need money to operate the site, and almost all of that comes from our online advertising. To read more about why you should disable ABP, please <a href="#">click here</a>.<!-- end .content --></p>');
the error was detected on the > after "no" The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed). One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). Thanks, Mike@orgdesignz Similar TutorialsHi, I am working on simple project and it's for the institute Class project where i am learning php. i have to submit the project as soon as possible. But i am doing it different way then of i was supposed. Instead of validation message i want to use a picture or icon with Red error icon and Green yes icon as you can check in the attached picture. I am calling a function on submit button and if there is any error then using document.GetElementById('error').style.background="none" and ="pic url". I am getting output but it's just for a second then disappeared. I have already attached the Screen Shot to get the full idea.. Mainly i want to display red icon on error and green one when there is not error. Hello, On my client's site: www.twdcycling.com he wanted a place where people could make suggestions for his blog. I accomplished the simple form using a textarea field and even put a little text that clears on clicks and reappears on blur. When you go there--go to the bottom left. It also actually works. The problem is that (besides the fact that so far no one has cared to make a suggestion) somehow the form is (this is what I believe) being submitted automatically. I don't believe a human is clicking submit. When I click submit w/o clicking in the field the default text that I have in the field already gets submitted in the generated email. So I now need to work on my validation in my php file that sends the email. For background I obtained my php file from html-form-guide.com here the file is in its entirety: Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
//Validate first
if(empty($name)||empty($visitor_email))
{
echo "Name and email are mandatory!";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
$email_from = 'tom@amazing-designs.com';//<== update the email address
$email_subject = "New Form submission";
$email_body = "You have received a new message from the user $name.\n".
"Here is the message:\n $message".
$to = "tom@amazing-designs.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
It does have some validation code, and it also is set up to handle more parameters than I needed. I tried to just pare it down to the one simple thing (I just need the user to type anything they want into my text area) My reasoning is that I should be able to go get some simple validation snippet to make it so that if there is the possibility something is causing the form to just "fire off" w/o a human clicking, the validation shouldn't allow it to send, cause the text field is empty. But one would think if that is happening my default text would allow it to send, but oddly enough, no! when I get the email (last one at 5:49 am) it was a blank email! So its like some robot is doing two things: clicking in the field to empty it and THEN clicking submit! Weird, I know. But the validation code would fix this if only I knew how. (But on another note, if I try to send an empty box my default text pops back in when I click submit--proving that its happening automatically. I tried all morning yesterday to implement a snippet from several sources. Here's a couple of examples of what I added: Code:
function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
I didn't modify this code at all....maybe where I went wrong here. Should "value" correspond to text area name "message"? (about the only thing I didn't try) Here's another one --this one from W3 schools: Code: function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
this is how it was on the source site, all I changed was "myForm" and "fname" to "blog_suggestion" But when testing both these snippets separately what happened is that on submit I just go to my php page (which is just blank) I'm assuming code I'm adding is crashing the script somehow. And then of course no thank you page and no email sent. Finally here is my current php page in its entirety, followed by the form code on the home page... Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$message = $_POST['message'];
//Validate first
if(empty($message))
{
echo "Please enter a suggestion before clicking submit.";
exit;
}
$email_from = 'f7digitaldesign@gmail.com';//<== update the email address
$email_subject = "SOMEONE HAS SUBMITTED A SUGGESTION FOR THE BLOG!";
$email_body = "\n $message".
$to = "f7digitaldesign@gmail.com";//<== update the email address
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
I tried to modify the validation I got w/ this to produce the "echo" message "Please enter a suggestion before clicking submit." But let's be honest, by now you know I don't know what in the heck I'm doing (it doesn't seem to matter). Form code: Code: <form name="blog_suggetion" method="post" action="send_form_blogidea.php">
<span class="bloginfotext" ><textarea name="message" rows="14" cols="12" onfocus="clearValue(this, 'Please submit ideas for our blog here—we’d love to hear from you!')" onclick="this.value='';" onblur="if (this.value == '') {this.value = 'Please submit ideas for our blog here—we’d love to hear from you!';}" ></textarea></span>
<div style="font-size:6px; color:#FFF;">sdsadfds</div>
<input type="submit" name='submit' value="submit">
</form>
Any time spent and help offered for this is greatly appreciated!! Also if you need to/want to test the field, I don't care--send me a message. I'll know someone cares! Brian Okay so I created a registration form and it doesn't do any validation. I want it to check the input and if the input is invalid then change the color of the label of the text next to it red. It isn't doing it properly. I purposely left the action part out on the form because it was redirecting to the php page which connects to the database which I do not want it to do until it is validated. Here is the link: http://sci.tamucc.edu/~cmircovich/registrationPg.html Here is the full code (JavaScript is included on the page until I fix the problem. Code: <!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" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS Codes -->
<link href="./STYLES/main.css" type="text/css" rel="stylesheet" />
<link href="./STYLES/form.css" type="text/css" rel="stylesheet" />
<title>Main Page</title>
<!--JavaScript -->
<!-- document.getElementsByTagName('label') -->
<script type="text/javascript">
//<![CDATA[
function validate(form) {
var valid = true;
valid = validateEmail(form.user_email, form.conf_email);
valid = validatePassword(form.user_pass, form.conf_pass);
valid = validateFirst(form.user_first);
valid = validateLast(form.user_last);
valid = validateAddress1(form.user_add1);
if(form.user_add2.value.length !=0)
valid = validateAddress2(form.user_add2);
valid = validateCity(form.user_city);
valid = validateZip(form.user_zip);
if (!valid) {
return false;
}
return true;
}
function validateEmail(fld, fld2) {
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
var emailPattern = [\w\+\-\._]+@[\w\-\._]+\.\w{2,};
if (fld.value != fld2.value) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
}
else if (fld.value == "") {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (fld.value.match(illegalChars)) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else if (!emailPattern.test(fld.value) {
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
return false;
} else
document.getElementById("idEmail").style.color='black';
document.getElementById("idConfEmail").style.color='black';
}
}
function validatePassword(fld, fld2) {
var illegalChars = ^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]*$; // allow only letters and numbers
if (fld.value != fld2.value) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (fld.value == "") {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if ((fld.value.length < 8) || (fld.value.length > 25)) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
return false;
} else {
document.getElementById("idPass").style.color='black';
document.getElementById("idConfPass").style.color='black';
}
}
function validateFirst(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value.length == 0) {
document.getElementById("idFirst").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idFirst").style.color='red';
return false;
} else {
document.getElementById("idFirst").style.color='black';
}
}
function validateLast(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value.length == 0) {
document.getElementById("idLast").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idLast").style.color='red';
return false;
} else {
document.getElementById("idLast").style.color='black';
}
}
function validateAddress1(fld) {
var illegalChars = ^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$; // allow letters, numbers, and spaces
if (fld.value == "") {
document.getElementById("idAdd1").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idAdd1").style.color='red';
return false;
} else {
document.getElementById("idAdd1").style.color='black';
}
}
function validateAddress2(fld) {
var illegalChars = ^[A-Za-z0-9 ]*[A-Za-z0-9][A-Za-z0-9 ]*$; // allow letters, numbers, and spaces
if (fld.value == "") {
document.getElementById("idAdd2").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idAdd2").style.color='red';
return false;
} else {
document.getElementById("idAdd2").style.color='black';
}
}
function validateCity(fld) {
var illegalChars = ^[A-Za-z]*[A-Za-z ][A-Za-z]*$; //Alow letters and spaces
if (fld.value == "") {
document.getElementById("idCity").style.color='red';
return false;
} else if (illegalChars.test(fld.value)) {
document.getElementById("idCity").style.color='red';
return false;
} else {
document.getElementById("idCity").style.color='black';
}
}
function validateZip(fld){
var illegalChars = /^\d{5}$|^\d{5}-\d{4}$/;
if(fld.value =="") {
document.getElementById("idZip").style.color='red';
return false;
} else if(illegalChars.test(fld.value){
document.getElementById("idZip").style.color='red';
return false;
} else {
document.getElementById("idZip").style.color='black';
}
}
//]]>
</script>
</head>
<body>
<!-- MAIN DIV -->
<div id="main">
<!-- LOGO -->
<a href="index.html">
<img id="logo" src="./media/main-logo.gif"
alt="Video Game Distribution Project" /></a>
<!-- NAVIGATION BAR DIV -->
<div id="tabs">
<div id="session_div">
<!-- DISPLAY USER -->
<div id="session">
<?php
session_start();
if(session_is_registered('user_email'))
{
echo "Welcome, ".$_SESSION['user_email']."!";
}
else
echo "Welcome, Guest.";
?>
</div>
<!-- LOGIN/LOGOUT/REGISTER -->
<div id="session_action">
<?php
if(session_is_registered('user_email'))
{
echo "<a href='logout.php'>Logout</a>";
}
else
{
echo "<a href='loginPg.html'>Login</a>/
<a href='registrationPg.html'>Register</a>";
}
?>
</div>
</div>
<!-- NAVIGATION BAR DISPLAY -->
<ul id="navbar">
<li><a href="#">Xbox 360</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PS3</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Wii</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">3DS</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">DS</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PSP</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">PC</a>
<ul>
<li><a href="#">Games</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
</ul>
</div> <!-- END tabs DIV -->
<div id="reg_box">
<h1>Register me.</h1>
<div id="info_box">
<div id="label_box">
<p>
<label id="idEmail">Email:</label><br />
<label id="idConfEmail">Confirm Email:</label><br />
<label id="idPass">New Password:</label><br />
<label id="idConfPass">Confirm Password:</label><br />
<label id="idFirst">First Name:</label><br />
<label id="idLast">Last Name:</label><br />
<label id="idAdd1">Address Line 1:</label><br />
<label id="idAdd2">(Optional) Address Line 2:</label><br />
<label id="idCity">City:</label><br />
<label>State:</label><br />
<label id="idZip">Zip code:</label><br />
</p>
</div> <!-- END lebel_box DIV -->
<div id="input_box">
<!--action="registration.php"-->
<form method="post" onsubmit="return validate(this)" >
<p>
<input type="text" name="user_email" maxlength="50" /><br />
<input type="text" name="conf_email" maxlength="50" /><br />
<input type="password" name="user_pass" maxlength="50" /><br />
<input type="password" name="conf_pass" maxlength="50" /><br />
<input type="text" name="user_first" maxlength="30" /><br />
<input type="text" name="user_last" maxlength="40" /><br />
<input type="text" name="user_add1" maxlength="50" /><br />
<input type="text" name="user_add2" maxlength="50" /><br />
<input type="text" name="user_city" maxlength="50" /><br />
<select name="user_state" size="1">
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select><br />
<input type="text" name="user_zip" maxlength="10" /><br />
<input type="submit" value="Register" />
</p>
</form>
</div> <!-- END input_box DIV -->
</div> <!-- END info_box DIV -->
</div> <!-- END reg_box DIV -->
</div> <!-- END MAIN DIV -->
</body>
</html>
So I am trying to validate many input fields inside a form before I send it off to mysql. The page link is: http://penguin.tamucc.edu/~cmircovic...strationPg.php I am 99% sure it a JavaScript issue and I am a beginner with JS. My JS code is as follows: Code: function validate(form)
{
//Pull values from form
var email = form.user_email.value;
var confEmail = form.conf_email.value;
var password = form.user_pass.value;
var confpassword = form.conf_pass.value;
var firstName = form.user_first.value;
var lastName = form.user_last.value;
var add1 = form.user_add1.value;
var add2 = form.user_add2.value;
var city = form.user_city.value;
var zip = form.user_zip.value;
var isValid = true;
var atpos = email.indexOf("@"); //Find @ sign in email
var dotpos = email.lastIndexOf("."); //Fine . in email
var index = document.getElementsByTagName("label");
for(var i = 0; i < index.length; i++)
index[i].style.color='black';
//Validate Email
if(email != confEmail || atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.length)
{ //If invalid
document.getElementById("idEmail").style.color='red';
document.getElementById("idConfEmail").style.color='red';
isValid = false;
}
//Validate password
if(password != confPassword || password.length === 0)
{ //If invalid
document.getElementById("idPass").style.color='red';
document.getElementById("idConfPass").style.color='red';
isValid = false;
}
//Validate first name
if(firstName.length < 2)
{ //If invalid
document.getElementById("idFirst").style.color='red';
isValid = false;
}
//Validate last name
if(lastName.length < 2)
{ //If invalid
document.getElementById("idLast").style.color='red';
isValid = false;
}
//Validate address
if(add1.length === 0)
{ //If invalid
document.getElementById("idAdd1").style.color='red';
isValid = false;
}
//Validate city
if(city.length === 0)
{ //If invalid
document.getElementById("idCity").style.color='red';
isValid = false;
}
//Validate zip code
if(zip.length != 5 || zip.length != 10)
{ //If invalid
document.getElementById("idZip").style.color='red';
isValid = false;
}
if(isValid == false)
return false;
return true;
document.reg_form.action = "registration.php";
}
and my form starts like this... Code: <form name="reg_form" method="post" onSubmit="return validate(this)"> I'm trying to change the color of the labels according to what input field is wrong. It seems to loop through and keep my labels black. It shows the email red for a millisecond though. Any help would be appreciated. I have an XML document, styled by an xslt to make it into a table, placed inside an xhtml document. my code is as follows: Code: <head>
<script language="javascript" type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", dname, false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult() {
xml = loadXMLDoc("conference.xml");
xsl = loadXMLDoc("conference.xslt");
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
document.getElementById("falctable").innerHTML = ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("falctable").appendChild(resultDocument);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="falctable"> <!--falcons conference table space div-->
</div> <!--end falcons table space div-->
The falctable <div> is placed absolutely with CSS. The XML table shows up locally in Firefox, Opera, Safari and Chrome, but not in Internet Explorer. Also, it only appears locally, and not in the live version. Any help? Been annoying me for hours. Hi guys I am trying to make my first xhtml form using javascript but am having some problems. I have 4 text boxes on the form and two buttons: Car Year Password Re-enter Password *Buttons* Reset and Submit query I want an alert to pop up when the submit button is pressed if any of the fields are not filled in. I have written the javascript for the events but for some reason it is not picking up the car or year fields. When the submit button is pressed it only prompts for a password (if not filled in). I have looked over the code but I cant see where i'm going wrong. I have added the xhtml code with the external javascript pages at the bottom. Any help would be much appreciated. Fatbot Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Test</title>
<!--Scripts for submit button event handlers-->
<script type="text/javascript" src="submit_car.js"></script>
<script type="text/javascript" src="submit_year.js"></script>
<script type="text/javascript" src="submit_pass.js"></script>
</head>
<body>
<form id="myForm" action="">
<p>
<!--Input car name-->
<label>Car<br />
<input type="text" id="car" size="30" />
</label>
<br />
<br />
<!--Register car name event handlers-->
<script type="text/javascript" src="car_check.js"></script>
<!--Input year-->
<label>Year<br />
<input type="text" id="year" size="4" />
</label>
<br />
<br />
<!--Register year event handlers-->
<script type="text/javascript" src="year_check.js"></script>
<!-- Password entry and re-entry -->
<label>Password<br />
<input type="password" id="first" size="10" />
</label>
<br />
<br />
<label>Re-enter Password<br />
<input type="password" id="second" size="10" />
</label>
<br />
<br />
<!--Register password event handlers-->
<script type="text/javascript" src="password_check.js"></script>
<input type="reset" name="reset" />
<input type="submit" name="submit" />
</p>
</form>
</body>
</html>
//submit_car.js
//Event handler function for entering car name
function carCheck() {
var car = document.getElementById("car");
if (car.value== "") {
alert ("Please enter a car name");
return false;
} else
return true;
}
//car_check.js
//Registers the event handlers for submit_car.js
document.getElementById("car").onsubmit = carCheck;
document.getElementById("myForm").onsubmit = carCheck;
//submit_year.js
//Event handler function for entering year
function yearCheck() {
var year = document.getElementById("year");
if (year.value== "") {
alert ("Please enter a year");
return false;
} else
return true;
}
//year_check.js
//Registers the event handlers for submit_year.js
document.getElementById("year").onsubmit = yearCheck;
document.getElementById("myForm").onsubmit = yearCheck;
//Submit_pass.js
//Event handler function for ensuring password entry is correct
function passwordCheck() {
var first = document.getElementById("first");
var second = document.getElementById("second");
if (first.value== "") {
alert ("Please enter a password");
return false;
}
if (first.value !== second.value) {
alert ("The two passwords you entered did not match. \n" +
"Please ensure both passwords are identical.");
return false;
} else
return true;
}
//password_check.js
//Registers the event handlers for submit_pass.js
document.getElementById("second").onblur = passwordCheck;
document.getElementById("myForm").onsubmit = passwordCheck;
Hi, I have been attempting to transition to use of xhtml strict doctype and my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax, that the attribute 'name' is not allowed in form object, as in any other form element that I tried to use it in. This begs the question, how do I script forms with javascript in the context of this doctype? None of the javascript texts I have address this issue (O'Reilly Rhino book and others). I could figure it out, but it appears to be a complicated process, just doing getElementById() and sorting it out. Does anyone have a reference to material that deals with this issue? Or do I just abandon xhtml strict doctypes? Thanks for time and attention JK Hello I have some JS email validation which does not appear to be working. I originally had a form and decided to add validation to it, so I am adding JS to that original file. My original form used this: Code: <form action="form_script.asp" method="POST" enctype="multipart/form-data" onSubmit="return onSubmitForm();"> and the validation script uses this: Code: <form name="theform" method="post" action="#" onSubmit="return check(this);"> I am trying to get them both to work. How would I do that, please? The test site is he http://proofreading4students.com/contact_test.asp Thanks for any help. Steve Hello all, I have had a look around the forums, but cannot find the answer that I am after. basically, I have a text area to enter a search, and I have already written the JavaScript part of it (unsure if this is where the problem lies). The text that will go into the text area is a URL. the search button is disabled if there are spaces in the query, or if the field is blank, else the button is enabled. The problem I'm having may or may not be to do with my script. The HTML is set to 'onKeyUp' and 'onBlur' to run the function. now, it works fine, unless the user uses the mouse to copy and paste a URL into the text area. the button remains disabled until the user focuses out of the text area then back in. if ctrl+v is used, then the function works. If you would like to see the script I have written let me know, I hope you have some ideas Thanks in advance! I can't seem to get any Email validation to work, at all. no matter what different tactic I try. Right now I'm trying the most simplest of tactics.. Code: if((document.subscribe.contacttype.selectedIndex==1) && (document.subscribe.email.value=="")){
alert("Please enter a Valid Email Address.");
return false;
}
else{
if((document.subscribe.email.indexOf('@') < 0) || ((document.subscribe.email.charAt(email.length-4) != '.') && (document.subscribe.email.charAt(email.length-3) != '.')))
{alert("you have entered an invalid Email Address. Please try again.");
}
}
}
Any suggestions? my 'Email' feed is displayed after the 'drop-down selector' has been chosen, thus, the invoking of the if selectedIndex==1 && email.value="" return false;. Thanks for your assistance ahead of time. Ok, so I'm using two different scripts for my websites registrations. One is genvalidatorv4, from here. Now, instead of messing around with messy regular expressions for a birthday validation, I decided to hunt around for something procedural like the Facebook registration. I found this. Now I have the validation running great up until the bday picker. See, that script uses Jquery to output the form select boxes on a page load. Here's the form's code: Code: <form action="new_client_exec.php" id="newClient" method="post">
<span>
<label for='FirstName'>First Name:</label>
<input type="text" id="FirstName" name="FirstName" />
<div id='newClient_FirstName_errorloc' class='error_strings'></div>
</span>
<span>
<label for='LastName'>Last Name:</label>
<input type="text" id="LastName" name="LastName" />
<div id='newClient_LastName_errorloc' class='error_strings'></div>
</span>
<span>
<label for='Email'>Email:</label>
<input type="text" id="Email" name="Email" />
<div id='newClient_Email_errorloc' class='error_strings'></div>
</span>
<span>
<label for='ConfirmEmail'>Confirm Email:</label>
<input type="text" id="ConfirmEmail" name="ConfirmEmail" />
<div id='newClient_ConfirmEmail_errorloc' class='error_strings'></div>
</span>
<span>
<div id="bdayLabel">Birthday:</div>
<div class="picker" id="bdaypicker"></div>
<div class="clear"></div>
<div id='newClient_birthmonth_errorloc' class='error_strings'></div>
</span>
<span>
<input type="submit" name="submit" value="Submit" />
</span>
</form>
<script type="text/javascript">
var frmvalidator = new Validator("newClient")
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=24","Max length is 24");
frmvalidator.addValidation("LastName","req","Please enter your Last Name");
frmvalidator.addValidation("LastName","maxlen=24","Max length is 24");
frmvalidator.addValidation("Email","maxlen=50", "Max length is 50");
frmvalidator.addValidation("Email","req", "Please enter your Email");
frmvalidator.addValidation("Email","email", "This email appears to be invalid");
frmvalidator.addValidation("ConfirmEmail","req", "Please confirm your Email");
frmvalidator.addValidation("ConfirmEmail","eqelmnt=Email", "The confirmed password is not same as password");
</script>
Now, when the page is run, it adds the bday fieldset into the <div class="picker" id="bdaypicker"></div>. As you can see, the validator accesses the field data via the "name" attribute, so I try to add validation to what the ids and names that the picker script adds but it doesn't work. Now, I'm fairly new to Javascript and it's derivatives, but if classes, ids, and names are already being used or generated by other scripts, does that not allow you to access them elsewhere in a different script? I've tried just about everything else, including going into that picker script and modifying the names and ids it outputs. I'm sorry for not being able to post a full html page. I don't want links to this site floating around out there yet. If I need to I'll post a dummy page with all the necessary code. Thanks for any help! Hi, I have a simple bit of HTML / Javascript to validate email addresses entered into a field, split by a comma. Code: <html> <body> <form name="myForm" onsubmit="return chkEmail()" method="post"> e: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> Code: function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function chkEmail(){
var myString = document.forms["myForm"]["fname"].value;
var mySplitResult = myString.split(",");
for(i = 0; i < mySplitResult.length; i++){
emailCheck = validateEmail(mySplitResult[i]);
alert(mySplitResult[i] + " - " + emailCheck);
if (emailCheck = 'false') {
alert(emailCheck);
}
}
}
If I enter e.g. "you@me.com,this@that.com" into the form, the alert debugs show: First: you@me.com - true Second: false Third: this@that.com - true Fourth: false The first debug seems to show that the condition is true, but then the if statement to check for a "false" value is firing, showing the value of "emailCheck" = "false", even though on the preceding alert, the value = "true". I'm not sure what's going wrong. Apologies for any silly mistakes. I also put my code he http://jsfiddle.net/XYyZa/ Thanks I have two simple forms on the site, each captures an email address they are for two separate languages. However when I try to validate, only one validates and the other one doesn't Javascript: Code: <script type="text/javascript">
function checkform ( form )
{
// ** START **
if (form.email.value == "") {
alert( "Please enter your email address." );
form.email.focus();
return false ;
}
// ** END **
return true ;
}
</script>
<script type="text/javascript">
function checkform ( form )
{
// ** START **
if (form.email2.value == "") {
alert( "Please enter your email address." );
form.email2.focus();
return false ;
}
// ** END **
return true ;
}
</script>
Form 1- It Validates Just Fine Code: <form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
<td>
<input name="email" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
<td> <input style="border:none" type="image" name="imageField" id="image" src="submit.jpg" />
</td>
</form>
Form2 Doesn't Validate Code: <form name="quote" method="post" action="contact.php" onsubmit="return checkform(this);">
<td><input name="email2" style=" background-color:#FFFFFF; width:200px; height:13; font-size:11px; color:#666666" type="text" /></td>
<td>
<input style="border:none" type="image" name="imageField2" id="image2" src="submit2.jpg" />
</td>
</form>
My code is working pretty well, except I have an issue validating. I think it may be to do with when there is an empty string. I know that NaN is Not a Number, but the only issue I can find with my code is when I input a non-digit such as "k" for example. And because I have put some code in to reload the page when it does not validate, when it refreshes it has 2 popup boxes. Thanks for taking the time to read my post Code: <html>
<head>
<title>Sound Travel Calculator</title>
<script type="text/javascript">
// Setting our variables based on user input
var hours = 0;
var mins = 0;
var m_per_secs = 340;
alert("Speed of Sound \n\nAt Sea Level Sound Travels At 340 Metres Per Second \n\nIf You Would Like To Know How Far Sound Will Travel In A Given Time, Click OK");
hours = prompt("Please Enter Hours (If less than 1 hour, just type 0)");
mins = prompt("Please Enter Minutes");
// Validating input for a number less than zero or an not a number
if ((isNaN(hours)) || (hours < 0) || (isNaN(mins)) || (mins < 0))
{
alert("Please enter a numeric value, zero or greater");
window.location.reload(true);
}
// if there is no input, the value is set to zero
if (hours =="")
{
hours = 0;
}
if (mins =="")
{
mins = 0;
}
// Calculations
dist = (((parseFloat(hours)) * 60 * 60) + (parseFloat(mins * 60)) * parseFloat(m_per_secs) / 1000)
// Output our calculation
alert("The Distance of Sound Travelled is " + (dist) + " Kilometres");
</script>
</head>
<body>
</body>
</html>
So I'm trying to dynamically generate MathML code. I can get this to work on Internet Explorer 8 + MathPlayer, Firefox 3.6, and Opera 11: test1.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title></title></head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mrow>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>3</mn>
<mi>x</mi>
<mo>−</mo>
<mn>4</mn>
</mrow>
</mfrac>
</math>
</body>
</html>
But this only works on Firefox: test2.xht: Code: <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="test2.js"></script>
<title></title>
</head>
<body></body>
</html>
test2.js: Code: window.onload = test;
function test()
{
var math = "<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"
math += "<mfrac>";
math += "<mrow>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "<mrow>";
math += "<msup>";
math += "<mi>x</mi>";
math += "<mn>2</mn>";
math += "</msup>";
math += "<mo>−</mo>";
math += "<mn>3</mn>";
math += "<mi>x</mi>";
math += "<mo>−</mo>";
math += "<mn>4</mn>";
math += "</mrow>";
math += "</mfrac>";
math += "</math>";
document.getElementsByTagName("body")[0].innerHTML = math;
}
Sorry for the code dump and for being such a n00b and thanks for any help. 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> 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 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;
}
}
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> |
|||||||