Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need JQuery function to validate all fields on a SharePoint Form

Posted on 2012-04-02
4
Medium Priority
?
672 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 …
This article discusses how to create an extensible mechanism for linked drop downs.
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

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