I have validate a textbox to accept maxsize=2, it accepts 2 digit e.g 11,12... but it does not accepts digit 10
Here is my code
<td width="60" height="20" class="case_txt" align="center">
<input type="text" onblur="CheckUnitValue(this)"
name="Units_<%=cptData.Rows[k]["SERVICEID"] %>"
value="<%=cptData.Rows[k]["NOOFUNITS"] %>"
size="5" maxlength="2" onkeypress="onlyPositiveNumbers(this)" />
</td>
If you are using a modern browser, you can use <input type="number" min="1" max="99"/> as Andy said.
For browsers that doesn't support input type="number" you can correct your script this way.
<html>
<head>
<title>test</title>
<script>
function validateRange(element) {
value = +element.value;
min = element.getAttribute('min');
max = element.getAttribute('max');
if (isNaN(value) || value < min || value > max) {
element.value = '';
}
else
{
element.value = value;
}
}
</script>
</head>
<body>
<input type="number" min="1" max="99" />
<input type="text" maxlength="2" min="1" max="99" onblur="validateRange(this)" />
</body>
</html>
Note:
It's better to use onblure instead on onkeypress, for example when the users pastes a text into field.
I used 2 custom attrinutes min and max on textbox to keep validateRange function more reusable.
It looks like you're overcomplicating simple things.
If you need this textbox accepting only two-digit positive numbers, then you can use type="number" instead of type="text" and set limits for valid values.
Something like this:
<input type="number" min="1" max="99"/>
Pretty simple, and you don't need any custom validation using javascript (I really suppose your onlyPositiveNumbers function has some mistakes as I've stated in comments).
Related
In knockout.js I have a data-bind as follows
<input id="lbl" type="text" data-bind="value: $data.quantity" />
here I would like to have a condition like if $data.quantity is 0 i need to bind with empty text so can some one help me
Just use a ternary expression:
<input id="lbl" type="text" data-bind="value: quantity() ? quantity() : ''" />
The above assumes that your quantity property is an observable, if it's not:
<input id="lbl" type="text" data-bind="value: quantity ? quantity : ''" />
See Fiddle
I have a form with some text fields,and I want to place the cursor (auto focus) on first text field of form when page gets loaded.
I want to do it without using javascript.
Ya its possible to do without support of javascript..
We can use html5 auto focus attribute
For Example:
<input type="text" name="name" autofocus="autofocus" id="xax" />
If use it (autofocus="autofocus") in text field means that text field get focused when page gets loaded..
For more details:
http://www.hscripts.com/tutorials/html5/autofocus-attribute.html
Just add autofocus in first input or textarea.
<input type="text" name="name" id="xax" autofocus="autofocus" />
This will work:
OnLoad="document.myform.mytextfield.focus();"
<body onLoad="self.focus();document.formname.name.focus()" >
formname is <form action="xxx.php" method="POST" name="formname" >
and name is <input type="text" tabindex="1" name="name" />
it works for me, checked using IE and mozilla.
autofocus, somehow didn't work for me.
An expansion for those who did a bit of fiddling around like I did.
The following work (from W3):
<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />
It is important to note that this does not work in CSS though. I.e. you can't use:
.first-input {
autofocus:"autofocus"
}
At least it didn't work for me...
very easy you can just set the attribute autofocus to on in the wanted input
<form action="exemple.php" method="post">
<input name="wantedInput" autofocus="on">
<input type="submit" value="go" >
</form>
Sometimes all you have to do to make sure the cursor is inside the text box is:
click on the text box and when a menu is displayed, click on "Format text box"
then click on the "text box" tab and finally modify all four margins (left, right, upper and bottom) by arrowing down until "0" appear on each margin.
I would like to display a form that lets a user enter up to 10 rows of information. If they need to go over, I'm going to use an "add additional row" button that will add one row at a time. What will my Model class look like for something like this? When I use javascript to add a new row, how can I tie that new row into the Model as well?
This article from Phil Haack shows you how to bind to collections. You'll need to use the javascript to create the new row with the correct names.
Probably this rows contains related values, so you can give the same name to all theses inputs in the html, and declare that you action receive an array of values.
Assume that you have this
<form method="post" action="/Controller/YourAction">
<input type="text" name="row" value="1" />
<input type="text" name="row" value="2" />
<input type="text" name="row" value="3" />
<input type="text" name="row" value="4" />
<input type="text" name="row" value="5" />
<input type="text" name="row" value="6" />
<input type="submit" />
</form>
all that you need to do is declare this inside your Controller
public ActionResult YourAction(int[] row)
{
//put your code here
}
and you will have all the values inside the row array
You may take a look at the following blog post which explains how to achieve exactly that. It uses a custom helper (Html.BeginCollectionItem) which allows to use non sequential as collection indexes instead of numbers which makes adding/deleting new items much easier.
im confused, the w3c validation service seems to be saying that asp.net cannot legally render a hidden field inside a form tag on the page, have a look at this ...
http://validator.w3.org/check?uri=http%3a%2f%2fmotcombegarage%2eco%2euk%2f
from what i can tell it seems to be saying that the following code sample is invalid markup WTF !!!
<html>
<head> ... header stuff ... </head>
<body>
<form method="post" action="" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKt17cxAr+s9MgFAqjXzJsHz7KyzLpZjYtTK89blY7GgKAElK/5syvVNn4h7rVehcQ=" />
</div>
... other code ...
</form>
</body>
</html>
This presents 2 problems for me if the code is in fact invalid:
This code is generated by the .net framework for handling postbacks so editing it could be a problem
i have no idea what the valid context for a form field should be (lolz)
Is this a bug or have i done something wrong ???
EDIT:
As pointed out by Peter O below I added the missing div tag in my markup ... comparing this to the markup that the validator uses shows that this div whilst present in the markup is apparently not worth validating ... so that kinda changes the question to ... why is it ignoring that div ? ...
Seems a bit odd that you can't put an input tag inside a form tag directly though ... surely thats the point of a form tag, to contain input tags ??
The only way I've seemed to get rid of the message, following the code on your homepage, is to assign a value to the first hidden input
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="toverton" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
</div>
In all liklihood, this is most likely a bug.
The INPUT elements should be placed within a DIV element, like this:
<form ... >
<div>
<input type="hidden" ... />
<input type="hidden" ... />
<input type="hidden" ... />
</div>
</form>
Is it possible to selectively disable the autofill feature in text fields using code?
I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.
I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.
Look at the autocomplete HTML attribute (on form or input tags).
<form [...] autocomplete="off"> [...] </form>
W3C > Autocomplete attribute
Edit:
Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.
First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.
Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.
jQuery( function()
{
$("input[autocomplete=off]").val( "" );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="John" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="qwerty" autocomplete="off">
</div>
<input type="submit" value="Login">
</form>
you can put it into your inputs:
<input type="text" name="off" autocomplete="off">
or in jquery
$(":input").attr("autocomplete","off");
There are 2 solutions for this problem. I have tested following code on Google Chrome v36.
Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)
Solution 1:
Put following code under under <form ..> tag.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2:
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms.
Adding an autocomplete=off attribute to the html input element should do that.
Add the AutoCompleteType="Disabled" to your textbox
This should work in every browser
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>
My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:
<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
$("#txtPassword").focus(function () {
$("#txtPassword").prop('type', 'password');
});
</script>
I have successfully tested this in Edge and Firefox.
<input type="text" id="cc" name="cc" autocomplete="off">
works for regular text input.
For passwords, you need to use autocomplete="new-password"
<input type="password" id="cc1" name="cc" autocomplete="new-password">
per Mozilla Development Network
Place below code above your username control. This will work in call the browser.
<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>