JavaScript workaround for not supported HTML5 elements and attributes - javascript

I am using Modernizr to detect unsupported HTML5 elements and attributes within browsers. If a element/attribute is not supported I like to write a quick workaround with jQuery.
At the moment I am stumbling around the "required" attribute with input element. My thought was to "detect" the associated form element and hook the jQuery .submit() event of the form. But how to do it?
To gain insight yourself here is a sample code how I fixed the "placeholder" attribute with input element:
if(Modernizr.input.placeholder == false) {
alert('input placeholder not exists, perform a workaround...');
$('[placeholder]').each(function() {
var input = $(this);
var placeholder = input.attr('placeholder');
input.bind('focus', function() {
if(this.value == placeholder) {
this.value = '';
$(this).removeClass('mzr-no-placeholder');
}
}).bind('blur', function() {
if(this.value == '') {
this.value = placeholder;
$(this).addClass('mzr-no-placeholder');
}
});
if(!this.value.length) {
this.value = placeholder;
$(this).addClass('mzr-no-placeholder');
}
});
}
else {
alert('input placeholder exists.');
}
Here is the solution
Thanks to greut.
if(Modernizr.input.required == false) {
alert('Tag input required not exists, perform a workaround...');
$('form').submit(function() {
var requirementsOK = true;
$('[required]', this).each(function() {
if(!this.value.length) {
$(this).addClass('mzr-no-required');
requirementsOK = false;
}
else {
$(this).removeClass('mzr-no-required');
}
});
return requirementsOK;
});
}
else {
alert('Tag input required exists.');
}

Here an hint on how to start that:
if (Modernizer.input.required === false) {
$('form').submit(function() {
$('[required]', this).each(function() {
if (!$(this).val()) {
alert('derp!');
return false;
}
}
}
}

Related

DOM not being manipulated from inside a function that is being triggered properly

I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});

Placeholder code used for IE8 causing dropdown login field to lose focus

I am using the below placeholder code for IE8, however about 70% of the time when you move your mouse around in the dropdown login field it loses focus (the whole dropdown login field vanishes); through debugging - when I remove this code the problem goes away - I have found the cause of the problem is this code:
Edit: I have found it isn't caused by any particular placeholder code, but it IS caused by some part of the process as I have tried 3 separate placeholder plugins and it happens on all 3 of them; take them away and no problems.
$(document).ready(function() {
if ( !("placeholder" in document.createElement("input")) ) {
$("input[placeholder], textarea[placeholder]").each(function() {
var val = $(this).attr("placeholder");
if ( this.value == "" ) {
this.value = val;
}
$(this).focus(function() {
if ( this.value == val ) {
this.value = "";
}
}).blur(function() {
if ( $.trim(this.value) == "" ) {
this.value = val;
}
})
});
// Clear default placeholder values on form submit
$('form').submit(function() {
$(this).find("input[placeholder], textarea[placeholder]").each(function() {
if ( this.value == $(this).attr("placeholder") ) {
this.value = "";
}
});
});
}
});
You can view an example here: http://condorstudios.com/stuff/temp/so/header-sample.php
Edit: Not sure if it will help as jsfiddle doesn't work on IE8 and I can't test if the fiddle behaves badly in IE8 too, but here is the fiddle: http://jsfiddle.net/m8arw/7/
Any way to fix this?
Have you tried switching your event to show/hide dropdown to 'mouseenter' and 'mouseleave'?
It's a lot more reliable on old IE than 'focus' and 'blur' event. Also, bind the event directly on the 'dropdown' div is more preferable than on the 'input' element.
In short, please try change this part of your code like this.
$(function() {
var dropdown = $('div.login div.dropdown')
.on('mouseenter', function() {
dropdown.css('display', 'block');
})
.on('mouseleave', function() {
dropdown.removeAttr('style');
});
});
demo: http://so.devilmaycode.it/placeholder-code-used-for-ie8-causing-dropdown-login-field-to-lose-focus
$(function(){
$('#main_header .login li').hover(function(){
$(this).find('.dropdown').show();
},function(){
$(this).find('.dropdown').hide();
});
});
NOTE: i have also cleaned up and fixed some coding horror in your js code...
I use this code to implement placeholder on all browsers (it uses Modernizr to detect it):
Demo: http://jsfiddle.net/S3zQ9/
var placeholder_OnBlur = function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
};
var placeholder_OnFocus = function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
};
var placeholder_OnSubmit = function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
};
var placeholder_OnLoad = function () {
if (!!$(this).attr('placeholder')) {
$(this).on('focus', placeholder_OnFocus);
$(this).on('blur', placeholder_OnBlur);
$(this).parents('form').on('submit', placeholder_OnSubmit);
$(this).blur();
}
};
if (!Modernizr.input.placeholder) {
$('[placeholder]').each(placeholder_OnLoad);
}
Don't have IE8 to test it, but it should work.

