Develop Reference

Set Value of Hidden Field in SharePoint using jQuery

I am able to set the value of a site column (field), using jQuery, when it is not hidden using this:
$("select[Title='MyID']").val(MyRelatedID);
However, once I hide the field it doesn't work. I inspected the code and it looks like SharePoint hides it from the source code as well. I am opening the list containing the fields in a modal. Has anyone be able to set the hidden value of field?

I usually use this approach:
To set the value:
$('input[title="MyID"]').attr("value",MyRelatedID);
To hide the field:
$('input[title="MyID"]').parent().parent().parent().css("display","none");
I documented the complete approach here.

jQuery select on div content

I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?

The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.

In accordance with jQuery docs, "this event is limited to fields and boxes".

From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here

All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here

we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/

Disable required validation by JavaScript

I have a create form to create an object.
The create model has some properties that are only visible (.hide, .show()) if a checkbox is checked and that are marked required (by Attribute in Model).
Unfortunatly when the checkbox is not checked, the required validation is performed on the properties hidden.
How can I disable the required validation for this properties?
I tried setting the data-val property of the input element to false but this does not work.
Some an idea?
Thanks in advance
Tobias
UPDATE:
Here is the java script code. The data-val property is set correctly to false. it seems that validation does not care of this property. there is also the data-val-required attribute but there is a text i could not backup.
$(function () {
$("#MyCheckbox")
.change(function () {
if (this.checked) {
$("#divWithChildProperties [data-val]").attr("data-val", true);
$("#divWithChildProperties ").show();
}
else {
$("#divWithChildProperties [data-val]").attr("data-val", false);
$("#divWithChildProperties ").hide();
}
})
});

I've handled cases like this with a custom Validation Attribute. Instead of using the Required attribute for properties you could make a RequiredIf attribute and make some of your properties required only if another property is a certain value.
Here is a post about creating an attribute like this (the example in the middle of the page under the 'A more complex custom validator' section): http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2
If your checkbox represents a property in your model this should work fine.
If you don't want to handle this with a new validation attribute you will have to do a few more things than just change the data-val attribute to false. When jQuery validate first parses your form it stores values in the form's data. So simply changing data-val isn't enough. You will additionally have to remove the stored validation data and reparse the form. Here's an example:
// Do this after you've removed/modified the data-val attribute
$('selector for your form').removeData('unobtrusiveValidation');
$('selector for your form').removeData('validator');
$.validator.unobtrusive.parse('selector for your form');

You can use following JQuery to remove all validation rules of your element
$('#ElementId').rules('remove');
Same way you can use class name like,
$('.ElementClassName').rules('remove');
If you want to remove specific rule, do like this
$('#ElementId').rules('remove', 'required');

The unobtrusive javascript plugin provided by MVC doesn't process the data properties on the fly. Instead, it parses the results on document ready and caches them.
Try calling $.validator.unobtrusive.parse(myForm) on your form after modifying the property in question to see if it gives you expected results.

Unobstrusive validation looks for this attribute data-val="true"
I guess, that if you do a $('#mycheckbox').data('val','false'), the validation will skip a item with that id.
Probably there is a more appropriate way to do it, but if not, take this.
cheers.

There are many ways to disable unobtrusive validation in Javascript but most of them seems a bit hackish...
Recently found that you can do it with submit button. Check this link for info
http://www.nitrix-reloaded.com/2013/09/16/disable-client-side-validation-on-a-button-click-asp-net-mvc/
//this
<script type="text/javascript">
document.getElementById("backButton").disableValidation = true;
</script>
//or this
<input type="submit" name="backButton" value="Back"
title="Go back to Prev Step" disableValidation="true" />
//or this
<input type="submit" name="backButton" value="Back"
title="Go back to Prev Step" class="mybtn-style cancel" />
Another way that is more flexible but more complicated : you can disable unobtrusive validation by setting the data-val attribute to false. But there is a trick...
Unobtrusive validation data is cached when the document is ready. This means that if you have data-val='true' at the beginning and that you change it later on, it will still be true.
So, if you want to change it after the document is ready, you also need to reset the validator which will erase the cached data. Here is how to do it :
disableValidation: function () {
//Set the attribute to false
$("[data-val='true']").attr('data-val', 'false');
//Reset validation message
$('.field-validation-error')
.removeClass('field-validation-error')
.addClass('field-validation-valid');
//Reset input, select and textarea style
$('.input-validation-error')
.removeClass('input-validation-error')
.addClass('valid');
//Reset validation summary
$(".validation-summary-errors")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid");
//To reenable lazy validation (no validation until you submit the form)
$('form').removeData('unobtrusiveValidation');
$('form').removeData('validator');
$.validator.unobtrusive.parse($('form'));
},
You don't need to reset all the messages, input styles and validation summary to be able to submit the form but it's useful if you want to change the validation after the page is loaded. Otherwise, even if you change the validation, the previous error messages will still be visible...

The default DataAnnotationsModelValidatorProvider adds a Required attribute to all value types. You can change this behavior by adding the code in this answer.

You could implement a custom validator like "RequiredIf".
That will keep your model design quite obvious (unlike client-side-only solutions proposed). This allows you to keep the validation logic separate from display logic (that's what MVC is all about).
See this answer : RequiredIf Conditional Validation Attribute
and ultimately that blog post : Conditional Validation in ASP.NET MVC 3
cheers!

hidden form in JQuery

i want to show a form once a certain button is clicked. i tried some methods like
1)i add the form initially to the HTML and give it a hidden property then change it with .show() or .css() my problem is it takes a space of the page.
2) i used .appened() to add the form but the form is too long and it never works.
what's the best way to hide an element first then show it in JQuery ?

You assigned the wrong css. Use display:none;:
<form id="myform" style="display:none;">
...
</form>
And, to show it:
$("#myform").show();
This works, guaranteed. With display:none;, it doesn't occupy space. You certainly may have used visibility:hidden; that was your mistake (because it does occupy space)
Hope this helps. Cheers

$(document).ready(function() {
$("#formID").hide();
$("#buttonID").click(function() {
$("#formID").show();
});
});
You can see an example fiddle of this here. Note that this hides the form using jQuery, so if users have JavaScript disabled they will still get to see it. If you hide the form with a CSS property directly, users without JavaScript will never be able to see it.

How to hide an HTML input field with javascript

I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.

I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.

Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.

document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.

The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.