Solved

Jquery Required Fields - validating and combining error messages

Posted on 2011-02-22
10
553 Views
Last Modified: 2012-05-11
I am using a plug in I found here to validate a form field. This field is on an "edit" page in my application. So, I need to check for two things on submit.

1. That there is a value and
2. that the value has changed from its previous value (which would be a CFML variable).

There are some potential issues, too... The fields in this form are in a cfloop. So there could be multiple personLast_#currentrow# and so obviously multiple different values. So, I can't really "hard-code" the script to check... they're dynamic. There are many more fields in this form that will need this functionality as well. Also because of the formatting of the fields I don't want the error message to appear beside the field input but rather in one message at the top (and no pop-ups!). Do-able?

Any help would be appreciated... thanks.

P.S. Why isn't there a jquery zone anymore?
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script>
  $(document).ready(function(){
    $("#updateNames").validate();
  });
</script>

<form method="post" action="act_updateNames.cfm" name="updateNames" id="updateNames">

<input type="text" name="personLast_#currentrow#" value="#qry_getNames.personLast#" size="9" class="changer required"/>&nbsp;,&nbsp;

<input id="updateNames" name="updateNames" type="submit" value="Update Names List">

</form>

Open in new window

0
Comment
Question by:traport
  • 3
  • 2
  • 2
  • +1
10 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34951083
To check that values change you can make different things:

1) Launch validation function onChange event on every field. OnChange event should ensure a real change is made to the data currently held on the field. It's a double-edged weapon, as you can change data in a field (onChange fires), and change data again to original value (onChange fires again, and detect a diference between current value and input value, but will not detect that input value is original one).

2) Create a structure on page load where you record original values of your sensible fields. When checking for changes you'll be able to compare with the data stored on this structure (a JSON struct will be specially useful here).

3) Use AJAX calls to ask server for current data held on database. In this case you'll need to lock data during queries in order to avoid multiple user interaction to interfere with validation.

I hope it helps.
0
 

Author Comment

by:traport
ID: 34951464
Bardobrave,

Well - this does help. I know what I *should* do but the need for help goes beyond that. I need to also know how to do what I should do. As in I need help writing the code. I know that makes some people on here cringe, but this is indeed what I'm looking for using the example code above. I appreciate your insight and help.

T
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34951513
Mmmm.... I don't know this Jquery plugin and ColdFusion programming neither.

I can try to help you with the code (I'm ok with helping with your code, not with coding in your place ;-) I think that's better to teach to fish than to give free fishes).

You should decide wich of the ways I propose are you going to use and then I'd try to orientate you in how to start and to solve those problems you face during the job.
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 39

Expert Comment

by:gdemaria
ID: 34952254

here is the jquery zone under javascript...

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/

You may want to click  "request attention" and ask this to be included


0
 
LVL 39

Expert Comment

by:gdemaria
ID: 34952262
I can help you with the coldfusion part.  One observation that is a bit beyond this question is that you still need to validate your fields via coldfusion on the server side.  I can help with that and the loop, which you're not showing, if needed.  

But I think this is mostly a jquery question as it stands now.
0
 

Author Comment

by:traport
ID: 34952442
gdemaria: Thank you. I submitted attention to this and asked about this zone b/c you're right this is primarily a jquery question. I'm cool on the server-end submission validation in coldfusion - thank you for the offer.

0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 34989700
>><form method="post" action="act_updateNames.cfm" name="updateNames" id="updateNames">
Your <input> field also has the same name and id. You cannot use the same id multiple times. It must be unique. Try the following:
<style>
.errorMessage{color:red;}
</style>
<script>
$(document).ready(function(){

    $("#updateNamesForm").validate();

	$.validator.addMethod("cRequired", function(v,f){v=v.replace(/^\s+|\s+$/g,'');return !(v=='' ||v==f.defaultValue);}, "<span class='errorMessage'>Person name required</span>");


	$.validator.addClassRules("person", { cRequired: true });
});
</script>

<form method="post" action="act_updateNames.cfm" name="updateNamesForm" id="updateNamesForm">

<div><input type="text" name="personLast_#currentrow#" value="#qry_getNames.personLast#" size="9" class="person"/>&nbsp;,&nbsp;</div>

<input id="updateNames" name="updateNames" type="submit" value="Update Names List">

</form>

Open in new window

0
 

Author Closing Comment

by:traport
ID: 34991208
Thanks - as always - hielo!
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)

730 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