JavaScript Echo Var Within Double Quote

Okay,
Another novice type question.
I have this array within the head section on my website and want to use it inline JavaScript:
var MyVariable = {"chkboxid":"chkbox"}
chkboxid is a id of a checkbox input.
Now, while validating the checkbox input on form submit, neither this works
$("form#myform").submit(function () {
if ($(MyVariable.chkboxid).is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
Nor This (check the double quote at the variable)
$("form#myform").submit(function () {
if ($("MyVariable.chkboxid").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
However, if I hardcode the checkbox input id, it works. I mean "input#chkbox" in place of MyVariable.chkboxid.
$("form#myform").submit(function () {
if ($("input#chkbox").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
How can I use that variable instead of hard coding the input id?
You are missing the "#" before the ID:
$("form#myform").submit(function () {
var element = $("#" + MyVariable.chkboxid)
if (element.is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
}
Note however that chkboxid is the key, the actual ID of the checkbox should be the value:
var MyVariable = {"chkboxid": "real_id_here"}
please check below code.hope it will work
$("form#myform").submit(function () {
if ($("#chkboxid").is("checked")) {alert("checked");
} else {
alert("not checked");
}
});
thanks,Ripa Saha

Placeholders in IE

I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.
instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')
For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')
<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>

Why can't javascript/jquery-feature be applied to multiple nodes?

I have a small javascript that changes the title of a input-field to it's value and some other stuff:
function autoFill(id){
if(jQuery(id).val()==""){
jQuery(id).val(jQuery(id).attr("title"))
.addClass("help");
};
jQuery(id).focus(function(){
if(jQuery(this).val()==jQuery(this).attr("title")){
jQuery(this).val("").removeClass("help");
}
})
.blur(function(){
if(jQuery(this).val()==""){
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
jQuery(".trip").submit(function(){
if(jQuery(id).val() == jQuery(id).attr("title")){
jQuery(id).val('');
}
});
}
When I try to use this script on a class that is on several nodes on one page it only works on the first. For example:
autoFill(".field");
Now I have to make it like this instead:
autoFill("#driver_from");
autoFill("#driver_to");
autoFill("#driver_when");
autoFill("#passenger_from");
autoFill("#passenger_to");
autoFill("#passenger_when");
how do I make it so that it works on every field instead?
Something like this would work:
function autoFill(selector){
jQuery(selector).each(function() {
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
};
jQuery(".trip").submit(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val('');
}
});
}).focus(function(){
if(jQuery(this).val() == jQuery(this).attr("title")) {
jQuery(this).val("").removeClass("help");
}
}).blur(function(){
if(jQuery(this).val() == "") {
jQuery(this).val(jQuery(this).attr("title"))
.addClass("help");
}
});
}
The important part is the .val() check at the beginning, it's getting the .val() of the first match, you need to handle each separately.
Or, rewrite it as a plugin like this:
(function($) {
$.fn.autoFill = function() {
return this.each(function() {
$(".trip").submit(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val('');
}
});
}).focus(function(){
if($(this).val() == $(this).attr("title")) {
$(this).val("").removeClass("help");
}
}).blur(function(){
if($(this).val() == "") {
$(this).val($(this).attr("title")).addClass("help");
}
}).blur();
};
})(jQuery);
Then you can call it like this:
$(".field").autoFill();

Categories