Sharepoint 2010 - Client Validation of a Custom Form with Javascript

-
What to do if you want to perform a client validation with Javascript, in your custom new/edit form.

The submit button cames with this code in onclick event:


 if (!PreSaveItem()_) return false;WebForm_DoPostBackWithOptions(new ...

 The PreSaveItem function invokes PreSaveAction function that you can override with your own definition.If PreSaveAction returns true, then form proceeds to save data, otherwise, it stops with alert.


With Sharepoint Designer 2010, open form with Edit in Advanced Mode and insert code below:


<!-- call jquery -->
<script type="text/javascript" src="/SiteAssets/js/jquery.min.js"></script>
<!-- override PreSaveAction -->
<script type="text/javascript">
function PreSaveAction(){ 
   var field_to_validate = $("select[title='TITLE OF FIELD']").val();
   if(field_to_validate == ""){
     alert("Warning: complete field_to_validate!");
     return false;
   }
   return true;
}
</script>

We add jquery (but if you want to use simple javascript, you can).
Then, check field by title: in browser, input tag came with attribute "Title" equals to display name of column, then I search for this value.
If empty, return alert then false.

Comments

  1. Basker24 September, 2012 17:52

    Hi...Im Baskern from BigClasses.ThanQ for the info

    ReplyDelete
  2. Unknown09 October, 2012 12:34

    Hi ... william.. thanks for sharing information.This has to be one of my favorite posts! And on top of thats its also very helpful topic for newbies. Thanks a lot for informative information on sharepoint

    ReplyDelete

Post a Comment

Popular posts from this blog

Sharepoint 2010 - Filter List/Library Web Part with XSLT and Content Editor WP

-
Image
I created a simple Filter Web Part with a Content Editor WP and simple XLST to filter List/Library with the LIKE feature. It works for lists and libraries (in libraries not for Name field). Create a page with Library Web Part to filter. Then add a Content Editor Web Part end edit HTML Source. In HMTL, add an input textbox and two buttons, for reset filter and for submit filter. Add some script as shown below: <script type="text/javascript"> //this script get query string from URL function querySt(ji){   hu = window.location.search.substring(1);   gy = hu.split("&");   for (i=0;i<gy.length;i++){     ft = gy[i].split("=");     if (ft[0] == ji){       return ft[1];     }   } } //this script set value read from query string in input field function setValues(){    if(querySt('qtitle') != null && querySt('qtitle') != "")    {      document.getElementById('query_title').value = query
Read more

Sharepoint 2010 - Multilanguage Site - Show column in current language

-
Image
In multilanguage site feature, Sharepoint 2010 does not translate content of web part and metadata. We have to find a way to show to user content or metadata in current language. I used a list with columns with content in language and a lot of jquery to show and hide columns for current language. I have a list with "DescriptionIT" and "DescriptionEN" columns. Then, I set a view with both columns visible. In this view, I added a content query web part whit code below. In this code, I search for current language, i.e. "Italian", then search for column with "DescriptionIT", and hide all columns but "DescriptionIT" (with name starting with "Decsription"). Result is that if I change language (with Select Display Language), I see only column in respective language. Simple and cross platform. Here the code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type=&quo
Read more

Sharepoint 2010 - Enable/Disable Ribbon Button with EcmaScript

-
I show you a detailed example of how to enable and disable a ribbon button according to the current user’s group. The example uses “EnabledScript” attribute of the CommandUIHandler of the ribbon button. Then the EnabledScript is built with EcmaScript to find groups and user info. Lets Start with creating a Ribbon button first. 1. Create a empty project. 2. Deploy it as a Farm solution. 3. Right click on the feature and click “Add feature”. 4. Right click on the project and add a new “Empty Element” item. 5. Next add the below code to add a custom Ribbon button to your document library. <Elements xmlns=”http://schemas.microsoft.com/sharepoint/” > <CustomAction Id=”ButtonForGroupUsersOnly” Location=”CommandUI.Ribbon” RegistrationId=”101″ RegistrationType=”List” Title=”Owners Group Button”> <CommandUIExtension> <CommandUIDefinitions> <CommandUIDefinition Location=”Ribbon.Library.ViewFormat.Controls._children”> <Button Id=”Ribbon.L
Read more