We Keep Coding

Autofocus on the first empty field in the form

I am trying to achieve AutoFocus functionality on the first empty form field which can be an input element or any kind i.e.
1. textbox
2. radio button
3. Select
4. checkbox
I have had a look at the jquery website and tried using the :input selector
but I am unable to achieve Autofocus on any input field other than text box.
I have also setup a JS Fiddle,
Fiddle for code
Can somebody help here?

You might need to use filter() to find the inputs with empty values:
$(function () {
$("input:enabled").filter(function () {
return this.value.trim() == "";
}).first().focus();
});
This will not work if you are using checkbox. So for that:
$(function () {
$("input:enabled").filter(function () {
if ($(this).attr("type") == "checkbox" || $(this).attr("type") == "radio")
return $(this).val().trim() == "" || !this.checked;
else
return this.value.trim() == "";
}).first().focus();
});
Fiddle: http://jsfiddle.net/7fwrd2rk/

You need to filter() out the empty/unchecked inputs and set focus to the first element in the matched set, as below.
$(function () {
$("input:enabled").filter(function () {
return this.type.match(/checkbox|radio/i) && //when it's a checkbox/radio
!this.checked || //get me a list of unselected ones
($.trim(this.value) === ""); // else get me a list of empty inputs
}).first().focus(); //grab the first from the list and set focus
});
Here is a demo along the same lines.
This includes textarea and select.

jQuery form fields validation

i have a form with few input fields with class "inputfields" need to validate each field if empty alert 'fieldname is empty' otherwise return true my jquery code is not working keep getting errors at the console log can any one help please ?
jQuery(document).ready(function() {
$('.inputfields').each.on('change keyup' ,function(){
var ope = $(this).attr('name');
if (ope.val()==''){
alert(ope+'is empty');
}else {
console.log(ope);
}
});
});

I believe you want to check different types of input fields, hence want to use change and keyup.
I tried something based on your code, but this following solution will only work, if you want to validate text type input fields. For select or other input types you have to put some more checks inside the loop or have to some other way to validate.
$('.inputfields').each(function() {
$(this).bind('change keyup', function() {
var ope = $(this).attr('name');
if ($(this).val() == '') {
console.log(ope+'is empty');
} else {
console.log(ope+ ' : ' + $(this).val());
}
});
});
Hope this will lead you to find your desired solution.

JQuery MultiPage form.. validation on each step

I have a form which is split up into sections using pagination on each tag. (See Fiddle)
I however have required fields in each section, I'd like to validate it so that fields with the "required" attribute must not be blank before the user moves on to the next section.
http://jsfiddle.net/Azxjt/
I've tried to following but don't think I'm on the right tracks:
$(this).closest("article > :input").each(function() {
if($(this).val == null) {
con = 0;
}
});
if ( con == 0 ) {
alert("All fields must be filled in");
}
else {
}
Your help is appreciated :)

Text input will return a black value if no response has been entered. Try the following
In jQuery, the value is returned by val()
$(this).val() == ""
You could possibly enhance your jQuery selector to test only those input elements with a corresponding required label.

Use each function.
var isEmpty;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isEmpty= true;
}
});

validation on textbox depending on selectbox selected value change event in jquery

validation on textbox depending on selectbox selected value change event in jquery.
Below code working fine for first time or page refresh case.
but if i select 'NID' first and again change to 'PST' length part working when i select 'PST' first and again change to 'NID' length part notworking.
$(document).ready(function(){
$('#seIdproof').change(function(){
var PFID = $('#seIdproof').val();
$('#seCustomerId').val('');
if(PFID == 'PST'){
$('#seCustomerId').keyup(function(e) {
var len3=$(this).val().length;
if (len3 > 6){
alert("This Id proof number is not valid,Please enter valid number.");
$(this).val('');
}
});
}
if(PFID == 'NID'){
$('#seCustomerId').keyup(function(e) {
var len1=$(this).val().length;
if (len1 > 11){
alert("This Id proof number is not valid,Please enter valid number.");
$(this).val('');
}
});
}
});
});
Can anybody please suggest.
Thanks

try use .keyup(function(e) {
and add this code
e.preventDefault()
delete lines of return code and only put $(this).val('');

Placeholder text issue in IE browsers(8-9)

I am working on form(input field) validation.
Problem - IE browsers(8-9) consider the placeholder text as value and during validation it accepts the same value, however it should be considered as an empty value. I don't wanna use any script and to achieve it, I came up with below function. Can anybody improve the usability/scope of the function little bit more. Currently it makes input field blank everytime user enters the value. However, I want it to validate for first time when placeholder default text comes into action. Any suggestion?
HTML
<input type="text" name="memberid" id="memberid" placeholder="Some Value" />
Search
jQuery
$('#search-btn').on('click', function(){
if($.browser.msie){
$('input').each(function() {
var theAttribute = $(this).attr('placeholder');
if (theAttribute) {
$(this).val('');
alert('Please enter value - IE');
}
});
}
});

placeholder creates problem in < IE 9 so you can use data() like
HTML
<input type="text" name="memberid" id="memberid" data-placeholder="Some Value" placeholder="Some Value"/>
SCRIPT
$('#search-btn').on('click', function(){
if($.browser.msie){
$('input').each(function() {
var theAttribute = $(this).data('placeholder');
if (theAttribute == this.value) {// check placeholder and value
$(this).val('');
alert('Please enter value - IE');
}
});
}
});

I think the best way to achieve what you want to do is to build a complete solution for placeholders in IE8 and IE9. To do that, what I suggest is to use Modernizr, with the input placeholder function detection. So, you could use a function like this:
window.ie8ie9placeholders = function() {
if (!Modernizr.input.placeholder) {
return $("input").each(function(index, element) {
if ($(element).val() === "" && $(element).attr("placeholder") !== "") {
$(element).val($(element).attr("placeholder"));
$(element).focus(function() {
if ($(element).val() === $(element).attr("placeholder")) {
return $(element).val("");
}
});
return $(element).blur(function() {
if ($(element).val() === "") {
return $(element).val($(element).attr("placeholder"));
}
});
}
});
}
};
This will enable placeholders for IE8 and IE9. All you need to do is to use it when you initialize your code.
ie8ie9placeholders();