Develop Reference

Javascript comparing strings not giving expected result

I am trying to determine the selected item in a selector and submit a form based on the selection. Below is my Javascript.
$("#runjob").click(function() {
var selectedJob = document.getElementById('batchjob_selector').value.trim();
if(selectedJob == "Open Batch") {
alert(selectedJob);
document.getElementById('openbatchform').submit();
}
});
I checked in the console and the line document.getElementById('batchjob_selector').value.trim(); changes value based on selection, but for some reason it is always doing what's inside the if statement even when the selection has changed, the alert displays the correct selection. I am not sure what the problem is, any help is appreciated.

is batchjob_selector a select? because if that the case value will no contains what you are expecting, to get selected option from a select use following code
var selector = document.getElementById('batchjob_selector');
var selectedJob = selector.options[selector.selectedIndex];

Hiding a Section on Dynamics 365 using JS

I'm trying to take a field value (that's a two option check box) and if it is checked then set the visibility on a section to be true, and if it's not checked then to set the visibility to false. I have it set on the field to call the function on an on change event.
When I go into the form and either check the box or uncheck the box it gives me a script error.
This is the function I'm using:
function SetProductVisible(){
if (Xrm.Page.getAttribute("ee_productspecific").getValue()){
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(true);
}
else{
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(false);
}
};
Thank you for your help.
The fields default value is also set to "No"

Ensure that you are using the right quotation marks by replacing “ and ” with ".
As mentioned in the comments, also ensure that you are using the right name for your tab and section, and check the developer console for more information about the error.

here is your solution...
I created a new field on the CRM form called "log_showhide" which is a two option field. You need to edit the code below to match your Section name and field name with the correct values...
Furthermore, I would set the code to run on load of the form as well as on change of your field.
This method is applicable to Microsoft Dynamics 365 v9.x
function hideOrShow(executionContext){
var a = executionContext.getFormContext().getAttribute("log_showhide").getValue();
if (a == 0) {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(true);
} else {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(false);
}
}

Rather than doing a custom web resource to show/hide a field or section, I would recommend you go with a Business Rule. With a Business Rule you can set up a simple check of the value of one field and hide other fields based on that.

Another way to hide a section by field's parent. Just refer a field on that section:
function SetProductVisible()
{
var some_section = Xrm.Page.getControl("new_field_on_that_section_name").getParent();
some_section.setVisible(Xrm.Page.getAttribute("ee_productspecific").getValue());
};

jQuery Form Validator - How to change the data-validation-optional property using javascript?

I'm currently using jQuery Form Validator (http://formvalidator.net/#home). I currently have three input boxes that take in a phone number (3 numbers, 3 number, 4 numbers). Since the phone number is optional, all three input boxes are optional (data-validation-optional = "true"). Validation (making sure only numbers are entered) works fine for all three boxes but my problem is that the validation plugin doesn't check to make sure all three boxes are filled in. This is a problem because a user can fill in one box but leave the other two empty.
The way I can solve this is to check if all three boxes have an empty string when the form is submitted. If so than do nothing, but if only one box is submitted than make all three boxes mandatory (data-validation-optional = "false").
I'm having trouble changing the inline data-validation-optional property of an input using JavaScript. When I use document.getElementById("phone1").data-validation-optional = "false" it gives me a javascript error.
Here is my current code:
input:
<input type="text" id="phone1" name="phone1" tabindex="21" maxlength="3" value="" data-validation="custom" data-validation-regexp="^([0-9]{3})$" data-validation-optional="true" style="position:relative; display:block; left:24px; top:31px; width: 76px; height: 44px; text-align: center; padding-left: 0px;" data-validation-error-msg="- Mobile # is incorrect.">
javascript:
$('#phone1')
.bind('validation', function() {
if(String(document.getElementById('phone1').value) == "" &&String(document.getElementById('phone2').value) == "" && String(document.getElementById('phone3').value) == ""){
//return true - all empty
document.getElementById("phone1").data-validation-optional = "true";
}
else{
if(String(document.getElementById('phone1').value) == "" || String(document.getElementById('phone2').value) == "" || String(document.getElementById('phone3').value) == ""){
document.getElementById("phone1").data-validation-optional = "false";
//return false - at least one is empty
}
else{
document.getElementById("phone1").data-validation-optional = "true";
//return true - all filled
}
}
})
Any help would be appreciated! Thanks!

