Need JQuery function to validate all fields on a SharePoint Form

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.
LVL 9
macarrillo1Asked:
Who is Participating?
 
macarrillo1Connect With a Mentor Author Commented:
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
 
macarrillo1Author Commented:
@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
 
macarrillo1Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.