Develop Reference

css class "currency-input" is not allowing select text in textbox on tab

i have two input boxes in my web page , second text box is pre populated text whatever inserted in first textbox (by javascript). I am facing one issue is like when i move tab button from first textbox to second textbox then in chrom , firefox prepopulated value of scond textbox is highlighted but in IE text is not highlighting , only cursor blinking in to the box.
There is a css class "currency-input" if i remove it from textboxes then it selection of text on tab start working in IE as well.But i need this css class. Is there way to keep currency-input css class and on tab click text selection work in IE?
here is my textboxes:
<input type="text" runat="server" id="TransactTextBox" class="form-control currency-input" placeholder="From Amount " aria-label="From Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="8" onkeyup="sync()" onclick="this.select();"/>
<input type="text" runat="server" id="TransactTextBox_2" class="form-control currency-input" placeholder="To Amount " aria-label="To Amount" data-allownegative="true" style="width: 100px;" maxlength="14" tabindex="9" onlcick="this.select();" />
Sync() javascript function :
function sync() {
var TextBoxA1 = document.getElementById('<%= TransactTextBox.ClientID %>');
var TextBoxA2 = document.getElementById('<%= TransactTextBox_2.ClientID %>');
TextBoxA2.value = TextBoxA1.value;
}

Javascript or Jquery validation on textChanged

I need to do the validation for the P.O box on text changed event. If the user types P.O Box in the address text box and also request for expedite shipping by checking a chec box then I need to show the warning message to the user saying that expedite shipping cannot be done to the P.O box address. For this, I have the following code on my aspx page:
<asp:TextBox ID="txtAddress" runat="server" style="text-transform:uppercase;" onChange="addchange();" ></asp:TextBox>
<asp:CheckBox ID="chkExpShipping" Font-Bold="true" ForeColor="Red" CssClass="test" Text="ExpediteShipping" runat="server" />
<asp:Panel ID="pnlMessage" runat="server" Visible="false" >
<div class="ui-radio ui-btn" style="font-size:20px;">
<span style="color:blue"><b> Warning: Express delivery cannot be done to the P.O Box address</b> </span>
</div>
</asp:Panel>
if the user types P.O box address in the txtAddress and also checks the chkExpShipping check box then I want the pnlMessage to be visible and show the warning message. If the user changes the txtAddress content from P.O box to regular address then I want the warning to be hidden. In order to achieve this, I wrote this code:
<script type="text/javascript">
function addchange() {
debugger;
var add = document.getElementById('txtAddress').value;
var postalRGEX = /^?i)\b(?:p(?:ost)?\.?\s*(?:[o0](?:ffice)?)?\.?\s*b(?:[o0]x)?|b[o0]x;
var PostalResult = postalRGEX.test(add);
if (PostalResult == true) {
document.getElementByID('<%=pnlMessage.ClientID%>').style.display = "block";
}
else {
document.getElementByID('<%=pnlMessage.ClientID%>').style.display = "none";
}
}
</script>
when I start typing in the txtAddress text box, no validation happens. The code does not even go the addChjange javascript function.
any help with this will be appreciated.

Part of the problem may be that you're doing a comparison with == when JavaScript has much more predictable results when using the triple ===.
Try:
if (PostalResult === true)

jQuery blur function not working

I am using html and jQuery library, trying to avoid core JavaScript, just bc I do not want to mix it
I have 3 fields, when user click on field1, then click some where else, I want field1 border to turn red only.
If user click on field2 then clicks some where else, I want field2 border to turn red only.
Right now blur() works perfectly but it creates a red border on every fields. this is because I am using .input class. any idea how can I do this without getting id? bc I will have 40 fields when i am done
html code:
<asp:TextBox runat="server" id="test1" class="input green" /> <br />
<asp:TextBox runat="server" id="test2" class="input blue" />
jquery code:
$(function() {
$(".input").blur(function() {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
});
});

