I have set the limit of characters on textbox but while typing the input if it exceeds from 9 character it continues type it another field without use of tab
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid">
I want it should stop to take input.
You should use jQuery for example
<input data-val="true" maxlength=9 data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid"><br>
<script lang="text/javascript">
$("#Ssn").keyup(function(e)
{
var str=$("#Ssn").val();
if(str.length==9)
{
$("#Ssn").blur();
}
});
</script>
at this code you must include jQuery before
** Edit Misunderstanding
Use the maxlength attribute
<input data-val="true" data-val-regex="Please enter valid SSN" data-val-regex-pattern="^\d{3}-\d{2}-\d{4}$" id="Ssn" name="Ssn" type="text" value="" class="valid" maxlength="9">
pattern attribute regular expressions aren't fully supported in all browsers--specifically, those that do support them don't always obey complex regular expressions. I've noticed this in Safari, at least.
The maxlength attribute SHOULD work. Not sure why it's not for you. Maybe post a JSBIN example for us to look at.
That said, for complex client-side form validation, you still need to rely on javascript to support a broader range of browsers.
Related
I'm following this article
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
for a checkbox, but how do I set and get the check value?
As I need to a do a post back with the value.
<label class="container">Accept Offers?
<input type="checkbox" id="Offers" name="Offers"/>
span class="checkmark"></span>
</label>
change your code to this
<input type="checkbox" id="Offers" value="checkedValue" name="Offers"/>
If you see the Request.Form object or query-string (in case of HTTP GET submission) you will see the value, If this is not checked null will be seen or Request.Form will have not that key that belong to Checkbox.
Hi can someone help me with this?
How can I have a placeholder inside the textbox in td?
here is the code
<td data-title="'Effectivity Date'" filter="{ 'date_from':'text','date_to':'text' }">{{item.date_start | dateToISO | date:'MMM-dd-yyyy'}}</td>
Thank you.
You can correct ng-table.js
Unminify ng-table.js and after that in line 250 we can find
<input type="text" ng-model="params.filter [name]" ng-if="filter==\'text\'" ,class="input-filter form-control"/>
add placeholder there ie :
<input type="text" ng-model="params.filter [name]" ng-if="filter==\'text\'" placeholder="input {{name}}",class="input-filter form-control"/>
Operative demo :
Demo
Very bad answer. You should NEVER edit vendor-libs! If you want to update them at one point, you'll lose all your changes.
Instead just overwrite the template in your angular-app's run-block via $templateCache:
$templateCache.put('ng-table/filters/text.html',
'<input type="text" ng-model="params.filter [name]" ng-if="filter==\'text\'" placeholder="input {{name}}" class="input-filter form-control"/>');
I'm creating an input box that will only allow 17 characters and is formatted to display as a mac address.
I've added the first 11 characters, the rest the ( last 4 digits of mac) will be added by the user. Is there any way to stop them deleting the initial characters I've preset ?
<script>
function macAdd(val){
if (/[^\w-]|_/.test(val))
{alert("invalid form only alpanumeric and -")
return val}
val=val.replace(/[^\w-]|_/g,'')
val=val.replace(/(\w{2})([^-])/g,'$1'+'-'+'$2')
val=val.replace(/-$/,'')
return val
}
</script>
<input type="text" onkeypress="this.value=macAdd(this.value)" size="30" value="00-00-00-00" maxlength="17"> </p>
Thanks
This seems to achieve what I'm looking to do.
<form>
<input type="text" style="width:130px;" value="00-00-00-00-" readonly><input type="text" style="margin-left : -50px;width:50px;" maxlength="5" onkeypress="this.value=macAdd(this.value)">
</form>
It seems this ought to be dead simple, but I'm stuck. I've written some asp.net code that outputs a pair of radio buttons:
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='<%=gblYapperChecked %>' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' checked='<%=gblNonYapperChecked %>' />
if (registrationUser.isYapper == 1)
{
gblYapperChecked = "checked";
gblNonYapperChecked = "";
}
else
{
gblYapperChecked = "";
gblNonYapperChecked = "checked";
}
As expected, I get two radio buttons, "Yapper" and "Non-Yapper". However, even when I step thru my code and see that gblYapperChecked is "checked" and gblNonYapperChecked is "", Non-Yapper is always selected by default in the web browser.
What am I doing wrong?
UpdateHere is the HTML code as it actually appears in the browser. "Yapper" should be selected, but "Non-Yapper" appears selected instead.
<p>
<label for='chkYapper'>Yapper</label>
<input type='radio' name='yapper' id='chkYapper' value='yapper' checked='checked' />
<br />
<label for='chkNonYapper'>non-Yapper</label>
<input type='radio' name='yapper' id='chkNonYapper' value='nonYapper' checked='' />
Note that the HTML "checked" attribute is generally determined by being present or not present. See http://www.w3.org/TR/html401/interact/forms.html#adef-checked for the spec.
In particular what this means is that if you want it to be checked you cna have checked, checked=true, checked=checked and so on. So what you want is to not have the checked attribute at all if you don't want the checkbox selected.
I would advise structure such as:
<input type='radio' name='Yapper' id='chkNonYapper' value='nonYapper' <%=registrationUser.isYapper?"":"checked='checked'" %> />
This should eliminate your checked attribute entirely dependant on your isYapper boolean.
The "checked" attribute is weird, it has no value. If a radio button is checked, include the "checked" attribute by itself in the tag. If unchecked, don't do anything. See here:
http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_RADIO.html
Are you setting dblYapperChecked before or after the control is created? Personally, I'd run the radio buttons on the server side and set the checked value on the control directly, but your method should work if the values are set soon enough (try initializing them to the expected values and see if that makes a difference...)
Another jQuery noob question - what am I doing wrong??
I have some HTML markup rendered by ASP.NET 3.5 webforms which looks like this:
<input id="ctl01_cphContent_pnlBasicInfo_chkRC"
type="checkbox" name="ctl01$cphContent$pnlBasicInfo$chkRC" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_chkRC">Recurrent Charges</label>
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblPromoValidFor"
class="rcPromo">Validity:</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidFor"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidFor" checked="checked" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidFor">valid for</label>
</span>
<span class="rcPromo">
<input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidUntil"
type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor"
value="rbnDiscountValidUntil" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidUntil">valid until</label>
</span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountMonths" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountMonths"
class="textbox" class="rcPromo" originalValue="" style="width:30px;" />
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblMonths" class="rcPromo"></span>
<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountUntil" type="text"
id="ctl01_cphContent_pnlBasicInfo_txtDiscountUntil"
class="textbox" class="rcPromo" originalValue="" style="width:150px;" />
I have a checked "chkRC" which I want to trap and use to enable/disable other UI controls
I have a number of labels, input (type=radio) and input (type=text) UI controls. These are all marked with the "rcPromo" dummy CSS class
I have a CSS class called "textbox" for the normal textbox and "textboxDisabled" for the disabled state of the textbox, in an externally referenced CSS file, that work OK (when used in server-side code, that is)
What I'm trying to accomplish in jQuery is this: when the "chkRC" checkbox is disabled, I want to disable all relevant UI controls.
My jQuery looks like this:
$(document).ready(function() {
$("#<%= chkRC.ClientID %>").click(function() {
$('.rcPromo > :label').toggleClass('dimmed');
if (this.checked) {
$('.rcPromo').removeAttr('disabled');
$('.rcPromo .textboxDisabled').addClass('textbox').removeClass('textboxDisabled');
}
else {
$('.rcPromo > :input').removeAttr('checked');
$('.rcPromo .textbox').addClass('textboxDisabled').removeClass('textbox');
$('.rcPromo').attr('disabled', true);
}
});
});
It works fine for the labels and the radiobuttons - but I just can't get it to work with the textboxes - they just stay the same all around, nothing changes (they don't get disabled and they don't change their appearance to indicate that they're disabled, either).
I don't understand this - I do see several (a few more than in the sample) textboxes, which are <input type="text"> in HTML, and they do have the class="rcPromo" and class="textbox" on them - so why doesn't jQuery find and update those?
Any ideas?
Marc
I can't think of a way to augment the css class names that are assigned to controls from the skin file (phoenix is correct, the class names need to be added in the same attribute).
I can think of a few workarounds though:
--> You can wrap all the textboxes you want disabled in a div with a given class:
<div class="disable_textbox"><asp:textbox id="".../></div>
and then disable them by selecting:
$('.disable_textbox input').attr('disabled', true);
--> You can include character strings in the ID of the textboxes you want disabled:
<asp:textbox id="txtDiscountUntil_DisableMe" ... />
and then disable them like so:
$("input[id*='DisableMe']").attr('disabled', true);
--> You can add a custom attribute to your textbox:
txtDiscountUntil.Attributes.Add("disableme", "true");
and then disable them like so:
$("input[disableme='true']").attr('disabled', true);
Your HTML markup is not the correct one.
You can't add two classes like the one in your code.
Two classes can be added like this
<input type="text" class="Class1 Class2" />
and not like
<input type="text" class="Class1" class="Class2" />
Why don't you use hasClass to check whether the element has this class set or not?
I think you have to give this in an OR condition for the two classes.