Solved

Validate differet fields depending on what is selected in a dropdown in a form with jQuery?

Posted on 2010-08-18
2
578 Views
Last Modified: 2012-05-10
I have the following code to validate some fields on a sharepoint newform.aspx. To not submit the form in sharepoint I must return a false statement to the default function PreSaveItem.

Validation:
//bind a change event to all controls to validate
      $("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic

Priority]").change(function(){
            checkControls()
      });

      //the change event function - check the status of each control
      function checkControls(){

      //set a variable to count the number of valid controls
      var controlsPassed = 0;

      //set up a selector to pick .each() of the target controls
      $("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic

Priority]").each(function(){

            //if the control value is not zero AND is not zero-length
            var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl00_UserField_hiddenSpanData').val();
            var val = $(this).val();
            if($(this).is(':hidden') || (val != 0 && val.length != 0 && txt.length != 0)) {

                  //add one to the counter
                  controlsPassed += 1;
            }

            });

      //call the PreSaveItem function and pass the true/false statement of 5 valid controls

return (controlsPassed == 5)

      }
          function PreSaveItem() {
                return checkControls()
         }


I want to validate different elements depending on what I have selected in a dropdown list called Item Level.

I get the values from Item Level with:

            $("select[title='Item Level']").change(function() {
            var itemLevel = $(this).val();            
            if (itemLevel == "Strategic Objective") {


            alert(itemLevel);
            }
            if (itemLevel == "Strategic Priority") {


            alert(itemLevel);
            }
            if (itemLevel == "Milestone Action") {


            alert(itemLevel);
            }
            if (itemLevel == "Performance Measure") {


            alert(itemLevel);
            }

            });

I thought it would be easy to just chuck the validation code into the if's but it doesn't work.

For example:

            $("select[title='Item Level']").change(function() {
            var itemLevel = $(this).val();            
            if (itemLevel == "Strategic Objective") {


            alert(itemLevel);
            }
            if (itemLevel == "Strategic Priority") {


            alert(itemLevel);
            }
            if (itemLevel == "Milestone Action") {
            //bind a change event to all controls to validate
      $("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic

Priority]").change(function(){
            checkControls()
      });

      //the change event function - check the status of each control
      function checkControls(){

      //set a variable to count the number of valid controls
      var controlsPassed = 0;

      //set up a selector to pick .each() of the target controls
      $("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic

Priority]").each(function(){

            //if the control value is not zero AND is not zero-length
            var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl00_UserField_hiddenSpanData').val();
            var val = $(this).val();
            if($(this).is(':hidden') || (val != 0 && val.length != 0 && txt.length != 0)) {

                  //add one to the counter
                  controlsPassed += 1;
            }

            });

      //call the PreSaveItem function and pass the true/false statement of 5 valid controls

return (controlsPassed == 5)

      }
          function PreSaveItem() {
                return checkControls()
         }


            alert(itemLevel);
            }
            if (itemLevel == "Performance Measure") {


            alert(itemLevel);
            }

            });

and in the item level item Strategic Objective validate some other elements. Any ideas?

Thanks in advance.
0
Comment
Question by:msgl
2 Comments
 
LVL 2

Accepted Solution

by:
LeicaLouie earned 500 total points
ID: 33473669
I'm not sure what the problem is and what is not working for you. Can you provide more details?

A few ideas though: When I do this I hide the Save button generated by SharePoint and add my own Save buton in the same place / same styles, this way all I need to do is attach the validation handler to my button, not SharePoint's and things get easier as I don't have to mess with SharePoint's JS.

Something like this:

$('<input type="button" id="mysavebutton" ..... />').click(function() {
  var valid = false;

  // my validation code...

  if(valid) {
    $('selector to return sharepoint save button').click(); // call the click event to run SP submit JS
  }
}).appendTo('...')

0
 

Author Closing Comment

by:msgl
ID: 33739897
solved my problem
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

708 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

18 Experts available now in Live!

Get 1:1 Help Now