?
Solved

jQuery Form Validation

Posted on 2011-03-25
3
Medium Priority
?
129 Views
Last Modified: 2013-10-21
I've got a form that I use jquery to do some of the light lifting like serializing multiple inputs into one field.

I need to add validation to the form but haven't been able to get it working. Is there anything obvious in my code (below) that would keep it from working? It just submits without doing any validation.




 
$("#freeform").validate({
	rules: {
		full_name: "required",
		organization: "required",
		email_address: {
			required: true,
			email: true
		},
	messages: {
		full_name: "Please enter your full name",
		organization: "Please enter your Company Name",
		email_address: "Please enter a valid email address"
		},

	submitHandler: function(form) {
		//setup variables
		part_numbers = "";
		nsns = "";
		quantity_required = "";
		condition_required = "";
		
			$.map( $("[name^='parts[parts]'][name$='[part_numbers]']").serializeArray(), function(el,i) { part_numbers += ( ((i>0)?"|":"") + el.value) });
			$.map( $("[name^='parts[parts]'][name$='[nsns]']").serializeArray(), function(el,i) { nsns += ( ((i>0)?"|":"") + el.value) });
			$.map( $("[name^='parts[parts]'][name$='[quantity_required]']").serializeArray(), function(el,i) { quantity_required += ( ((i>0)?"|":"") + el.value) });
			$.map( $("[name^='parts[parts]'][name$='[condition_required]']").serializeArray(), function(el,i) { condition_required += ( ((i>0)?"|":"") + el.value) });
		
			$("#part_number").val( part_numbers );
			$("#nsns").val( nsns );
				  
			$("#quantity_required").val( quantity_required );
			$("#condition_required").val( condition_required );
			//alert( part_numbers );
		
			if ( $("input[name='file1']").val() == "" )
			{
			$("input[name='part_list_attached']").val("No");
		} else {
			$("input[name='part_list_attached']").val("Yes");
		}
		
		if ( $("input[name='file2']").val() == "" )
		{
			$("input[name='end_user_doc_attached']").val("No");
		} else {
			$("input[name='end_user_doc_attached']").val("Yes");
		}
		form.submit();
	}
});

Open in new window

0
Comment
Question by:befidled
[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
3 Comments
 
LVL 1

Accepted Solution

by:
Predicate earned 2000 total points
ID: 35219189
Hello befidled,

What happens if you change your mapping statements to append the serialized array values to your string vars using the array[index] notation?

For example: instead of appending "el.value" to your string vars, do "el[index].value" instead.


$.map( $("[name^='parts[parts]'][name$='[part_numbers]']").serializeArray(), function(el,i) { part_numbers += ( ((i>0)?"|":"") + el[i].value) });

Open in new window

0
 
LVL 1

Author Comment

by:befidled
ID: 35220457
The form is set up to allow a user to add rows of data for the portions that use the $.map statements and changing el.value to el[index].value breaks that functionality.

How do you think that might affect the validation?
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37243749
Since we do not have the HTML here, I can't quite follow what you're trying to do with the JavaScript, but please remember that you must validate the data on the server side before you use it in any script that can modify the data model.  Form data is external input, and therefore by definition it is tainted.  Nice guys will appreciate your efforts to make a good UI experience with JavaScript.  Bad guys will not really care; they will bypass the JavaScript and post toxic data directly into your action script.
0

Featured Post

Office 365 Training for IT Pros

Learn how to provision tenants, synchronize on-premise Active Directory, implement Single Sign-On, customize Office deployment, and protect your organization with eDiscovery and DLP policies.  Only from Platform Scholar.

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 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