Develop Reference

javascript: how can I print an error message but only if there is already something in the text box

I have 2 text boxes. Inputs cannot match but I don't want error message to show up when they're both empty only when there has been something inputed in both boxes. how do I do this?
function validate() {
var errorMessage = "";
var textbox4Input = document.getElementById("fictional");
var textbox5Input = document.getElementById("real");
var textbox4 = textbox4Input.value.trim();
var textbox5 = textbox5Input.value.trim();
textbox4Input.value = textbox4;
textbox5Input.value = textbox5;
if (textbox4 === textbox5) {
errorMessage += "Favorite fictional place & favorite real place cannot be the same.<br>"
}
return errorMessage;
}

Special Characters Validation Not Working as expected

I'm trying to apply Regular Expression Validation to a textbox User Control and it's only working when I enter something at the end of the text in the textbox. And when I type something somewhere in the middle of the text, it's not working.
For Example: Hey Man! (When I type '!' at the end of the text, my Code's working fine)
Hey! Man! (But when I insert '!' somewhere in the middle of the text after the entire text is typed, not working)
Below is my Code:
$("textarea[id$=<%= TxtValue.ClientID %>]").keyup(function () {
var txt = $(this).val();
var regex = new RegExp('[^0-9a-zA-Z-,_.\:\s]+$');
var vldttxt = regex.test(txt);
if (txt.length > 0 && vldttxt === true) {
alert("Error");
}
var noSpclChar = txt.replace(regex, "");
this.value = noSpclChar;
});
Any help would be greatly appreciated! Thanks!

This should work. Your ending $ is what is keeping it from matching anything within the string:
$("textarea[id$=<%= TxtValue.ClientID %>]").keyup(function () {
var txt = $(this).val();
var regex = new RegExp('[^0-9a-zA-Z-,_.\:\s]+');
var vldttxt = regex.test(txt);
if (txt.length > 0 && vldttxt === true) {
alert("Error");
}
var noSpclChar = txt.replace(regex, "");
this.value = noSpclChar;
});

> Most simple code ....Special Characters Validation
function checkForm(theForm) {
var result = /^[a-z0-9\\.;,:'\\s]{1,100}$/i(theForm.data.value);
if (!result) {
alert("No legal characters entered");
}
return !!result;
}

Textbox image missing after re-focus

May i know how can i remain the text box image when the textbox is re-focus ? the textbox was validated which when user no fill up the value in the textbox it will appear error message and start focus on the textbox. Unfortunately after the textbox is re-focus the image is missing. Please help check my following demo with my current coding. Any help would be appreciated.
Example : JsFiddle DEMO 1

In your error_function you're overriding the input background property.
You should use backgroundColor property:
document.getElementById(ID).style.backgroundColor = "#FDEBEB";

I have add some line of jquery to your code, see this demo and hope it work for you
function fnName(ID, name) {
if (name == "") {
error_function("** Please enter the Name.", ID, "errMsg");
} else {
release_function(ID, "errMsg");
}
}
function error_function(message, ID, labelID) {
document.getElementById(labelID).innerHTML = message;
document.getElementById(labelID).style.display = "inline";
document.getElementById(ID).style.background = "#FDEBEB";
document.getElementById(ID).style.border = "thin solid red";
document.getElementById(ID).value = "";
document.getElementById(ID).focus();
}
function release_function(ID, labelID) {
document.getElementById(labelID).innerHTML = "";
document.getElementById(labelID).style.display = "";
document.getElementById(ID).style.border = "";
document.getElementById(ID).style.backgroundColor = "";
document.getElementById(ID).style.backgroundImage = "";
document.getElementById(ID).style.backgroundSize = "";
document.getElementById(ID).style.backgroundPosition = "";
document.getElementById(ID).style.backgroundRepeat = "";
}

Microsoft Dynamics CRM 2011/2013

In my entity (A) has 50 option set. If the user select 10 optionsset value and not selected remaining one, and he/she click save button. In that situation i need to alert user "To fill all the option set". I don't want to get the Schema name for the optionset individually, i need to get all the option set schema name dynamically.
Is it possible? Help me.

I have not tested this function, but you can try this and make changes if needed.
function IsFormValidForSaving(){
var valid = true;
var message = "Following fields are required fields: \n";
Xrm.Page.data.entity.attributes.forEach(function (attribute, index) {
if (attribute.getRequiredLevel() == "required") {
if(attribute.getValue() == null){
var control = attribute.controls.get(0);
// Cheking if Control is an optionset and it is not hidden
if(control.getControlType() == "optionset" && control.getVisible() == true) {
message += control.getLabel() + "\n";
}
valid = false;
}
}
});
if(valid == false)
{
alert(message);
}
}
Ref: Microsoft Dynamics CRM 2011 Validate required form javascript

Required fields individual alert fire before the on save event. If you wish to prevent the single alert routine for all unfilled option sets you need to remove the requirement constraint and manage the constraint yourself, probably in your on save handler. I’m just writing the idea here (not tested).
// enter all optionsets ids
var OptionSets50 = ["new_optionset1","new_optionset2","new_optionset50"];
var dirtyOptions = [];
function MyOptionSet(id) {
var mos = this;
var Obj = Xrm.Page.getAttribute(id);
var Ctl = Xrm.Page.getControl(id);
Obj.addOnChange(
function () {
if (Obj.getValue() != null)
delete dirtyOptions[id];
else
dirtyOptions[id] = mos;
});
this.GetLabel = function() {
return Ctl.getLabel();
}
if (Obj.getValue() == null)
dirtyOptions[id] = mos;
}
function OnCrmPageLoad() {
for(var x in OptionSets50) {
OptionSets50 [x] = new MyOptionSet(OptionSets50 [x]);
}
Xrm.Page.data.entity.addOnSave(OnCrmPageSave);
}
//check for dirty options and alert
function OnCrmPageSave(execContext) {
var sMsg = "The following Optinsets Are Required: ";
var sLen = sMsg.length;
for(var os in dirtyOptions) {
sMsg += dirtyOptions[os].GetLabel() + "\n";
}
if (sMsg.length > sLen) {
execContext.getEventArgs().preventDefault();
alert(sMsg);
}
}

How to format jEditable field value after it cancels

I am trying to use the "onreset" option but I am having issues. I have a field that is meant for users to enter 10 numbers only. I want to make the 10 numbers display in a phone format ie. (310) 490-1235. So far I can do this, and the HTML of the field gets set to 3104901235 while the text is (310) 490-1235, but when a user cancels or goes to another field, the current field closes, and displays the HTML (3104901235) instead of the text (310) 490-1235.
I have a function set in the "onreset" option for it to set the text but it doesnt apply.
//Phone field
// Set the fields 10 digits to phone format
set_phone();
function isNumeric(value) {
if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
return true;
}
$('.edit-phone').editable('<?php echo base_url(); ?>home_resume/builder/ajax_save_field', {
onsubmit: function(settings, td) {
rm_class();
var input = $(td).find('input');
var original = input.val().trim();
if (isNumeric(original) && original.length == 10) {
$('#notification-saved').miniNotification({opacity: 1.0});
return true;
} else {
$('#notification-phone').miniNotification({opacity: 1.0});
input.css('background-color','#c00').css('color','#fff');
return false;
}
},
type : 'text',
cancel : 'Cancel',
onreset : function(value, settings){
$(this).closest("li").removeClass("active");
// Since the HTML is now just 10 digits, set it back to phone format with
set_phone();
},
style : 'display: inline',
select : 'true',
submit : 'OK',
event : "edit-phone",
indicator : '<img src="<?php echo base_url(); ?>themes/resume-builder/images/fb-indicator.gif">'
});
$(".edit-phone-trigger").on("click", function() {
strip_phone();
$(this).closest("li").addClass('active');
var edit_id = $(this).attr("id").split("-");
$('#' + edit_id[1]).trigger("edit-phone");
return false;
});
// Format the 10 digit phone number
function set_phone() {
var num = $("#7").text();
var num_1 = num.slice(0,3);
var num_2 = num.slice(3,6);
var num_3 = num.slice(6,11);
var new_num = "("+num_1+") "+num_2+"-"+num_3;
$("#7").text(new_num);
}
// Remove characters from phone number input
function strip_phone() {
var pnum = $("#7").text();
pnum = pnum.replace(/\(/g, "");
pnum = pnum.replace(/\)/g, "");
pnum = pnum.replace(/-/g, "");
pnum = pnum.replace(/\s/g, "");
$("#7").html(pnum);
}

You can try using the data and callback options for changing the way the text is displayed inside the input, this way you also avoid the need to use your custom event.
data will be called when the element is first clicked and can be used to alter the text before editing. Here you strip the phone to just numbers to be displayed on the input.
callback will run after after the form has been submitted. Here you format the submitted content to a phone number and change the text of the original element. (Inside function this refers to the original element)
$('.edit-phone').editable('<?php echo base_url();?>home_resume/builder/ajax_save_field', {
type : 'text',
cancel : 'Cancel',
style : 'display: inline',
select : 'true',
submit : 'OK',
event : 'click',
indicator : '<img src="<?php echo base_url(); ?>themes/resume-builder/images/fb-indicator.gif">',
data : function(value, settings) {
return strip_phone(value);
},
callback : function(value, settings){
$(this).text(set_phone(value));
}
onsubmit : function(settings, td) {
rm_class();
var input = $(td).find('input');
var original = input.val().trim();
if (isNumeric(original) && original.length == 10) {
$('#notification-saved').miniNotification({opacity: 1.0});
return true;
} else {
$('#notification-phone').miniNotification({opacity: 1.0});
input.css('background-color','#c00').css('color','#fff');
return false;
}
},
});
// Format the 10 digit phone number
function set_phone(text) {
var num = text;
var num_1 = num.slice(0,3);
var num_2 = num.slice(3,6);
var num_3 = num.slice(6,11);
var new_num = "("+num_1+") "+num_2+"-"+num_3;
return new_num;
}
// Remove characters from phone number input
function strip_phone(text) {
var pnum = text;
pnum = pnum.replace(/\(/g, "");
pnum = pnum.replace(/\)/g, "");
pnum = pnum.replace(/-/g, "");
pnum = pnum.replace(/\s/g, "");
return pnum;
}
Note that I updated your set_phone() and strip_phone() functions to return the value instead of setting it directly to the element so they can be called dynamically