JavaScript - Jquery Validation Fails In Ie

Validation is here - http://jquery.bassistance.de/validate/demo/ - JGrowl is here - http://stanlemon.net/projects/jgrowl.html - How can I get those 2 to work so that a Jgrowl window is activated when a validation from a form is called? I have 2 bucks to give for an answer in my Paypal account - I'm a newb, bare with me

Thanks,
Jon

Hi all.

I am using the Inline Form Validation Engine jQuery plugin found here, and though I have posted at their forum as well, am having a heck of a time (not being well versed in js OR Ajax, unfortunately)

All I need to do is edit the code so that when the onSubmit function is processed, it returns only the first error it encounters, rather than keeping and display the array of every error. I have picked through the code several times, and can't seem to find where the array is stored. I thought perhaps I could find a for loop to limit, but am at a complete loss.

Is there anyone out there who can help? I can post the code if needed; I didn't want to post the entire file (since I don't know which snippet is the one I need!)

Thank you in advance!

Hi,

I'd like to use the jQuery validation plugin as seen on the following example:
http://docs.jquery.com/Plugins/validation#Example

But it doesn't work properly if I use inline/in-filed labels.


Any help is appreciated!
Rain Lover

Hi everyone,

I currently use javascript in an anchor tag to submit a form using
Code:

<a href="#" onClick="document.myformname.submit(); return false;">Submit</a>

The only problem is, JQuery doesn't acknowledge that my form has been submitted.

Has anyone come up against this problem before? If so, can you please share your work around?

Thank you!

B

I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is.

Here is the code.

Code:

// BEGIN JAVASCRIPT
$(function(){
	
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'your email',
			'yourmessage'  :  'I would like to inquire about'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
	$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });

    //form validation
    $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
    $('#submit').click(function(){
        //remove classes
        $('#sendamessage input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error'); // css class
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid'); // css class
            }
        });     
        
        if(!error) {
        	// this is where I get confused. How do I make this send the form?
        	alert('Data sent');
    		});
        } 						
    }); 	
});
// END JAVASCRIPT


        <form method="post" action="" onsubmit="return validateForm()" >
			<input type="hidden" name="ccf_customhtml" value="1" />
			<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
			<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
            <input type="hidden" name="required_fields" value="" />

            	<label for="name">Name</label>
            		<input type="text" name="name" id="name" value="your name" /> 
            
            	<label for="email">Email</label>
            		<input type="text" name="email" id="email" value="your email" /> 
            
            	<label for="yourmessage">Your Message</label>
            		<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>

            		<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
        </form>

I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent.

Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page.

Cheers!
-Dave

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

Here is the PHP:
PHP Code:
<?php if (($totalRows_getDie = mysql_num_rows($getDie)) != NULL) {
    echo "Die Category: <select name='DieCatId' class='dropMenu' id='DieCatId' onchange='jobDieChange(this.value)'>
    <option value='NULL'></option>";
    do { 
        echo "<option value='".$row_dieCatList['DieCatID']."'";
            if (!(strcmp($row_dieCatList['DieCatID'], $row_getDie['DieCatID']))) {echo "selected=\"selected\"";}
            echo ">".$row_dieCatList['DieCatDesc']."</option>";
        } 
    while ($row_dieCatList = mysql_fetch_assoc($dieCatList));
      $rows = mysql_num_rows($dieCatList);
      if($rows > 0) {
          mysql_data_seek($dieCatList, 0);
          $row_dieCatList = mysql_fetch_assoc($dieCatList);
          }
    echo "</select>    <a href='popup.php?getpage=dieins' onclick='window.open(this.href, 'popupwindow', 'width=770,height=675,scrollbars,resizable'); return false;'>Add Die</a><br />";
    echo "Die: <select name='DieID' class='dropMenu' id='DieID'>";
        if ($totalRows_getDie != 0) { echo "<option value='".$row_getDie['DieID']."'>".$row_getDie['DieDesc']."</option>"; }
        echo "</select><br />";
    echo "<input type='hidden' name='DiecutID' value='".$row_getDie['DiecutID']."' />";
    } ?>

And the JS:
Code:

var xmlhttpJDie;

function jobDieChange(str)
{
xmlhttpJDie=GetXmlHttpObject();
if (xmlhttpJDie==null)
	{
	alert ("Browser does not support HTTP Request");
	return;
	}
var url="/scripts/jobdie.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttpJDie.onreadystatechange=JobDieGet;
xmlhttpJDie.open("GET",url,true);
xmlhttpJDie.send(null);
}

function JobDieGet()
{
if (xmlhttpJDie.readyState==4)
	{
	document.getElementById("DieID").innerHTML=xmlhttpJDie.responseText;
	}
}

In all browsers except IE, it works fine, but IE gets a Script error and won't update the second select. I've gone over this so many times I'm cross eyed! If someone could please help me figure out why IE doesn't like this I would appreciate it.

