[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 620
  • Last Modified:

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

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
msgl
Asked:
msgl
1 Solution
 
LeicaLouieCommented:
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
 
msglAuthor Commented:
solved my problem
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now