We Keep Coding

onblur functionality stops working in IE11

I have a simple function that checks a field is a number, and that it begins "000".
This is checked using "onblur", to provide instant(ish) feedback to the user.
My code:
function IsNumeric(input)
{
return (input - 0) == input && (''+input).trim().length > 0;
}
function checkNumber(field) {
if (!IsNumeric(field.value)) {
seterrorlabel("That's not a number");
toggleButton('SubmitButton', true);
} else if (!(field.value.substring(0, 3) == "000")) {
seterrorlabel("All numbers must begin 000. One 0 for external. Two 0's for an international number.");
toggleButton('SubmitButton', true);
} else {
toggleButton('SubmitButton', false);
seterrorlabel("");
}
}
function toggleButton(button,disableit) {
var input = document.getElementById(button);
input.disabled = disableit;
}
function seterrorlabel(message) {
var thelabel = document.getElementById('numbererror');
thelabel.innerHTML = message;
}
The problem is that in Internet Explorer 11, the onblur function appears to work only once. I can enter a number such as "001234" and receive the expected error, but after correcting the error, and entering a valid "0001234" the label is not cleared.
Similarly, if i add letters, to make this non-numeric, the label does not update.
In Chrome, this works pefectly however, and it updates each time i would expect onblue to fire.
Any ideas?

just want to confirm that when you enter '001234' and hit the button, does your button gets enabled when focus again to the textbox

This was fixed in Internet Explorer by using a different function for IsNumeric - the previous one was causing issues, though they were not showing the console until changing the function definition to global scope.

JavaScript for HTML5 required field set up to work in Safari

I am using the following script to change the HTML5 required attribute of my input elements. I am wonder whether there is a way to modify this script to make it also work in Safari browsers, since Safari does not support this attribute.
Here is the script:
$(document).ready(function() {
$_POST = array();
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("This field can't be blank");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
})

You can also do this:
var valid = true;
$('input[required]').each(function() {
if (this.value == '') {
// Alert or message to let them know
valid = false;
return false; // stop on first error, or remove this and it'll go through all of them.
}
});
if (valid === false) {
return false;
}

Check out this page here. It contains a hacky solution that should add the desired functionality
http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

You're going to need to run the check yourself using an event handler on your form submission. In that handler, you run the check yourself, and if it fails, you display whatever error message and block the submission using preventDefault or return false.
An example can be found here, though as it notes, you need to be careful if you use checkValidity as your means of checking the form.

Form validation not working in ie8 or 7

Hi basically i can't seem to get the form validation to work on my form in ie8 or below. It works absolutely fine every where else though.
Basically its along these lines:
function validateform() {
if (document.getElementById('firstinput').value == '') {
alert("Select start Date");
document.getElementById('firstinput').focus();
return false;
}
if (document.getElementById('secondinput').value == '') {
alert("Select end Date");
document.getElementById('secondinput').focus();
return false;
}
if (document.getElementById('restriction').checked == false) {
alert('Please select I have read and understand the above restrictions.');
return false;
}
if (document.getElementById('termscondition').checked == false) {
alert('Please select terms and condition..');
return false;
}
if (document.getElementById('letters_code').value == '') {
alert("Enter captcha code..");
document.getElementById('letters_code').focus();
return false;
}
return true;
}​
Just wondered if there are any obvious mistakes that i can't see :s thanks for any help in advance.

Editing because i phased this terribly!
I have encountered an issue involving a submit button being named submit, that only failed in IE, and not in firefox/chrome, if you could make sure that is not the issue, that would help!
Alternatively, more information would be helpful, as there does not appear to be anything wrong with the code posted

Simple way to check if placeholder is supported?

I want to use the HTML5 "placeholder" attribute in my code if the user's browser supports it otherwise just print the field name on top of the form. But I only want to check whether placeholder is supported and not what version/name of browser the user is using.
So Ideally i would want to do something like
<body>
<script>
if (placeholderIsNotSupported) {
<b>Username</b>;
}
</script>
<input type = "text" placeholder ="Username">
</body>
Except Im not sure of the javascript bit. Help is appreciated!

