Learn VBA & Macros in 1 Week!

JavaScript - Xhtml Validation Using Js

Full Excel VBA Course - Beginner to Expert

Xhtml Validation Using Js	View Content

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.

Full Excel VBA Course - Beginner to Expert

Need Help: Js Validation With Xhtml

Similar Tutorials

View Content

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>

Javascript Xhtml W3c Validation Issue

Similar Tutorials

View Content

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

Have Text Field Validation Need To Add Checkbox Validation

Similar Tutorials

View Content

Hey all.

I have a simple validation I need to do. I need to just make sure that a Checkbox is checked, and that a Text field has content. Sounds simple but I cannot find any thing that has a check and a text field.

Here what I have. Can I modify this script to do this? A Checkbox MUST be checked and Text field MUST be filled out. This currently does the text field fine, but no Checkbox obviously.

How can I add a checkbox validation to this?

Thats it. Any help is appreciated.

Code:

<script type="text/javascript">

var textFields = ["digsig"]; 

function validateForm( )
{
    var oops = ""; // must initialize this!
    var form = document.sig;

        for ( var t = 0; t < textFields.length; ++t )
        {
              var field = form[textFields[t]];
              var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
              if ( value.length < 1 ) 
              {
                    oops += "You MUST enter your Digital Signature";
              }
        }
        if ( oops != "" )
        {
            alert("ERROR:" + oops);
            return false;
        }
    }


}

</script>

Form Validation & Html W3c Validation

Similar Tutorials

View Content

Hello all, new here Seems like a very nice place to be apart of.

I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it.

The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem.

I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs.

<problem>
I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location.
<problem>

I would like to keep the JS close to how it is now as I have a library to use this JS over and over again.

Any pointers in the right direction or solutions to my problem would be greatly appreciated.

Thanks! Hopefully it is not to hard huh

If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again!

Javascript , Xml And Xhtml

Similar Tutorials

View Content

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.

Help With Javascript On Xhtml Form

Similar Tutorials

View Content

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;

Document.getelementbyid As A Variable In Xhtml

Similar Tutorials

View Content

How To Validate This Js Code For Xhtml Strict

Similar Tutorials

View Content

This the html code below. Im getting a few errors

1) there is no attribute "onload" and
2) there is no attribute "name"

PHP 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">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Navigation</title>

<link href="css/new.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="js/nav.js"></script>
</head>

<body onload="MM_preloadImages('images/tab1.gif','images/tab1hover.gif','images/tab2hover.gif','images/tab3hover.gif','images/tab4hover.gif','images/tab5hover.gif')">
  <div id="wrapper">

    <div id="top">
      <div id="topright">

       <div id="primaryNavWrapper">
        <div id="primaryNav">
          <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab1','images/tab1hover.gif',1)" onmouseover="MM_nbGroup('over','tab1','images/tab1hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab1hover.gif" alt="Home" name="tab1" width="79" height="31" id="home" onload="MM_nbGroup('init','group1','tab1','images/tab1.gif',1)" /></a>
          <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab2','images/tab2hover.gif',1)" onmouseover="MM_nbGroup('over','tab2','images/tab2hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab2.gif" alt="About Us" name="tab2" width="95" height="31" id="aboutUs" /></a>
          <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab3','images/tab3hover.gif',1)" onmouseover="MM_nbGroup('over','tab3','images/tab3hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab3.gif" alt="Services" name="tab3" width="89" height="31" id="services" /></a>
          <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab4','images/tab4hover.gif',1)" onmouseover="MM_nbGroup('over','tab4','images/tab4hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab4.gif" alt="Testimonials" name="tab4" width="120" height="31" id="testimonials" /></a>
          <a href="javascript:;" onclick="MM_nbGroup('down','group1','tab5','images/tab5hover.gif',1)" onmouseover="MM_nbGroup('over','tab5','images/tab5hover.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/tab5.gif" alt="Contact Us" name="tab5" width="108" height="31" id="contactUs"  /></a>
        </div>
      </div>
    </div>
  </div>
  </div>

</body>
</html>

and here is the js code

PHP Code:
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

Any help would be greatly appreciated

Xhtml Doctype And Form Name Attribute In Javascript?

Similar Tutorials

View Content

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

Random Image Script - Xhtml Compliant

Similar Tutorials

View Content

Hi,

I wonder if someone can help me. I'm building a site which has a random image generated on the page each time it loads. It does work at the moment, but I'd like it to be xhtml compliant.

Currently the page loads the javascript from an external .js file, but it needs a line in the body of the page to make it work fully. This line is currently causing 15 errors when I try and validate it.

The line is as follows:

<script type="text/javascript">document.writeln('<td'+'><img src="'+xoxo[choice]+'"height=26 width=970 border=0 ><'+'/TD>');</script>

Does anyone have any suggestions about how to make this line compliant?

I'm a bit of a beginner, so any help would be greatly appreciated!

Problem Dynamically Generating Mathml (xhtml + Javascript + Mathml)

Similar Tutorials

