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

Question

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.

Edit: the working code with help from casablanca:

function checkControls() {
  var itemLevel = $("select[title='Item Level']").val();
  switch (itemLevel) {
    case 'Strategic Objective':

    var controlsPassed = 0;

    $("input[id$=UserField_hiddenSpanData]").each(function(){

        var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_hiddenSpanData').val();
        var val = $(this).val();
        if(val != 0 && val.length != 0 && txt.length != 0) { 

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

        });
        return (controlsPassed == 1) 

    case 'Milestone Action':

      var controlsPassed = 0;

    $("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective],select[title=Strategic 

Priority]").each(function(){

        var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_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;
        }

        });
        return (controlsPassed == 5) 

    case 'Performance Measure':

        var controlsPassed = 0;

    $("select[title=Strategic Objective],select[title=Strategic Priority]").each(function(){

        var val = $(this).val();
        if(val != 0 && val.length != 0) { 

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

        });
    return (controlsPassed == 2) 

case 'Strategic Priority':

        var controlsPassed = 0;

    $("input[title=Target Date],input[id$=UserField_hiddenSpanData],input[title=Start Date],select[title=Strategic Objective]").each(function(){

        var txt = $('#ctl00_m_g_c6ae303a_6013_4adb_8057_63a214bcfd24_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_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;
        }

        });
    return (controlsPassed == 4) 

  }
}

function PreSaveItem() 
    {
            return checkControls()
    }

Answer 1

Okay, so this is the problem I see in your current script: binding an event handler is permanent, so if you choose "Milestone Action" even once and then switch to another option, you will still validate the original selection.

You can do away with all the change handlers and instead add your conditions directly in checkControls, validating the necessary elements based on the current selection. I've also replaced your ifs with a switch since it's cleaner:

function checkControls() {
  var itemLevel = $("select[title='Item Level']").val();
  switch (itemLevel) {
    case 'Strategic Objective':
      // Perform validation for this item level
      return result; // true or false

    case 'Milestone Action':
      // Perform validation for this item level
      return result; // true or false

    // etc...
  }
}

Update: For example, if when "Milestone Action" is selected, you would like to check if some text field is not empty, then under case 'Milestone Action':, you would add something like this:

if ($('something').val().length > 0)
  return true;
else
  return false;

---

Edit: If you have access to the form code (I'm not familiar with SharePoint), you should assign IDs to your form elements so you can reference them like $('#itemLevel') instead of having to use a long selector.