Is it "ok" to add attributes to various tags to use in JavaScript DOM parsing?
For example if I want to have required fields in a form, would it be a bad practice if I would do this:
<input type="submit" name="name" required="true"/>
Thank you.
From that question:
HTML 5 explicitly allows custom attributes that begin with data. So, for example, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> is valid. Since it's officially supported by a standard, I think this is the best option for custom attributes. And it doesn't require you to overload other attributes with hacks, so your HTML can stay semantic.
Source: http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
Related
Does Form:Label class and path solves any purpose?
<form:label class="boldText" path="comments.commentOnChild">
<spring:message code="label.commentOnChild" />
</form:label>
What if we write statement simply in -label- tag? What additional benefits does form:label provides over HTML Label? What if i do not use Form:Label at all?
As we know that <form:label /> tag is associated to spring so it will have access to the model and binding results also and it can use another css class in case of any error.
<form:label cssClass="title" cssErrorClass="title error" path="student" />
In case of error this code will render differently than the normal label.You could also do this with normal tag but for that you need to include some logic into your pages, which will be extra you will be doing.
The <form:label /> tag has access to the underlying model and binding results through path variable and as such can, on error, use another style class.
The <spring:message /> tag provides you with internationalization support using Spring's MessageSource concept. The MessageSource is an interface providing functionality for retrieving messages. It closely resembles JSTL's fmt:message-tag, however, the MessageSource classes can be integrated with the Spring context. Also, the <spring:message /> tag, works with the locale support that comes with Spring.
Also you can do this without the form tag but that would mean you need to include some logic into your pages but it isn't advisable.
I'm trying to format a textbox control in kendoui as phone number, using data- attributes
The backend field is string.
I made it as:
<asp:TextBox runat="server" CssClass="k-textbox"
data-role="numerictextbox"
data-spinner="false"
data-format="(###) ###.####"/>
and
<asp:TextBox runat="server" CssClass="k-textbox" data-format="(###) ###.####"/>
but none works.
First one does not display any intermediary formatting characters or spaces: ( ) -
Second does not enforce digits, as well as not display any intermediary formatting characters.
Any suggestions?
EDIT
I just find out jquery.inputmask, and tried to use it. I included the script jquery.inputmask, and added the data-inputmask attribute as below
<script src="/scripts/jquery.inputmask/jquery.inputmask-2.4.20.js"></script>
....
<input type="text" class="k-textbox" data-inputmask="'mask': '(999) 999.9999'"/>
but nothing happened.
How should I trigger mask enforcement?
I don't want to use jquery call for each control like
$("#myctrl").inputmask({"mask": "(999) 999.9999"})
but instead use data-attributes
Thanks
You should use the HTML5 phone number input type.
html5 input types
As far as I am aware KendoUI does not have a widget or control to format input field such as phone numbers. It is planed to be incorporated soon this year, I think it has not been release yet:
http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2404523-just-a-mask-edit
In the meantime I would recommend you using one of the JQuery options available, like these 2 examples:
https://github.com/RobinHerbots/jquery.inputmask
http://digitalbush.com/projects/masked-input-plugin/
Here is a link to a working fiddle using the data-inputmask attributes that you would like to use.
You had assigned the mask in the attribute correctly..
<input type="text" class="k-textbox" data-inputmask="'mask': '(999) 999.9999'"/>
Your problem is that you never selected the elements and then applied the inputmask. The data-inputmask is just an attribute that will store the mask definition, it doesn't run automatically.
You need to add this.
$(document).ready(function()
{
$('[data-inputmask]').inputmask();
});
From my page's code-behind I want to access the value of this hidden field. The value is set properly. I confirmed by checking its value.
<div class="hiddenValues">
<input id="HiddenReportId" type="hidden" />
</div>
From my code behind, I'm using the following to access the above input
string id = Request.Form["HiddenReportId"];
When I run the application this line throws a null exception. Any suggestions ? Thanks!
The input needs to be inside of the form tag (which it may be, can't tell from the code snippet). Also, it needs to have a name attribute:
<div class="hiddenValues">
<input id="HiddenReportId" name="HiddenReportId" type="hidden" />
</div>
Its id attribute may be redundant and isn't necessary if you're not using it. But form elements are identified by their name attributes in a POST.
(It feels a bit unintuitive from an ASP.NET perspective to the uninitiated, I know. ASP.NET convention is to identify everything by an ID, but web browsers use name when crafting a POST. And the web browser knows nothing of the server-side technology being used, it follows HTTP standards instead.)
As I understand it, the <input type=email> element in HTML5 will render as a simple text field in browsers that do not support the tag. On other browsers it will render properly, like on the iPhone it will bring up the e-mail keyboard layout.
I’d like to use this in a project but my input fields are <asp:TextBox> controls. How can I use the HTML5 element but still access its data server-side like the rest of my fields?
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
you can try adding the attributes manually, like:
TextBox1.Attributes["type"] = "email";
TextBox1.Attributes["type"] = "url";
TextBox1.Attributes["type"] = "number";
Sorry I'm a bit late to the party, though I think that others can benefit from what I did. I have a page which is HTML 5 though we still have .NET 3.5. We wanted to keep the .NET element, though have the type change to email. I've tried several methods (including Milox above) to no avail, though the one which worked for me was the following: I added a JavaScript property to the element itself inline (when I put it in a script tag it wouldn't pick up for some reason...)
Here is what your tag would look like if you use my changes:
<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/>
Eli
Whether or not it is accessible as a server control, you should be able to access the HttpRequest.Form collection and retrieve the value. No matter what the browser does with the tag, it has to submit a string to the server.
in your .aspx file add
<input type="text" required autofocus placeholder="Email Address"
class="txt-input txt-input-username" ID="myTextBox" runat="server"/>
in your Code Behind .cs
myTextBox.Attributes["type"] = "email";
This Worked For Me
You need to create your own custom control and override the Render routines. Feel free to use either the source code or DLLs
Is it a good idea to move checkbox-checking logic out of the markup, specifically the 'checked="checked"' inline script such as
<input type="checkbox" name="LikesWork" <%= Model.LikesWork ? "checked=\"checked\"" : "" %> />
and have this be replaced with a some code that takes a dictionary with a javascript (jQuery) selector as the key and a bool as the value. Then the checkboxes would get checked by the javascript, simplifying the markup.
<input type="checkbox" name="LikesWork" />
...
<%
Dictionary<string, bool> checkElements = new Dictionary<string, bool>();
checkElements.Add("#likesWork", Model.Account.LikesWork);
Response.Write(Html.CheckCheckboxes(checkElements));
%>
If this isn't a good idea, why not?
I disagree with that approach. If you don't have to, I wouldn't rely on javascript for that. It may not be likely, but there are several reasons why that could fail:
User has JS disabled
Another js error on the page prevents your script from processing
User is accessing your site from a mobile device of sorts that doesn't support your script
HTML is just safe. In my opinion, this introduces a potential point of failure that didn't exist before.
You could always just use the strongly typed CheckBoxFor helper and avoid this mess altogether. Relevant bit from documentation:
Return Value
Type: System.Web.Mvc.MvcHtmlString
An HTML input element whose type attribute is set to "checkbox" for each property in the object that is represented by the specified expression.