View Content

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>&#x2212;</mo>
          <mn>4</mn>
        </mrow>
        <mrow>
          <msup>
            <mi>x</mi>
            <mn>2</mn>
          </msup>
          <mo>&#x2212;</mo>
          <mn>3</mn>
          <mi>x</mi>
          <mo>&#x2212;</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>&#x2212;</mo>";
  math += "<mn>4</mn>";
  math += "</mrow>";
  math += "<mrow>";
  math += "<msup>";
  math += "<mi>x</mi>";
  math += "<mn>2</mn>";
  math += "</msup>";
  math += "<mo>&#x2212;</mo>";
  math += "<mn>3</mn>";
  math += "<mi>x</mi>";
  math += "<mo>&#x2212;</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.

"inclusion Of Xhtml Tag In Javascript"

Similar Tutorials

View Content

Hello, I am trying to figure out how to "Include an xhtml tag for a new line within the output"... wording is a bit confusing, but this is probably easy to solve.

Thanks!

<!doctype Html Public "-//w3c//dtd Xhtml 1.0 Strict//en" "http://www.w3.org/tr/xhtml1

Similar Tutorials

View Content

All,
So I have the following code. It works great. When I add this:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It doesn't work. I need it for some aspects of my CSS to work. The code that works without that is:
Code:

<html>
 <script>
function resizeAll( )
{
    var divs = document.getElementsByTagName("div");
    for ( var d = 0; d < divs.length; ++d )
    {
        var div = divs[d];
        if ( div.className == "fn-area" )
        {
			divid = divs[d].getAttribute("id");
			imgid = "Img" + divid;
			var Div1Width, Div1Height;
    		Div1Width = document.getElementById(divid).offsetWidth;
            Div1Height = document.getElementById(divid).offsetHeight;
            document.getElementById(imgid).style.width = Div1Width;
            document.getElementById(imgid).style.height = Div1Height;
        }
    }
}
 </script>
<head>

</head>
<body onLoad="resizeAll()">
<div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv1').style.display='block';" onmouseout="document.getElementById('ImgDiv1').style.display='none';">
<img id="ImgDiv1" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
 </div>
 
<div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv2').style.display='block';" onmouseout="document.getElementById('ImgDiv2').style.display='none';">
<img id="ImgDiv2" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
</div>
</body
</html>

Validation Help

Similar Tutorials

View Content

Hello,

I dont know if I am going about this the right way, but.. I am trying to validate an email address. If the email is a valid looking email address, it will render the submit button disabled to prevent dupe's while the rest of the script processes.

The email validation portion works, but, the part where it renders the form submit button disabled does not:

<script type="text/javascript">
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; submit.disabled = true;}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Please enter a valid email address.")==false)
{email.focus();return false;}
}
}
</script>

Any guidance or help would be apreciated.

Validation

Similar Tutorials

View Content

Hello to everyone

i need to validate a form Based on radio buttons and text box

my code so far
Code:

<html>
<head>
<title>My Page</title>
<script type="text/javascript">
function validate(thisform) {
document.getElementByName("bank");//text box
// validate myradiobuttons
   
radio = -1;
for (i=thisform.day.length-1; i > -1; i--) {
if (thisform.day[i].checked) {
radio = i; i = -1;
}
}
if (radio == -1) {
alert("You must select all values for the clock !");
return false;
}
 else
    {
    return true;
    }
	}
//bank code validation
if (document.getElementByName("bank").value.length>=6) {
 return true;
    }
else
    {
  alert("you must input maximum 6 digit (123456) !");
   return false;
    }
	}	

	</script>
</head>
	<body>
<form action="form-output.php" method="post" id="form">

          <input type="radio" name="day" value="f" onclick="dayofweek(this)" /> Sunday (default)
          <input type="radio" name="day" value="s" onclick="dayofweek(this)" /> Sun </p>

	        <input type="radio" name="month" value="a" onclick="dateformat(this)" /> 28th March 2010 (default) 
			<input type="radio" name="month" value="b" onclick="dateformat(this)" /> 28 March 2010 
			<input type="radio" name="month" value="c" onclick="dateformat(this)" /> 28th Mar 2010 
			<input type="radio" name="month" value="d" onclick="dateformat(this)" /> 28 Mar 2010 
			<input type="radio" name="month" value="e" onclick="dateformat(this)" /> 28/03/2010  
			<input type="radio" name="month" value="f" onclick="dateformat(this)" /> 28th March 10
			<input type="radio" name="month" value="g" onclick="dateformat(this)" /> 28 March 10
			<input type="radio" name="month" value="h" onclick="dateformat(this)" /> 28th Mar 10  <br/>

			<input type="radio" name="month" value="i" onclick="dateformat(this)" /> 28 Mar 10 
			<input type="radio" name="month" value="j" onclick="dateformat(this)" /> 28/03/10
			<input type="radio" name="month" value="k" onclick="dateformat(this)" /> 28th March 
			<input type="radio" name="month" value="l" onclick="dateformat(this)" /> 28 March 
			<input type="radio" name="month" value="m" onclick="dateformat(this)" /> 28th Mar
			<input type="radio" name="month" value="o" onclick="dateformat(this)" /> 28 Mar 
			<input type="radio" name="month" value="p" onclick="dateformat(this)" /> 28/03 </p>
			
			<input type="radio" name="time" value="a" onclick="timeformat(this)" /> 5:28:12 am (Default) 
			<input type="radio" name="time" value="b" onclick="timeformat(this)" /> 5:28 am 
			<input type="radio" name="time" value="c" onclick="timeformat(this)" /> 5:28:12 
			<input type="radio" name="time" value="d" onclick="timeformat(this)" /> 5:28 
			<input type="radio" name="time" value="e" onclick="timeformat(this)" /> 17:28:12 
			<input type="radio" name="time" value="f" onclick="timeformat(this)" /> 17:28 </p>
			 Input a short Bank Code
    <input type="text" name="bank" size="10"  onblur="JavaScript:alert('You must insert a Bank Code')"  /></br>

