JavaScript - Problem With Form Validator

Hi, basically it's a simple postcode validator.

It checks to see whether the postcode is in UK format, then tells you if it isn't with an alert box, then I want it to clear the field. The input field's ID is postcode.

Code:

function testPostCode () {
	var myPostCode = document.getElementById('postcode').value;
	if (checkPostCode (myPostCode)) {
    document.getElementById('postcode').value = checkPostCode (myPostCode)
	} 
	else {alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.")};
	document.postcode.value="";
	}

Anyone able to help me?

<script type="text/javascript">

Code:

function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }}}//
function switchImg(i){document.images["wine"].src = i;}

</script>

used in this page

seems to object to option.length

Frank.

Hi There,

I really need your help.

I am aware that there is no isDate() function for javascript, however, how could one check a date against a validator to ensure that the date entered is either returned true or false

the date format that I would like to check would consist of the dd/mm/yyyy

so essentially:

isDate("12/01/2012") would return as true

isDate("N/A") = would return as false

I have searched high and low and am counting on the experts on this forum for some major help.

A huge thanks in advance and I really appreciate everything.

Cheers,

Jay

I have the following script in the head;
Code:

		<script type="text/javascript">
	<![CDATA[

	<!--This function validates the data from the three input boxes on the MAILTO form-->
	function validate()
	{
	Check="Valid";
	Name=document.contact.name.value;
	Mail=document.contact.mail.value;
	Comment=document.contact.comment.value;
	if (Name=="your name" || Name.length<1)
	{
	alert("Please enter your name");
	Check="Invalid";
	}
	else if (Mail.indexOf("@")<1 || Mail.indexOf(".")<1)
	{
	alert("Please enter a valid email address");
	Check="Invalid";
	}
	else if (Comment=="your comment" || Comment.length<1)
	{
	alert("Please enter your comment");
	Check="Invalid";
	}
	if (Check=="Invalid")
	{
	return false;
	}
	else
	{
	alert("Thank you for your comment");
	}
	}
	
	]]>
	</script>

and the following form in the body;
Code:

<div>
						<form name="contact"  onsubmit="return validate()" action="email.asp" method="post">

    <div class="input_title">Name:</div><input type="text" name="name" size="25" class="input_box" />
 
 	<br />

	<div class="input_title">Your Email:</div><input type="text" name="sender" size="25" class="input_box" />
	 
	<br />
	 
	<div class="input_title">Phone Number:</div><input type="text" name="tel" size="25" class="input_box" />(Optional)
	 
	<br />
	 
	Message:
	
	<br />
	
	<textarea name="enquiry" cols="50" rows="6" class="input_box"></textarea>
	 
	<br />
	 
	<input type="submit" value="Submit" name="submit" /><input type="reset" value="Reset" name="reset" />
	 
	<br />

</form>

		<br /><br />
</div>

It is a aspx file and validates fine as XHTML Trans. Why won't it work?

Hello,

I am trying to add a simple script to my CSS menu for a little bit more eye candy. However, when I add the script - it causes issues in my online store (ex; the javascript-powered one page checkout stops working).

Here is the exact error from the error console:

Quote:
Error: jQuery.validator is undefined
Source File: https://www.gem-tech.com/store/pc/onepagecheckout.asp
Line: 288
And here is the exact script:
Quote:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
$(document).ready(function() {


function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();

//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);

if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});

} else { //If row does not exist...

$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});

}
}

function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}


var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);



});



</script>
I believe there is some sort of conflict? Not sure though.

Any input on this?
Thanks,

Because of my rather second-rate vision; I would like to get an editor for my Javascript that will check my syntax for me. Missing or extra brackets, semicolons etc are the bane of my life.

Any suggestions welcomed.

Frank

Hello all. I am trying to track down why this custom validator is failing with an error that args is undefined. There are two funnctions - one works and one does not. Here they a the bold italicized item is where the error is being generated. Function validHygieneNote works as expected however.
Code:

function validClothingNote(val,args)
{
var radio_choice = false;
var chks = document.getElementById('clothingNote');
var chks2 = document.getElementsByName('clothingInadequate');

for (counter=0; counter < chks2.length; counter++) {
if (chks2[counter].checked){
var rad_val =chks2[counter].value;
}}


if((rad_val==1)|| (rad_val==2)) {

if ((chks.value=="") || (chks.value.length==0) || (chks.value==null)){
args.IsValid=false; 
}
else {
args.IsValid = true;
}
}}

function validHygieneNote(val,args)
{
var radio_choice = false;
var chks = document.getElementById('hygieneNote');
var chks2 = document.getElementsByName('hygieneInadequate');

for (counter=0; counter < chks2.length; counter++) {
if (chks2[counter].checked){
var rad_val =chks2[counter].value;
}}


if((rad_val==1)|| (rad_val==2)) {

if ((chks.value=="") || (chks.value.length==0) || (chks.value==null)){
args.IsValid=false; 
}
else {
args.IsValid = true;
}
}}

Validator (My CSE HTML Validator v9.0 ) reports javascript errors but program runs. There seems to be a problem with commands used twice and a missing semi-colon.

Also there are problems with Firefox. Unable to reselect another image. OK with IE8.

I would appreciate it if someone with better eyesight than me could give the jscript a once over for me.

Thanks oin advance.

Frank

Culprit is here.

EDITED.

Having a problem with the name of a select list being passed to a function.

The function is very simple, just supposed to take the selected index of a select list and make another select list the same index.

Putting the actual names of the select lists in the code works fine but i am trying to pass the name as there are 15 of these lists and i dont want to create a function for each of them.

Code:

function SetJobAsAbove(Target,Source)
{
	if (document.form.Target.selectedIndex == 0)
	{
	alert ('You must select a Job in the line above before you can copy it')
	}
	else
	{
	document.form.Target.selectedIndex == document.form.Source.selectedIndex
	}
}

This is link used, L1_Job and L2_job are both select lists.

Code:

<a href="javascript:SetJobAsAbove('L2_Job','L1_Job')">Copy</a>

I have checked form names etc and are case correct etc.

Any help with this would be greatly apprieciated.

Hi People,

I am trying to use a button I found on:
http://monc.se/kitchen/59/scalable-c...ground-colors/

The button setup works fine, but my form doesn't work any more...
That is why I am hoping anyone here can help me out.

Thanks in advance!


The JS I use for my form is:

Code:

