Solved

Jquery Required Fields - validating and combining error messages

Posted on 2011-02-22
10
544 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 39

Expert Comment

by:gdemaria
Comment Utility

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 39

Expert Comment

by:gdemaria
Comment Utility
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
Comment Utility
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
Comment Utility
>><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
Comment Utility
Thanks - as always - hielo!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…

771 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

11 Experts available now in Live!

Get 1:1 Help Now