<input type="submit" name="submit" onclick="validate(form);return false;" value="Submit" />
<input type="reset" name="reset" value="reset" />
</form> 
</body>
</html>

i need on submit to validate if user select values from 3 radio groups and insert the proper data to text box.
if not i want to return the proper alerts
in text box also i want when lose focus to validate so i put this
Code:

onblur="JavaScript:alert('You must insert a Bank Code')"

it's ok?

Thanks in Advance

&& Validation

Similar Tutorials

View Content

I keep getting validation errors for using && as and.

I've read to put "&" in place of it, but whenever I do this, the code stops working.

I've tried seperate parenths, and still confused.

anyone help to make this work and validate at the same time?

if (first=="" && last=="")
first = last = "Unknown";

if (first == '')
document.writeln(last);
else if (last == '')
document.writeln(first);
else
document.writeln (last + ", " + first);

Validation

Similar Tutorials

View Content

Hi, got my form here
Code:

<form method="POST" onsubmit="return validateFormOnSubmit1(this)" action="sendEmail.php">
    <p class="demo2">Receivers E-mail<a class="textFields"> 
      <input type="text" name="receiver" size="30" maxlength="35" /></a></p>
    <p class="demo2">Senders E-mail<a class="textFields2"> 
      <input type="text" name="sender" size="30" maxlength="35" /></a></p>
    <p class="btn" >
      <input name="Submit" type="submit" value="Send"/></p>
</form>

And that should call up this
Code:

function validateFormOnSubmit1(theForm) {
var reason = "";

  reason += validateEmail1(theForm.receiver);
  reason += validateEmail1(theForm.sender);
        
  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }

  return true;
}

function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
}

function validateEmail1(fld) {
    var error="";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
   
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fld.style.background = 'White';
    }
    return error;
}

For some reason though the validation is not working. Is there anything obvious I am doing wrong?
cheers

Validation

Similar Tutorials

View Content

Hey. Could someone point me in the direction of why this is not working, it worked in my last program, but not since I have changed things. I have a standard html form

Code:

 <form method="POST" onsubmit="return validate_form(this)" action="anniversaryPreview.php">
    <p class="demo5">Senders Name<a class="textFields2"> 
    <input type="text" name="sender" value="e.g. Love from Nick" size="30" maxlength="35" /></a></p>
    <p class="btn2" >
    <input type="submit" value="Preview"></p>
    </form>

And this should call up return validate_form(this) before bringing up the php page. Now the validator is just
Code:

function validate_required(field, alerttxt) {
        if (field.value == null || field.value == "") {
                alert(alerttxt);
                return false;
        }
        else {
                return true;
        }
}

function validate_form(thisform) {
        if (validate_required(thisform.name,"Please specify the receivers name.")==false) {
                thisform.name.focus();
                return false;
        }
        if (validate_required(thisform.sender,"Please specify the sender's name.")==false) {
                thisform.sender.focus();
                return false;
        }
}

(This is not in the html file, but its own seperate file)
I cant see if I have made any mistakes with the variables names or something, or what I am doing wrong. Dont get any errors, just nothing happens if I leave my forms fields blank. Anyone have an idea of whats going on here?

cheers

Help With Xml Validation In Js

Similar Tutorials

View Content

Hi All,

I have a java script invoked within an ANT template. This java script as of now converts a text file to xml file.

Now, how would I do the schema validation of that XML file against an XSD in the javascript?

Saw many examples online but they were using MSXML or java classes

Would be glad to have any sort of suggestions..

Thanks

Validation

Similar Tutorials

View Content

In my project i have a from which have several fields. The form is
<form name="reg" action="payment.jsp" method="post">
-----------
<tr> <td>First name:</td> <td><input type="text" name="firstname"/></td></tr>
--------------------------
<input type="submit" value="Next" onclick="fun()" />
------------
</form>
Then to validate the fields i have used JavaScript.They are validating rightly using a alert box. But when i am pressing ok of the alert box the control is passing to the page i have written in action of the form.I want when i will press ok it should come back to the same page.Only if all fields are then it should go to the page refereed in action. Can anyone help me?
The JavaScript code is
<script type="text/javascript">
function fun()
{
var x=document.forms["reg"]["firstname"].value;

if (x==null || x=="")
{
alert("First name must be filled out");

}