Solved

Need JQuery function to validate all fields on a SharePoint Form

Posted on 2012-04-02
4
663 Views
Last Modified: 2012-04-18
I have a Form I am creating in SharePoint Designer 2007.  My form has varying required fields that are dependent on the value of specific fields. For example field 1 has a value of 'A' then field 2 is required and Field 3 is optional.  If field 1 has a value of 'B' then Field 2 is optional and Field 3 is required.  I have a function that controls the visibility of a div with an '*' to indicate that the field is required.  If the required field contains data, then I want the '*' to be hidden. This function currently works for only one field.  I need to change this function to look at my entire form and validate all required fields.


$(document).ready(function()     {
     $("input[id*=ff5]").change(function()     {
          var f=$.trim($("input[id*=ff5]").val()).length;
          if(f==0)     {
               $("div#ff5").show();
               }
          else     {
               $("div#ff5").hide();
               }
          });
});

Open in new window


The form is laid in three column table(s) as:

Label     SharePoint:FormField     Div '*'

Any help is appreciated.
0
Comment
Question by:macarrillo1
[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
4 Comments
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 37797809
0
 
LVL 9

Author Comment

by:macarrillo1
ID: 37806205
@techChallenger1,

Your links are excellent validation methods that I will make use of in the future.  Unfortunately, my current assignment requires a custom validation method as my required fields are dependent on user entered values (see above)

What I have so far is:

Jquery code:

$(document).ready(function()	{
     $(".Required input").change(function() {
          var f=$.trim($(this).val()).length;
          if(f==0){
               $(".Required div").show();
               }
          else {
               $(".Required div").hide();
               }
     });
});

Open in new window


ASP.NET Code:

<tr class="Required">
     <td width="20%" >
          <b>Request Title:</b>
     </td>
     <td width="75%">	
          <SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" />
     </td>
     <td width="5%">
          <div><p><font color="red" >*</font></p></div>
     </td>
</tr>
<tr class="Required" title="Owner Name or Originator Name">
     <td width="20%" >
          <b>Originator Name:</b>
     </td>
     <td width="75%">
          <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Originator_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)), '@Originator_x0020_Name')}" />
     </td>
     <td width="5%" >
          <div><p><font color="red" >*</font></p></div>
     </td>
</tr>

Open in new window


Initial display:
Request Title:          [Title]                               *
Originator Name:    [Originator Name]     *

The result of the above code is:

When data entered into Title field both '*' are hidden.
I need only the '*' on the field that has data to be hidden. The other fields '*' should not be hidden until its field has data.

The problem I am having is finding a way to distinguish the div from the two different rows when I am attempting to hide the div.
0
 
LVL 9

Accepted Solution

by:
macarrillo1 earned 0 total points
ID: 37844482
I was able to find a solution.


jQuery Code:

     $("tr.Required input").change(function() {
          var f=$.trim($(this).val()).length;
          var tr_id=$(this).parent().parent().parent().attr('id');

          if(f==0){
               $("tr#" + tr_id + ".Required div").show();
          }
          else {
               $("tr#" + tr_id + ".Required div").hide();
          }
     });

Open in new window



ASP.NET/HTML Code:

<tr class="Required" id="ff5">
     <td width="24%" class="ms-vb">
          <b>Request Title:</b>
     </td>
     <td width="75%" class="ms-vb">
          <SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}" />
     </td>
     <td width="1%" class="ms-vb">
          <div><p><font color="red">*</font></p></div>
     </td>
</tr>
<tr class="Required" id="ff3" title="Owner Name or Originator Name">
     <td width="24%" class="ms-vb">
          <b>Originator Name:</b>
     </td>
     <td width="75%" class="ms-vb">
          <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="Originator_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)), '@Originator_x0020_Name')}" />
     </td>
     <td width="1%" class="ms-vb">
          <div><p><font color="red">*</font></p></div>
     </td>
</tr>

Open in new window


The SharePoint:FormField tags are render on the page as input tags. So I looked for the change event on the input tags within Rows(tr tags) with a class of 'Required'. When I validated that the input tag contained data I also captured the ID of the row that contained the input tag. Then, I used the captured Id to identify the row whos Divs I wanted to hide or show.
0
 
LVL 9

Author Closing Comment

by:macarrillo1
ID: 37859738
I was able to work out a solution on my own.  However, I have a followup question that I will be posting shortly.  This solution above only works for text fields. I need to have a function that will also work with rich text fields
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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…

739 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