var lv_firstName = new LiveValidation('firstName', {onlyOnBlur: true});
lv_firstName.add(Validate.Presence);
lv_firstName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_firstName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_insertion = new LiveValidation('insertion', {onlyOnBlur: true});
lv_insertion.add(Validate.Length, {minimum: 2, maximum: 50});
lv_insertion.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_lastName = new LiveValidation('lastName', {onlyOnBlur: true});
lv_lastName.add(Validate.Presence);
lv_lastName.add(Validate.Length, {minimum: 2, maximum: 50});
lv_lastName.add(Validate.Format, {pattern: /^([a-z \-\']+)$/i});

var lv_emailaddress = new LiveValidation('emailaddress', {onlyOnBlur: true});
lv_emailaddress.add(Validate.Presence);
lv_emailaddress.add(Validate.Email);

var lv_message = new LiveValidation('message', {onlyOnBlur: true});
lv_message.add(Validate.Presence, {failureMessage: ' '});
lv_message.add(Validate.Length, {minimum: 10, failureMessage: ' '});

The code I use for the button is:

Code:

var btn = {
	init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        as = btn.getElementsByClassName('btn(.*)');
        for (i=0; i<as.length; i++) {
            if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
                var a1 = document.createElement("a");
                a1.appendChild(document.createTextNode(as[i].value));
                a1.className = as[i].className;
                a1.id = as[i].id;
                as[i] = as[i].parentNode.replaceChild(a1, as[i]);
                as[i] = a1;
                as[i].style.cursor = "pointer";
            }
            else if (as[i].tagName == "A") {
                var tt = as[i].childNodes;
            }
            else { return false };
            var i1 = document.createElement('i');
            var i2 = document.createElement('i');
            var s1 = document.createElement('span');
            var s2 = document.createElement('span');
            s1.appendChild(i1);
            s1.appendChild(s2);
            while (as[i].firstChild) {
              s1.appendChild(as[i].firstChild);
            }
            as[i].appendChild(s1);
            as[i] = as[i].insertBefore(i2, s1);
        }
   
		if (document.getElementById('submit_btn')) {
		btn.addEvent(document.getElementById('submit_btn'),'click',function() {
		var form = btn.findForm(this);	
		form.submit();
		});
		}
    },
    findForm : function(f) {
        while(f.tagName != "FORM") {
            f = f.parentNode;
        }
        return f;
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    },
    getElementsByClassName : function(className, tag, elm) {
        var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }
}

btn.addEvent(window,'load', function() { btn.init();} );

HTML:

Code:

<p><input type="submit" value="Formulier verzenden" class="btn blue" id="submit_btn" /></p>

Hi guys I'm having trouble with my javascript coding. The form works fine in IE but does not work in firefox I've been pulling my hair out overt his for the last hour and can't figure it out.

Code:

<script type="text/javascript">

<!--

function validate_form ( )
{
	valid = true;

        if ( document.getElementById.rego_form.First_name.value == "" )
        {
        	//Alert the user to
                alert ( "Please fill in your first name." );
                valid = false;
        }

        if ( document.getElementById.rego_form.Last_name.value == "" )
        {
        	//Alert the user to
                alert ( "Please fill in your last name." );
                valid = false;
        }
		//Check Age 
		if (parseInt(document.getElementById.rego_form.Age.value) < 16 || parseInt(document.rego_form.Age.value) > 90)
		{
			//Alert the user to
			alert ("Please enter an age between 16 and 90");

		return false;
}
        

        return valid;

}

//-->

</script>

This is the fields I would like them to enter into but when I do this in IE you can't click on the top 3 fields to enter data
Code:

<form name="rego_form" method="post" action=""
onSubmit="return validate_form ( );">

<h1>Please Fill Out Your Details Below</h1>

<p>Email: <input type="text" name="Email"></p>

<p>First Name: <input type="text" name="First_name"></p>

<p>Surame: <input type="text" name="Last_name"></p>

<p>Age: <input type="text" name="Age"></p>

<p>Address: <input type="text" name="Address"></p>

<p>City: <input type="text" name="City"></p>

<p>City: <input type="text" name="City"></p>

<p><input type="submit" name="send" value="Send Details"></p>

</form>

Any help would be greatly appreciated!

Working of JS form validation now, this is my code:

Code:

<html>

<head>

<script>

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

</script>
</head>

<body>

<form action="mailto:fonzhende1@yahoo.com" method="post"> 
                                  
                                               <table>
                                                                    
                                                                  <tr>
                                                                                    <td>Name:</td>
                                                                                    <td>
                                                                                                   <input type="text" name="name" value="" />
                                                                                    </td>
                                                                  </tr>
                                                                  <tr> 
                                                                                    <td>email address:</td>
                                                                                    <td> 
                                                                                                  <input type="text" name="email" value="" />
                                                                                    </td>
                                                                  </tr>
                                                                  
                                                                 <tr>
                                                                                   <th></th>
                                                                                   <td> 
                                                                                                  <input type="submit" value="Submit" />
                                                                                   </td>
                                                                </tr>
                                                 </table>  

                                                                <textarea rows="2" cols="20"> Test area </textarea><br/>
                                                                <br/>
                                                 <select>
                                                                <option value="volvo">Volvo</option>
                                                                <option value="saab">Saab</option>
                                                                <option value="mercedes">Mercedes</option>
                                                                <option value="audi">Audi</option>
                                                 </select><br/>
                                                 <br/>
                                                 <input type="radio" name="group1" value="Milk"> Milk<br>
                                                 <input type="radio" name="group1" value="Butter" checked> Butter<br>

                                                    
 </form>


</body>
</html>

Problem is when I submit the form I am getting what you see in the attachment, I guess this email form which pops up needs to be directed to Yahoo Hosting then redirected from there back to me?

Anyway I would like if it the email could be sent directly to me without this form popping up, is that possible? Also, when I submit the form with the fields empty I am not getting the error message?

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">
    <head>
        <title></title>
        <style type="text/css">
            .showHideDivs {
                display: none
            }
        </style>
        <script type="text/javascript">
            function showHideDivs(){
                var job = '';
                for(i=0; i < oRadBtns.length; i++){
                    if(oRadBtns[i].checked){
                        job = oRadBtns[i].value;
                    }
                }
                switch (job){
                    case 'yes':
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("empresa").style.display = "block";
                        document.getElementById("contacto").style.display = "block";
                        break;
                    case 'no':
                        document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";
                        document.getElementById("empresa").style.display = "none";
                        document.getElementById("contacto").style.display = "none";
                }
            }
            window.onload=function(){
                oRadBtns = document.getElementById('radBtnCont').getElementsByTagName('input');
                for(i=0; i < oRadBtns.length; i++){
                    oRadBtns[i].onclick = showHideDivs;
                }
                showHideDivs();
            }
        </script>
    </head>
    <body>
        <div id="radBtnCont">
            <input type="radio" value="yes" name="job" checked="checked" />Yes
            <br />
            <input type="radio" value="no" name="job" />No
        </div>
        <div id="nombre" class="showHideDivs">This is nombre div</div>
        <div id="apellido" class="showHideDivs">This is apellido div</div>
        <div id="empresa" class="showHideDivs">This is empresa div</div>
        <div id="contacto" class="showHideDivs">This is contacto div</div>
    </body>
</html>

hello, i have a form in my header that is hidden and i have it show when you click a link, the problem is, when the form appears, it pushes everything down below it, any ideas on how to get around this?

Hello everyone! I'm new to javascript (started just yesterday) and I've run to some problems...

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr" lang="hr">
<head>
	<title> Tomislav Paj - studentska web stranica </title>
	<link rel="stylesheet" type="text/css" href="moj1.css" />

<script type="text/javascript">

function zbroji(){
    var MA1 = document.getElementById("MA1");
    var LA1 = document.getElementById("LA1");
    var EM1 = document.getElementById("EM1");
    var PR1 = document.getElementById("PR1");
    var MA2 = document.getElementById("MA2");
    var LA2 = document.getElementById("LA2");
    var EM2 = document.getElementById("EM2");
    var PR2 = document.getElementById("PR2");
    
    zbroj = ( 8*MA1.value + 8*LA1.value + 8*EM1.value + 8*MA2.value + 8*LA2.value + 8*EM2.value ) + 0.5 * ( 6*PR1.value + 6*PR1.value );
    
    UKUPNO.value = zbroj;
    }

</script>

</head>

.................

<div class="dd" >
	<h2> DiplCalc </h2>
	
	<form>

	<pre>
	PRVI SEMESTAR
 	Mat. Analiza 1    <input type="number" class="upis" id="MA1" maxLength=1 size=1 /> 
 	Lin. Algebra 1    <input type="number" class="upis" id="LA1" maxLength=1 size=1 /> 
 	Elem. Mat  1      <input type="number" class="upis" id="EM1" maxLength=1 size=1 /> 
 	Programiranje 1   <input type="number" class="upis" id="PR1" maxLength=1 size=1 /> 
	<br/>
	DRUGI SEMESTAR
 	Mat. Analiza 2    <input type="number" class="upis" id="MA2" maxLength=1 size=1 /> 
 	Lin. Algebra 2    <input type="number" class="upis" id="LA2" maxLength=1 size=1 /> 
 	Elem. Mat  2      <input type="number" class="upis" id="EM2" maxLength=1 size=1 /> 
 	Programiranje 2   <input type="number" class="upis" id="PR2" maxLength=1 size=1 /> 
	<br/> 
	<input type="button" id="suma" value="UKUPNO" onclick="zbroji()" /> <input type="text" class="ispis" id="UKUPNO" size=5/>

	</pre>
	</form>

	</div>

this should be some kind of tool that helps calculate grad points... nevermind... it was working fine, until I've put it inside <div> block... please hepl!! thank you

*edit
this is working just fine on Safari and Crome, but fails on Firefox and IE...