I have a textbox for Age:
<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="2">
Upon clicking submit, this input is instantly bordered red. There is no postback. I'm assuming IE10 believes the client has actually typed in "Age (optional)" which is greater than the maxlength of 2.
Is there anyway to get around this without making the user do anything in their browser's settings and without removing the maxlength attribute?
You can use the novalidate and formnovalidate attributes. See this link for more information.
Internet Explorer 10 and Windows Store apps using JavaScript add new support for HTML5 Forms, including new states of the type attribute (on the input element), new attributes for the input element, and the progress element. This support enables developers to quickly and easily provide user prompting, input validation, and feedback with a minimal amount of script.
Source: http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx
I faced same problem.
In this case you should change your max length to 10 so it will not be issue for max length and set the max length that you want for your textbox using javascript like following.
function setMaxLength(obj, len) {
return (obj.value.length < len);
}
and call this function like following
<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="10" onkeypress="return setMaxLength(this,2);">
This will resolve your issue.
I had the same issue, in my case it was a GUID field, which was hidden as I didn't need to have it displayed on screen. So I had display:none and maxlength=0.
Yet, IE was performing the validation, the postback was failing and I had no idea why.
It took me half day to figure it out, the solution was to set maxlength=36.
Related
I'm validating the editor content on my controller and i want to return the user back to the editor view if its content length is less than 30 characters. Either way, this piece of code:
<textarea name="text-editor" id="text-editor" value="{{ old('text-editor') }}"></textarea>
Does not work because all of the things that CKEditor javascript script does. So, is there a way to put back the editors content when the user writes less than 30 characters?
You should place old value between tags because textarea does not have value property -
<textarea name="text-editor" id="text-editor">{{ old('text-editor') }}</textarea>
I am trying to use a kendo numeric text box with angular validation (ng-required) however I'm not able to get it working. The ng-required attribute on this element has no effect on the form validation status.
From my understanding, the reason why this doesn't work is because kendo numeric text box uses k-ng-model to store it's value, whereas the angular validation works only with ng-model.
Has anyone else seen this issue, are there any workarounds?
I have found a workaround that involves using the kendo-numeric-text-box along with a hidden input field which makes use of ng-model.
<input data-kendo-numeric-text-box data-k-ng-model="numValue"/>
<input type="hidden" data-ng-model="numValue" data-ng-required="true" />
What code would I start with? I know onChange won't work with input=hidden. Would it be best to write something to re-name the hidden fields and then build it into the existing onchange for the dropdown?
Not 100% sure what you are wanting to do. I don't believe its possible to make a tag with <input type="hidden" show on the browser unless you change its type.
Just tested this at W3Schools and worked on Chrome
<input type="hidden" value="OK">
<p id="demo">Click the button below to set the type attribute of the button above.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
};
</script>
<p>Internet Explorer 8 and earlier does not support the setAttribute method.</p>
Granted this code obviously states it won't work with IE8 or earlier and it would probably be better to set the id attribute for each of the hidden fields you want and probably use something like document.getElementById(IDVALUE).setAttribute("type", "text") Though this will allow the user to change the value in the tag.
Now all that is left is to give a dropdown with an onChange function that runs a statement like above based on what was selected.
I am having a strange issue in Firefox 3.5.2 with F5 refresh.
Basically, when I focus on an input field and hit f5 the contents of that input field gets copied to the next form field after the F5 refresh.
But, if you inspect the HTML source code, the values are correctly loaded.
I am not having this issue in IE8 or Safari 4.0.3.
The problem does not occur if I do a hard refresh or run window.location.refresh(true).
After F5 Refresh: http://i805.photobucket.com/albums/yy339/abepark/after.jpg
Here's an overview of what's going on.
I believe the thing you should look into is the autocomplete attribute,
you should set it to off on the input box. However be careful since this will trigger two effects.
When you refresh the page it won't remember the old values
The default dropdown of the already used values on that input box will also be disabled.
If you want to keep the second behavior you should set the autocomplete attribute back to on with JS.
Browsers can remember form field contents over a refresh. This can really throw your scripting off if it is relying on the initial value of a field matching what's in the HTML. You could try to prevent it by calling form.reset() at the start.
Different browsers have different strategies for detecting when a form or a field is the same as in the previous page. If you have clashing names, or names that change on reload, it is very possible to end up confusing them. Would have to see some code to work it out for sure.
In the backend, I am using ASP.NET MVC 1.0 with the Spark View engine. When I examine the source code after an F5 refresh in Firefox 3.5.2, the page renders correctly; however, if you look at the page visually the adjacent form field field gets populated with the value from the previous field.
I included enough code so you can just get an idea of what I'm trying to do.
Again, the rendering is fine and the final view/HTML code is fine. It's what I see on the screen that is incorrect. I am using hidden vars; but the issue occurred before using it as well.
Note in the code below, I have 2 distinct ID fields: "date_{projectTask.ProjectTaskId}" and "finishDate_{projectTask.ProjectTaskId}, which gets renders to something like "date_1" and "finishDate_2".
<table>
<for each="ProjectTask projectTask in projectTasksByProjectPhase">
<input type="hidden" value="${projectTask.ProjectTaskId}" />
<tr>
<td class="date">
<div class="box">
<div class="datefield">
<input type="text" id="date_${projectTask.ProjectTaskId}" value="${startDate}" /><button type="button" id="show_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
<td>
<div class="box">
<div class="datefield">
<input type="text" id="finishDate_${projectTask.ProjectTaskId}" value="${finishDate}" /><button type="button" id="finishShow_${projectTask.ProjectTaskId}" title="Show Calendar"><img src="~/Content/yui/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
</div>
</td>
</tr>
</for>
</table>
FYI: ${} are used to output variables in the Spark View engine.
I am also using the YUI 2.7 Connection to make Ajax calls to update the datebase for "change" and "enter/tab key press" events. I am able to verify that the AJAX calls are made correctly and the form field values are still valid.
The problem occurs when I just do a F5 refresh; for some reason, the "finishDate_1" gets populated with the value from "date_1".
This problem occurs just by clicking on "date_1" and hitting F5; so, the adjacent field just gets populated even if there are no AJAX calls.
Here's the Javascript code I call towards the end of the body"
YAHOO.util.Event.onDOMReady(
function() {
var idList = YAHOO.util.Dom.getElementsBy(function (el) { return (el.type == 'hidden'); }, 'input');
len = idList.length;
var startDatePickers = new Array();
var finishDatePickers = new Array();
for (var i = 0; i < len; i++) {
var id = idList[i].value
startDatePickers[i] = new DatePicker("date_" + id, "show_" + id, "cal_" + id);
startDatePickers[i].valueChanged.subscribe(updateDate, 'S');
finishDatePickers[i] = new DatePicker("finishDate_" + id, "finishShow_" + id, "finishCal_" + id);
finishDatePickers[i].valueChanged.subscribe(updateDate, 'F');
}
}
}
The form field gets copied over before any Javascript code is processed because I call the Javascript code towards the end of the body after all HTML is rendered. So, I'm guessing it's a refresh issue in Firefox? What do you guys think?
As you can see above, I created my own calender date picker objects which allows you to either enter the date in the text manually or by clicking on a button to view the calendar and select a date. Once you enter or select the date, an AJAX call will be made to update the datebase in the back end.
Thanks everybody for the quick responses.
#Anonymous: whoever you are, you are awesome!
#bobince: thanks for the feedback as well.
I added a dummy form tag with the attribute autocomplete="off" and that solved the problem!
I was scratching my head because I didn't get this issue in Safari 4.0.3 or Internet Explorer 8.
<form action="" autcomplete="off">
<!-- my code -->
</form>
The values were loading correctly in the back end (ASP.NET MVC 1.0/Spark View engine) and the HTML source code reflected this, but the input field values were not getting populated correctly. I was using the YUI Connection Manager and Javascript to support edit-in-place and the date pickers.
I tried changing the XHR call to a GET call instead of POST and the same issue was happening.
Anyway, the problem was that the Firefox was not setting the correct values for the input fields for F5 refreshes.
Again, thanks so much! You guys rock!
All element id's must be unique, if two elements have same id's then that could be reason why Firefox inserts same values to elments that didn't orginally have those values entered.
I had a similar problem related to my question at Input control shows incorrect value, even 'though inspect element shows the right value is there
The problem occurred for me in Firefox, but not Chrome, for some but not all controls on the form, and when I pressed F5, but not ctrl-F5.
The "dummy form" seems to have resolved it for me.
This is what I found by Firebug in Firefox.
Values of disabled inputs will not be submitted
Is it the same in other browsers?
If so, what's the reason for this?
disabled input will not submit data.
Use the readonly attribute:
<input type="text" readonly />
Source here
Yes, all browsers should not submit the disabled inputs, as they are read-only.
More information (section 17.12.1)
Attribute definitions
disabled [CI] When set for a form control, this Boolean attribute
disables the control for user input. When set, the disabled attribute
has the following effects on an element:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT,
OPTGROUP, OPTION, SELECT, and TEXTAREA.
This attribute is inherited but local declarations override the
inherited value.
How disabled elements are rendered depends on the user agent. For
example, some user agents "gray out" disabled menu items, button
labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot
receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled
attribute is through a script.
You can use three things to mimic disabled:
HTML: readonly attribute (so that the value present in input can be used on form submission. Also the user can't change the input value)
CSS: 'pointer-events':'none' (blocking the user from clicking the input)
HTML: tabindex="-1" (blocking the user to navigate to the input from the keyboard)
They don't get submitted, because that's what it says in the W3C specification.
17.13.2 Successful controls
A successful control is "valid" for submission. [snip]
Controls that are disabled cannot be successful.
In other words, the specification says that controls that are disabled are considered invalid for submission.
There are two attributes, namely readonly and disabled, that can make a semi-read-only input. But there is a tiny difference between them.
<input type="text" readonly />
<input type="text" disabled />
The readonly attribute makes your input text disabled, and users are not able to change it anymore.
Not only will the disabled attribute make your input-text disabled(unchangeable) but also cannot it be submitted.
jQuery approach (1):
$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);
jQuery approach (2):
$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");
JavaScript approach:
document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;
PS disabled and readonly are standard html attributes. prop introduced with jQuery 1.6.
<input type="text" disabled />
instead of this disabled use readonly
<input type="text" readonly />
Disabled controls cannot be successful, and a successful control is "valid" for submission.
This is the reason why disabled controls don't submit with the form.
select controls are still clickable even on readonly attrib
if you want to still disable the control but you want its value posted.
You might consider creating a hidden field. with the same value as your control.
then create a jquery, on select change
$('#your_select_id').change(function () {
$('#your_hidden_selectid').val($('#your_select_id').val());
});
Here's the Solution and still using disabled property.
First disable your inputs on load.
$(document).ready(function(){
$("formselector:input").prop("disabled",true);
$( "formselector" ).submit(function( event ) {
$(":disabled").prop("disabled",false);
});
});
on submit enable all of them. this will assure everything is posted