Thank you!

I have a form that is used to insert a new classified ad or to update an existing ad.
When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red.
This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it.

Here is the code snipit:
Code:

function submitbutton(mfrm) {
	var me = mfrm.elements;
	var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
	var r_num = new RegExp("[^0-9\.,]", "i");
	var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");

	var errorMSG = '';
	var iserror=0;
		// set notification background color
	var warnColor = '#<?php echo $this->error_color; ?>';
	
	// loop through all input elements in form
	for (var i=0; i < me.length; i++) {
	
		// check if element is mandatory; here mosReq="1"
		if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
			if (me[i].type == 'radio' || me[i].type == 'checkbox') {
				var rOptions = me[me[i].getAttribute('name')];
				var rChecked = 0;
				if(rOptions.length > 1) {
					for (var r=0; r < rOptions.length; r++) {
						if (rOptions[r].checked) {
							rChecked=1;
						}
					}
				} else {
					if (me[i].checked) {
						rChecked=1;
					}
				}
				if(rChecked==0) {
					errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
					// notify user by changing background color, in this case to red
					me[i].style.background = warnColor;
					iserror=1;
				} 
			}

			if ((me[i].value == '') || (me[i].value.length < 2)) {
				errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
				me[i].style.background = warnColor;
				iserror=1;
			} 
		}
	}
	
	if(iserror==1) {
		alert(errorMSG);
		return false;
	}
}

This is the code part that fails it's if check.

Code:

while (n<=30)
	{
	var slot='#slot'+n;
	$( slot ).data({no: n, id: itemId[i], name: itemName[i], equip: itemEquip[i], lvl: itemLvl[i], bonus: itemBonus[i], rstr: itemRStr[i], rdef: itemRDef[i]});
	$( slot ).draggable({ handle: slot, stack: slot, revert: "invalid", snap: "div#"+itemEquip[i], snapMode: 'inner',
	start: function(event, ui) 
	{
	$('div#'+$(this).data('equip')).css({'border': '2px dashed #0066CC', 'background': 'rgba(255,255,255,0.2)'})
	.droppable
	({
		drop: function(event, ui)
		{
			if (pLvl>=$('.ui-draggable-dragging').data('lvl') && pStr>=$('.ui-draggable-dragging').data('rstr'))
			{	
			alert(pLvl+", "+$('.ui-draggable-dragging').data('lvl'));
			$('.ui-draggable-dragging').css({'display':'none'});
			$('div#'+$('.ui-draggable-dragging').data('equip')).html
			(
			 "<img src='items/equipped/"+$('.ui-draggable-dragging').data('name')+$('.ui-draggable-dragging').data('id')+".png' />"
			)
				  $.ajax({type:"GET", url:"items/change.php", data:"id="+$('.ui-draggable-dragging').data('id')+"&no="+$('.ui-draggable-dragging').data('no'), cache:false, timeout:5000,
													error: function() {
														$('div.nogood').html
														(
														"There was an error. Please inform us about it in the forum."
														).css({'width':'400px','margin-left':'-200px'});
                                                       $( 'div.nogood' ).fadeIn(500, away);
													   function away()
													   {
														$( 'div.nogood' ).delay(2000).fadeOut(500);
													   };
                                                }
                                        });

			
			}
			else 
			{
				alert("HUh");
				$( 'div.nogood' ).fadeIn(500, away).css({'width':'400px','margin-left':'-200px'});;
				$('.ui-draggable-dragging').draggable({revert: true});
				if (pLvl<$('.ui-draggable-dragging').data('lvl'))
				{
				alert("Good");
				}
				else if (pStr<$('.ui-draggable-dragging').data('rstr'))
				{
				$('div.nogood').html("Not enough strength.")
				}
				function away()
				{
					$( 'div.nogood' ).delay(1400).fadeOut(500);
				};
			
			}
		}
	});
	},
	stop: function(event, ui) 
	{
		$('div#'+$(this).data('equip')).css({'border':'none', 'background':'transparent'}).droppable("destroy");
	}
	});
		n++;
		i++;
	}

This if comparison if (pLvl>=$('.ui-draggable-dragging').data('lvl') && pStr>=$('.ui-draggable-dragging').data('rstr')) somehow goes through. After the if statement I check the values with the alert but it displays 5 for pLvl and 10 for the draggables data (which are the correct numbers) so can anyone tell me why does this if statement still go through when pLvl is lower?

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

Hi,

does 'focus' method show a 'stable' result? i call this method on a node -- if this one is not absolutely positioned -- it seems nothing happens
so ① does this method only apply to absolutely positioned element?

also, in FF, aNode.focus() has no effect whereas in IE document will scroll until that node is visible if the node is partially invisible at the bottom.
②is this a bug in FF?

here is the code
Code:

<div style="position:absolute; left:50px; top: 700px" onclick="this.focus();">
yepsfagadgre<br />agefderdsf<br />agefderdsf<br />agefderdsf</div>

scroll the document until the text is half-visible at the bottom. click on it -- in IE it will scroll up while in FF nothing happens
besides, if it is not absolutely positioned, nothing happens either~~~

thx in advance

i cant get collission detection to work. i tryed but it always caused an infinite loop. heres the code.
Code:

<html>
<!-- main file.-->
<head>

<title>lightning generator</title>

</head>

<body>
<canvas id='world' width='500' height='500' style='border: 1px solid black; padding:0;'></canvas>
<script type="text/javascript" src='world.js'></script>
<script type='text/javascript' src='eC.js'></script>
<script type='text/javascript' src='world.ground.js'></script>
<script type='text/javascript'>
world.bolt = {
}
;
world.bolt.paths = [];
// main obj inits

world.bolt.draw = function(){

   var x, y;
   for( var id = 0; id <= world.bolt.draw.num; id ++ ){
   
      world.ctx.moveTo( world.bolt.paths[id].x[world.bolt.paths[id].x.length-1],  world.bolt.paths[id].y[world.bolt.paths[id].y.length-1] );
      var mdx=Math.floor(Math.random()*world.bolt.paths[id].mdx);
      x = world.bolt.paths[id].x[world.bolt.paths[id].iters] + ((Math.random()<Math.random())?mdx:-mdx);
      y = ++ world.bolt.paths[id].iters;
      world.bolt.paths[id].x.push( x );
      world.bolt.paths[id].y.push( y );
      world.ctx.strokeStyle = world.bolt.paths[id].color;
      world.ctx.lineTo( x,  y );
      
   
   world.ctx.stroke();
   //world.ctx.beginPath();
   }   if(x%3==0){ world.ctx.fillStyle=world.skyColor;
    world.ctx.fillRect(0,0,world.w,world.h);}
}
world.bolt.draw.num=-1;
world.bolt.cpath = function( x, y, mdx, srate, id, color ){
   world.bolt.paths[id] = {
   }
   ;
   world.bolt.paths[id].iters = 0;
   world.bolt.paths[id].x = [];
   world.bolt.paths[id].y = [];
   world.bolt.paths[id].x[0] = x;
   world.bolt.paths[id].y[0] = y;
   world.bolt.paths[id].mdx = mdx;
   world.bolt.paths[id].srate = srate;
   world.bolt.paths[id].color = color;
   world.bolt.draw.num += 1;
}
world.bolt.cpath(250,0, 5,5,0,'rgba(255,255,150,.5)');
window.setInterval(world.bolt.draw,100)
window.setTimeout('world.bolt.cpath(125,0,5,5,1,"rgba(255,10,0,.5)")',1000);
</script>
</body>
</html>

Code:

//world.js
var world = {
skyColor:'rgba(0,0,100,.009)'  
}
;
world.canvas = document.getElementById( 'world' )
world.canvas.cstyle = document.defaultView.getComputedStyle( world.canvas, null )
world.w = parseInt( world.canvas.cstyle.width, 10 );
world.h = parseInt( world.canvas.cstyle.height, 10 );
world.ctx = world.canvas.getContext( '2d' );

finally,
Code:

// world.ground.js

world.ground = {
}
;
world.ground.level = [];


world.ground.make = function( GArray, length ){

   world.ctx.strokeStyle = '#000000';
   world.ground.level = [];
   world.ctx.fillStyle = '#FFF';
   world.ctx.fillRect( 0, 0, world.w, world.h );
   world.ground.level = GArray;
   for ( world.ground.make.i = 0; world.ground.make.i <= length; world.ground.make.i ++ ){
      if ( GArray[world.ground.make.i + 1] === undefined ){
         GArray[world.ground.make.i + 1] = GArray[world.ground.make.i];
      }

      world.ctx.moveTo( world.ground.make.i, ( world.h ) );
      world.ctx.lineTo( world.ground.make.i, ( world.h - GArray[world.ground.make.i] ) );
   }
   world.ctx.stroke();
   world.ctx.beginPath();
}
;

world.ground.create = function( func, width ){
   func = ec( func );
   if( func === false ){
      alert( 'Pass equation as a string without the "y=", "f(x)=", "g(x)=" or similar.' );
      return world;
   }
   if( func == 'perspicaciousness' ){
      return world;
   }
   var temp = [];
   for( var x = 0; x <= width; x ++ ){
      temp[x] = eval( func );
   }
   world.ground.make( temp, width );
}
;
world.ground.create.test='4';
world.ground.create( world.ground.create.test, 500 );

in the end of world.bolt.cpath,there should be a way to use the local varis X and Y, and world.ground.js's world.ground.level[] to detect it. sorry for the gigantic length. thanks in advanced. the jsnerd