Try
$("#phone1").data('validation-optional') = "true";
or
$("#phone1").data('validation-optional') = true;
Both will address the data item set with data-validation-optional="..." though I'm not sure whether validation will be affected. I can't find any evidence of a 'validation' event for individual form elements, nor can I find evidence that the validation plugin will respond to hot-swapping of data properties. You may also need to 'destroy' then re-invoke the plugin.

The problem you are having is you aren't accessing the data attributes the correct way. I notice you're using jQuery, so you might as well leverage it. In jQuery, you can use .attr() and .data() to access data attributes.
$('#phone1').attr('data-validation-optional', 'true');
Victorjonsson's validator accesses the data-validation-*="" attributes using .attr(), so don't use .data() to change them, because values set with data() cannot be accessed with .attr(). The reverse is also true.
Upside of this approach is you won't need to re-initialize the plugin every time you change something.
If you'd prefer to not use jQuery and opt for vanilla javascript, you use el.getAttribute('data-foo'); and el.setAttribute('data-foo', 'bar'); to access your data attributes. See this answer for more on that.
In your case, the code should be:
document.getElementById('phone1').setAttribute('data-validation-optional', 'true');

value-attribute seems not to show input-field-content

I'm trying to use jquery to check if every input-field has already been filled out. And if yes, I'd like to make a green border around the form.
This was my approach:
if($('input:text[value=""], textarea[value=""]').length == 0){
alert("DONE");
}
Hovever the value="" -Selector doesn't work.
It seems that the value-attribute only contains the input-field's default-value, but not the actual content inserted by the user - according to firebug.
This command alerts me the actual contents:
$('input:text[value!=""]').each(function(){
alert($(this).val());
});
My Question: Where are the actual input-field contents stored? And how can I use jQuery to check efficiently, if there are empty fields?

You are right, the attribute selectors only work with the value the attribute really has. Later on, changing the value of the input will only change the DOM element's internal state.
Where are the actual input-field contents stored?
You can access the value via the value property of the DOM element elementNode.value.
And how can I use jQuery to check efficiently, if there are empty fields?
You can use .filter:
$('input').filter(function() {
return !this.value;
});

A neat way of validating inputs is to attach a validation rule to the element for your script to find and validate against.
To make a field required:
<input type="text" data-validate="required" />
Your script:
$('[data-validate]').each(function() {
var rule = $(this).attr('data-validate'), value = $(this).val();
switch (rule) {
case 'required':
if (!value) {
alert('Field invalid!');
}
break;
}
});
It works pretty well for me.
You can make it more efficient by selecting only specific element types or children of a specific element (such as a form).

You could try using .filter() like this:
var empty = $('input:text').filter(function(){ return $(this).val() == "" }).length;
if(empty > 0){
alert("There are "+empty+" fields which have not been filled out");
}

my approach if you are not willing to use Jquery validate.
give a class to each of your input fields and then use Jquery class selector to test if those all have filled or not. You can use this even for dropdown too.

You should use this construction:
var incomplete = $('form :input').filter(function() {
return $(this).val() == '';
});
if (incomplete) {
alert('Please fill all fields!');
}
:input selector selects all input, textarea, select and button elements.
Read this: http://api.jquery.com/input-selector/

jQuery Custom Validators

I'm using the jQuery validation plugin and I'm looking to add some custom logic. I have a series of checkboxes which have children checkboxes associated with them. For certain (not all) of these parent checkboxes, I want to require that one of the children checkboxes is checked. I have no issue hardcoding for this so I was adding a field like this to my DOM:
<input type="hidden" id="child_required_1" class="child_required_1" />
And then adding a custom validator like this:
jQuery.validator.addMethod('child_required_1', function(val, element) {
if($('#product_responses_1').length > 0) {
if($('#product_responses_1').is(':checked')) {
var count = $("input:checkbox:checked[id^='children_tags_1_']").length;
if(count == 0) {
return false;
}
}
}
return true;
}, 'You must select at least one child.');
This works perfectly fine. But when I duplicate all of this and add "_2", only one of the validators seems to fire. So from what I can gather, custom validators are unique per form? If that's the case, how am I supposed to handle a situation like this where I may need 15-20 of these all showing in different places? I don't want to just show one error.
I could also create a class rule but that doesn't solve my problem of creating multiple error labels and placing them in the relevant positions.

Apparently having it on a hidden field didn't work, but when I removed the hidden fields and applied that class to the actual checkboxes themselves, it worked fine. Not entirely sure why.