?
Solved

Using jQuery Validation Plugin - getting "Uncaught TypeError: Cannot read property 'form' of undefined"

Posted on 2013-10-29
9
Medium Priority
?
15,227 Views
Last Modified: 2013-10-29
Using jQuery Validation Plugin.

var html = '<form id="newJobForm" class="well job-form-extra">';
$.each( data, function( i, item ) {		
	if(item.type == "text") {		
		html += '<label for="'+item.id+'"></label><input placeholder="'+item.title+'" type="text" id="'+item.id+'" name="'+item.id+'" '+(/\bpobid/gi.test(item.title) ? ' required="required"' : '')+'><br />';
		if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true});
	}	
}
html += '</form>';
$(html)
        .hide()
        .css('opacity',0.0)
        .appendTo('#trigger-header')
        .slideDown('fast')
        .animate({opacity: 1.0})
$("#newJobForm").validate();

Open in new window


From this I get:
Uncaught TypeError: Cannot read property 'form' of undefined

It happens with this line:
$("[name='"+item.id+"']").rules("add", {required: true});
0
Comment
Question by:itnifl
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39608297
Still looking, but found this problem so far:

Your $.each(...
is missing the closing );


what is data? you are not defining/declaring it
0
 
LVL 2

Author Comment

by:itnifl
ID: 39608350
You are right. I was a bit fast when I took out the code I thought was relevant. Here is the whole function.

Data is a response from a node API that represents data elements in a Orhestrator run book step.

function InsertForm(data,rid) {
	//console.log(data)
	
	var html = '<form id="newJobForm" class="well job-form-extra"><span class="help-block">Help Text</span>';

	$.each( data, function( i, item ) {		
		if(item.type == "text") {		
			html += '<label for="'+item.id+'"></label><input placeholder="'+item.title+'" type="text" id="'+item.id+'" name="'+item.id+'" required="required"><br />';
			if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true}, messages: {required: "Required input"});
		}
		
		if(item.type == "_username") {
			html += '<input value="__username" type="hidden" id="'+item.id+'" name="'+item.id+'">';
		}
		
		if(item.type == "_email") {
			html += '<input value="__email" type="hidden" id="'+item.id+'" name="'+item.id+'">';
		}
		
		if(item.type == "dropdown") {
			html += '<label>'+item.selectinfo+'</label>';
			html += '<select class="styled-select" name="'+item.id+'">';
			var a = item.title.split(',');
			for (var i = 0; i < a.length; i++) {
				html += '<option value="'+a[i]+'">'+a[i]+'</option>';
			}
			html += '</select><br />';
		}		
    });
	
	html += '<a class="btn btn-primary" href="javascript: submitform(\''+rid+'\')">Start</a>';
	html += '</form>';	
	
	$(html)
        .hide()
        .css('opacity',0.0)
        .appendTo('#trigger-header')
        .slideDown('fast')
        .animate({opacity: 1.0})
    $("#newJobForm").validate();
}

Open in new window

0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39608378
Change
if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true}, messages: {required: "Required input"});

Open in new window

to
if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true, messages: {required: "Required input"}});

Open in new window

0
Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

 
LVL 2

Author Comment

by:itnifl
ID: 39608423
Good spotted, but same error still :p
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39608426
this works on my side:
<!DOCTYPE HTML>
<html>
<head>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
	<div id="trigger-header"></div>
	
	<script type="text/javascript">
	function InsertForm(data,rid) {
		//console.log(data)
		
		var html = '<form id="newJobForm" class="well job-form-extra"><span class="help-block">Help Text</span>';

		$.each( data, function( i, item ) {		
			if(item.type == "text") {		
				html += '<label for="'+item.id+'"></label><input placeholder="'+item.title+'" type="text" id="'+item.id+'" name="'+item.id+'" required="required"><br />';
				//if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true}, messages: {required: "Required input"});
				if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true, messages: {required: "Required input"}});
			}
			
			if(item.type == "_username") {
				html += '<input value="__username" type="hidden" id="'+item.id+'" name="'+item.id+'">';
			}
			
			if(item.type == "_email") {
				html += '<input value="__email" type="hidden" id="'+item.id+'" name="'+item.id+'">';
			}
			
			if(item.type == "dropdown") {
				html += '<label>'+item.selectinfo+'</label>';
				html += '<select class="styled-select" name="'+item.id+'">';
				var a = item.title.split(',');
				for (var i = 0; i < a.length; i++) {
					html += '<option value="'+a[i]+'">'+a[i]+'</option>';
				}
				html += '</select><br />';
			}		
		});
		
		html += '<a class="btn btn-primary" href="javascript: submitform(\''+rid+'\')">Start</a>';
		html += '</form>';	
		
		$(html)
			.hide()
			.css('opacity',0.0)
			.appendTo('#trigger-header')
			.slideDown('fast')
			.animate({opacity: 1.0})
		$("#newJobForm").validate();
	}
												
	
	
		
		var TestData = [{id:"name_first", title:"enter your first name", type:"text"}
					,{id:"name_last", title:"enter your last name", type:"text"}
					,{id:"mobile", title:"enter your mobile", type:"text"}
					,{id:"age", title:"enter your age", type:"text"}
					];
		InsertForm(TestData, 'newJobForm');
	</script>
</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39608443
Do you get the error when loading the page? or when clicking the "Start" link?

Can you post your submitform code?
0
 
LVL 2

Author Comment

by:itnifl
ID: 39608495
I get the error when I load the page, however I can see that you are not getting it. I tried your code in a html file locally.

function submitform(r) {
	var loadinghtml = '<div id="loading"><img src="/global/loading.gif"/>laster...</div>';
	var f = $('#newJobForm').serializeArray();
//I have this going on here to validate the input since I am not getting the jQuery Validation Plugin to work.
	var notComplete = false;
	for(var x = 0; x < f.length; x++) {
		if(!f[x].value) {
			$("label[for='"+f[x].name+"']").text('* This field is required..').css('font-weight','bold').css('color','red');
			notComplete = true;
		}
	}
	if(notComplete) return false;
	$('#newJobForm').fadeOut('fast');
	
	$(loadinghtml)
        .hide()
        .css('opacity',0.0)
        .appendTo('#trigger-header')
        .slideDown('fast')
        .animate({opacity: 1.0})

	var ADSSapi = _ADSSapi + 'orchestrator/order.php?r='+r+'';

	$.ajax({
		type: "POST",
		url: ADSSapi,
		data:  f
	}).done(function( msg ) {
		var d = jQuery.parseJSON(msg);				
		if(d.status == "Pending") {
			$('#newJobForm').remove();
			$('#loading').fadeOut('fast').remove();
			
			var completehtml = '<blockquote><p>Job is sent to orchetrator.</p> <small">ID: '+d.id+'</small></blockquote>';
			
			$(completehtml)
				.hide()
				.css('opacity',0.0)
				.appendTo('#trigger-header')
				.slideDown('fast')
				.animate({opacity: 1.0})			
		} else {
			$('#loading').fadeOut('fast').remove();
			$('#newJobForm').fadeIn('fast');
		}
	});
}

Open in new window

0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 2000 total points
ID: 39608686
I suspect the error is elsewhere in your code. What I gather from that error is that you are referencing .form on some variable or object which has not been set.

Can you post your entire code?
0
 
LVL 2

Author Comment

by:itnifl
ID: 39608729
I am sorry. I cannot. I will have to look further into this myself. Thank you so far.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses
Course of the Month7 days, 19 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question