Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-10-29
9
Medium Priority
?
15,817 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Industry Leaders: 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

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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:
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

610 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