Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2010-08-18
2
591 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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)

856 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