Use $(this) instead of repeating class name.
$(function() {
$(".input").blur(function() {
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input"/>
<input type="text" class="input"/>
<input type="text" class="input"/>
Optional
Also instead of
$(this).val().trim() == '' you can use $(this).val().length <= 0

.NET ClientSide RequiredFIeldValidator with Bootstrap "has-error" Class

I'm working on a legacy .NET WebForms project where the front-end is being updated with Bootstrap.
There are some .NET Validation Controls which are validating on the ClientSide, but the "has-error" class needs to be added to the parent div of the input fields to match the Bootstrap markup.
Is there an event hook or a way of extending the .NET Validators so that I can add the "has-error" class to an invalid control group and remove it when valid?
e.g: Here is my markup which works server side:
<div class="form-group <%= IIf(RequiredFieldValidator1.IsValid, "has-error", "") %>">
<label class="control-label">Test</label>
<asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
ContolToValidate="TextBox1" ErrorMessage="TextBox1 is Required!" />
</div>

I was requiring the has-feedback class on the form-group div as well as the glyphicon tick and crosses depending on whether the input was valid or not. What I have found that works in my solution is to override asp.net's client side function ValidatorUpdateDisplay (note my code utilizes jQuery although you could use native JavaScript):
var originalValidatorUpdateDisplayMethod;
if (typeof(ValidatorUpdateDisplay) == "function"
&& typeof(originalValidatorUpdateDisplayMethod) != "function") {
originalValidatorUpdateDisplayMethod = ValidatorUpdateDisplay;
// now overwrite original method
ValidatorUpdateDisplay = function (val) {
originalValidatorUpdateDisplayMethod(val); // call original method first
var parent = $("#" + val.controltovalidate).parent();
if (parent.hasClass("form-group")) {
parent.addClass("has-feedback");
parent.toggleClass("has-success", val.isvalid);
parent.toggleClass("has-error", !val.isvalid);
var glyph = parent.find("span.form-control-feedback");
if (glyph.length == 0) {
glyph = $("<span class='glyphicon form-control-feedback' />");
parent.append(glyph);
}
glyph.toggleClass("glyphicon-ok", val.isvalid);
glyph.toggleClass("glyphicon-remove", !val.isvalid);
}
}
}
This adds the bootstrap validation to fields when they change as well as when an event on a control that has causesvalidation="true" is triggered.
Note: this is only adding the validations on the client side.

You'll need to put a id on the element
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
and this is the javascript which adds a class to a <div> element
var d = document.getElementById("div1");
d.className = d.className + " otherclass";

Here is what I did:
<asp:Panel ID="pnlNumberOnly" runat="server" CssClass="form-group">
<label for="<%= tbNumberOnly.ClientID %>" class="control-label">Enter a number:</label>
<asp:TextBox ID="tbNumberOnly" runat="server" CssClass="form-control" />
<asp:RegularExpressionValidator runat="server" ID="regExpNumberOnly"
ControlToValidate="tbNumberOnly"
Display="Dynamic"
ErrorMessage="Numbers only" CssClass="control-label"
ValidationExpression="^\d+$" EnableClientScript="True"/>
</asp:Panel>
and then my js looked like this:
$(document).ready(function() {
$('#<%= tbNumberOnly.ClientID %>').change(function() {
if ($('#<%= regExpNumberOnly.ClientID %>').is(':visible')) {
$('#<%= pnlNumberOnly.ClientID %>').addClass('has-error');
} else {
$('#<%= pnlNumberOnly.ClientID %>').removeClass('has-error');
}
});
});

maxlength attribute doesn't display when html is rendered?

I have a textbox whose textmode is set to multiline. Doing this renders the textbox as a textarea. Something to this effect:
<asp:TextBox ID="txtFinBillingTerms" maxlength="500" runat="server" ToolTip="(e.g. 90/10, 30/30/30/10, etc.)" TextMode="MultiLine" Columns="5" Rows="5" Width="300px"></asp:TextBox>
The issue I am having is when I run my project and inspect the textarea the rendered html does not show the maxlength attribute, its as if its gone:
rendered html:
<textarea name="ctl00$MainContent$txtFinBillingTerms" rows="5" cols="5" id="MainContent_txtFinBillingTerms" title="(e.g. 90/10, 30/30/30/10, etc.)" style="width:300px;"></textarea>
This causes issues for me because I am trying to put in some javascript/jquery to limit input of my textarea, namely this:
$('textarea').keypress(function (e) {
var maxLength = $(this).attr('maxlength');
alert(maxLength);
if (e.which < 0x20) {
// e.which < 0x20, then it's not a printable character
// e.which === 0 - Not a character
return; // Do nothing
}
if (this.value.length == max) {
e.preventDefault();
} else if (this.value.length > max) {
// Maximum exceeded
this.value = this.value.substring(0, max);
}
});
But maxLength is always undefined....

MaxLength property isn't applicable for <textarea> so it's simply ignored. From MSDN:
This property is applicable only when the TextMode property is set to TextBoxMode.SingleLine or TextBoxMode.Password.
Lowercase maxlength attribute works on <textarea> but not all browsers supports it so it may depends on that or how ASP.NET will handle that property (it doesn't support it so it may simply remove that attribute).
Edit: You can workaround this limitation using some JavaScript or a validation control with this expression: ValidationExpression="^[\s\S]{0,500}$" (code from here). If you want to perform only client-side validation then you have at least these options:
1) Use a different name for that attribute (like data-maxlength) both in your ASP.NET page and in your JavaScript:
<asp:TextBox runat="server" ID="txtFinBillingTerms"
data-maxlength="500"
ToolTip="(e.g. 90/10, 30/30/30/10, etc.)"
TextMode="MultiLine"
Columns="5" Rows="5" Width="300px">
</asp:TextBox>
With:
var maxLength = $(this).data('maxlength');
2) If you don't use directly your <asp:Input> control in your ASP.NET code then you may use a <textarea runat="server"> instead of official ASP.NET control, like this example:
<textarea runat="server" ID="txtFinBillingTerms"
maxlength="500"
title="(e.g. 90/10, 30/30/30/10, etc.)"
cols="5" rows="5" style="width: 300px">
</textarea>