Solved

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

Posted on 2013-10-29
9
13,689 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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 500 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to count occurrences of each item in an array.

832 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