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.
msglAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
msglAuthor Commented:
solved my problem
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.