Internationalization at HTML5 - validation

How can I change the messages of HTML5 (or doses it change according to browser's language automatically?)
For example:
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
</body>
</html>
When I run this code (from W3schools) at Opera and write a non valid e-mail address it says
Please enter a valid email address
How can I change it to another language instead of English or change the warning to what I want?

Well there are different options.
You can disable the form validation of the form (or the field) with formnovalidate and provide a custom error message with javascript (and serverside ofcourse).
You can use javascript and use the .setCustomValidity() method to provide a (custom) error message but it is intended to add extra rules to the field.
You can use x-moz-errormessage to set a custom errormessage. But using this you need to know that this is not a standard.

There are no built-in internationalisation solutions currently in HTML(5) and all proposals seem dead. However you may find the Passive Localisation JavaScript library of some use. Online demonstration can be found here.

Related

Firefox built in dev Inspector tool, browser bug with hidden input in HTML

I use Normal Firefox with Dev Tool.
The Explanation: I use hidden input fields to store some data. So I have noticed twice, that the browser is mixing all input fields completely up, it does not understand what is what at all.
Simplified example HTML on server:
<input id="test" type="hidden" value="Hello there"><input id="something" type="hidden" value="0">
Firefox gets above HTML from server (clear cache, reload the page, nothing fixes this):
<input id="test" type="hidden" value="0"><input id="something" type="hidden" value="Hello there">
(and now thinks that id 1 is id 2 etc)
Once I Restart my browser, all gets normal again. (Like example shows, there is no human error, just nonsense) Anyone else had this, if not, then look out before hurting yourself. I don't know if normal users may actually experience this but they may. Someone can explain this...

AntiSamy is not allowing me to input form fields

I have a RichTextArea from CKEditor. And I recently made some changes to sanitize HTML input.
Normal things go through fine but any form fields like checkboxes, textareas, radio buttons etc are stripped out.(I am using getValidSafeHTML to sanitize my HTML).
I have tried different policy files like this thing here which is supposed to allow everything
http://code.google.com/p/owaspantisamy/downloads/detail?name=antisamy-anythinggoes-1.4.4.xml
For example,
<form method="get" name="sampleform"><input name="radio" type="radio" /> </form>
becomes
<form method="get" name="sampleform"> </form>
Anybody have any idea why this is happening?
Thanks in advance
I just found the reason why this is happening... I was using the antisamy-1.3.jar. This looks like a bug in this version of antisamy. I needed to upgrade to antisamy-1.5.3.
So just check the versions of your antisamy jars. You might be facing the same issue

Firefox always show any numeric input as NAN

I installed a new fresh windows 8.1 (64bit) and then install Firefox 33.1.1 without any add-on or extensions after that. but Firefox show every numeric input (type="number") as NAN even without any JavaScript code. (other browser haven't any problem with that.)
for example code below show as this:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form method="post" action="">
<input type="number" />
</form>
</body>
</html>
this is a bug in Firefox!
i think this problem exists for the Persian language (or maybe arabic)
To fix this problem in windows, set Decimal Symbol to Dot "."
Note: Region > Additional Setting
But in my opinion, now is the best solution use type="text" instead of type"number" for inputs
I see It`s happening in Firefox only when settings of Windows in Control Panel --> Language --> Change date, time, or number formats --> Format is set to Persian
(I have Win 8.1 + FireFox 39.0-fa)
Your meta tag is inappropriate for HTML5. There is a specific META Charset tag for HTML5. See http://www.w3schools.com/tags/att_meta_charset.asp
In HTML you must not use XML closing tags />
You can also help yourself by adding more content to your HTML, such as adding an encytpye to the form and more:
<form method="post" action="" enctype="multipart/form-data">
<input type="number" name="larry" min="0" max="100" value="">
</form>
Try that syntax and see if it corrects.

Search-form action attribute with Advanced AJAX Page Loader wordpress plugin returns "more than one title tag on the page.." warning in debug mode

I'm trying to enable search functionality of the Advanced AJAX Page Loader plugin on a custom wordpress theme I'm building, but after I enter keyword into search and hit enter, loader.gif keeps on spinning and I get this message in debug mode : "WARNING: You seem to have more than one title tag on the page, this is going to cause some major problems so page title changing is disabled". It also passes the url of the website twice into the address bar and I believe this has something to do with the action attribute that's being passed by the form.
This is the site in question: http://natalija.co.nf
I left the debug mode of the AAPL plugin on for now
This is my searchform.php code:
<form method="get" id="searchform" class="searchform" action="<?php bloginfo('url'); ?>">
<input type="submit" id="searchsubmit" value="" class="btn" />
<input type="text" size="10" name="s" id="s" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
</form>
I managed to ajaxify the theme with this plugin but I 'm having trouble getting the search to work properly so I was wondering if anyone here can help me out with this? It is driving me crazy.
I solved it. The code in search.php needs to be wrapped with a div class="searchform".

how to send file data using Dajaxice?

I am using ajax for my website. I have successfully used jQuery.ajax() to asynchronously upload file to server. I am using Dajax and Dajaxice therefore I plan to use these application for file upload as well. I tried this example. It is working fine. But if I add file field into my html form, it does not send file to server. My html form looks like
<form id="myform" action="/file/" method="post" enctype="multipart/form-data">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AaSmyBEwQLSD3YghRAD9Cf2uxEjzESUe' /></div>
<p><label for="id_docfile">Select a file</label> max. 42 megabytes</p>
<p><input type="file" name="docfile" id="id_docfile" /></p>
<p><input type="submit" value="Upload" /></p>
</form>
This question has been asked at many place but never answered.
Afaik there is currently no provision within dajax / dajaxice to upload files.
I have used dajax in a few projects and have got round this by using blueimp/jquery-file-upload and a django view that accepts a POST of the upload file and return a JSON string to the client.
This is a less than perfect solution not least because the jquery-file-upload button is styled differently from normal html form elements, it is possible to style the whole form using jQuery-ui, although this is a lot of additional work.
Both, dwr which is pretty much dajax for Java, and tasty pie for django do offer file uploading, so in theory it should be possible to implement it.
I'm happy to post a sample of my ajax solution if anyone would find them useful.
I've also faced this problem recently. So, I've digged a little and discovered some answers.
It is working fine. But if I add file field into my html form, it does not send file to server.
There's serialize() method used in the doc example. But according to the jQuery doc:
Data from file select elements is not serialized.
Also, there's no clear way to get ajax file upload, because JS doesn't have access to the outside of the client browser. So, I don't think it's possible to make using dajaxice.
The easiest hack, I've found is to post form to the invisible iframe using target option:
<form method='POST' action='/upload' enctype='multipart/form-data' target='submit-iframe'>
so, only the iframe will be refreshed. Using js you than can get data from it catching the load() event.
More detailed process described here

Resources