Solved

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

Posted on 2013-10-29
9
13,130 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
 
LVL 2

Author Comment

by:itnifl
ID: 39608423
Good spotted, but same error still :p
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo‚Ķ
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

706 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now