function placeholderIsSupported() {
var test = document.createElement('input');
return ('placeholder' in test);
}
I used a jQuery-ized version as a starting point. (Just giving credit where it's due.)

Or just:
if (document.createElement("input").placeholder == undefined) {
// Placeholder is not supported
}

Another way without making an input element in memory that has to be GC'd:
if ('placeholder' in HTMLInputElement.prototype) {
...
}

If you are using Modernizr, quick catch following:
if(!Modernizr.input.placeholder){
...
}

http://html5tutorial.info/html5-placeholder.php has the code to do it.
If you're already using jQuery, you don't really need to do this though. There are placeholder plugins available ( http://plugins.jquery.com/plugin-tags/placeholder ) that will use the HTML5 attribute where possible, and Javascript to simulate it if not.

I'm trying to do the same... here i wrote this
if(!('placeholder'in document.createElement("input"))){
//... document.getElementById("element"). <-- rest of the code
}}
With this you should have an id to identify the element with the placeholder...
I don't know thought if this also help you to identify the element ONLY when the placeholder isn't supported.

Hi there this is an old question but hopefully this helps someone.
This script will check the compatibility of placeholders in your browser, and if its not compatible it will make all input fields with a placeholder use the value="" field instead. Note when the form is submitted it will also change your input back to "" if nothing was entered.
// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
$('[placeholder]').load(function(){
var input = $(this);
if (input.val() == '')
{
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
});
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}

A bit late to the party, but if you're using jQuery or AngularJS you can simplify the method suggested above without using any plugins.
jQuery
typeof $('<input>')[0].placeholder == 'string'
AngularJS
typeof angular.element('<input>')[0].placeholder == 'string'
The checks are very similar, as AngularJS runs jQlite under the hood.

NOTE: Placeholder DO NOT work in internet explorer in a way, it should work.
document.createElement("input").placeholder == undefined
Doesnt work in internet explorer 11 - document.createElement("input").placeholder return empty string
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
Doesnt work in internet explorer 11 - return true
'placeholder'in document.createElement("input")
Doesnt work in internet explorer 11 - return true
In theory, Internet explorer 11 is supposed to support placeholder, but in fact - when input get focus placeholder disappear. In Chrome placeholder showed until you actually type something, no matter on focus.
So, feature detection doesnt work in this case - you need to detect IE and show Labels.

Script works partially in Chrome and IE but not in Firefox

The following code works somewhat in chrome and IE but not in Firefox.
The idea is to force users to check an "Agree" box before advancing by following either one of the possible links available.
<script type="text/javascript">
function agreeCheck()
{
valid = false;
var agree = document.getElementById('agree');
if(isAgree(agree)){
valid= true;
}
return valid;
}
function isAgree(elem)
{
if ( elem.checked == false )
{
Show_Stuff(agreespan, "true");
return false;
}
else
{
Show_Stuff(agreespan, "false");
return true;
}
}
function Show_Stuff(warning,on_off)
// Function that will swap the display/no display for
// all content within span tags
{
if ((warning.style.display == "none")&&(on_off =="true"))
{
warning.style.display = "";
}
else
{
warning.style.display = "none";
}
}
</script>
<input type="checkbox" name="agree" value="signed" id="agree">
I agree</input> <span ID="agreespan" style="display: none">
<font color="red">You must agree in order to proceed</font>
</span>
<button type="button" title="Proceedt" class="btn-proceed" onclick="if (agreeCheck()==true){ window.location='myURL'; } else{ return agreeCheck();}"></button>
<input type="image" src="anotherURL" title="myTitle" onClick="return agreeCheck();"/>
Notes:
obviously myURL and anotherURL are
actual valid URLs
clicking on the first button when the box is not checked prevents the page from progressing but does not reveal the error message in the span in Chrome and IE. In Firefox it does nothing regardless of the box status
clicking the image link (input type="image") when the box is not checked works well in Chrome and IE and the error message appears. In Firefox the link is followed regardless of the box's status.
I realize that this could be written differently to simplify things. The problem is that I am implementing this in Magento where I only have access to chunks of code separately so I can't combine the parts of the If Else statement in a separate function.
**edit: I changed the if statement (one line before last) to
if (agree.checked ==true){ ...
this fixed the issue in chrome and IE and now those browsers are behaving properly. Firefox is still not doing what I want it to do

The problem is in isAgree function. Try the following:
function isAgree(elem)
{
if (!elem.checked == "Checked")
{
Show_Stuff(agreespan, "true");
return false;
}
else
{
Show_Stuff(agreespan, "false");
return true;
}
}
Hope it solves the issue. The solution resolves around this "checked" property.

span_tag.style.display is used for layout purposes not to hide or show the span tag
It doesn't work in your case because the JavaScript is probably breaking.
Try changing everything to use the following code
warning.style.visibility = "hidden";
warning.style.visibility = "visible";