?
Solved

Jquery Required Fields - validating and combining error messages

Posted on 2011-02-22
10
Medium Priority
?
566 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
[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
  • 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
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!

 
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 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…
Suggested Courses

777 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