We Keep Coding

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.

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('');

Determining the :input type in jQuery

I'm running an .each() loop on all my form elements. I cannot find a way to determine the input type (whether it's a checkbox, text, select, textarea etc...).
Any ideas?
// When submitting
$("input[name='event_form_submit']").click(function() {
$("form[name='tepg_form_processor'] :input").each(function() {
console.log($(this).attr("type"));
// Determine whether this is a select, input etc?
});
return false;
});

$("form[name='test'] :input").each(function() {
if(this.tagName == "INPUT") {
console.log(this.tagName + ": " + this.type);
}
else
console.log(this.tagName);
});
Fiddle: http://jsfiddle.net/samliew/YSsvp/8/
Available Input Element Types

I'd suggest:
$("form[name='test'] :input").each(function() {
/* gets the type of the element ('checkbox','text','radio', etc
if there's no 'type' then it retrieves the tagName of the
element instead 'select','textarea', etc */
var inputType = this.type || this.tagName.toLowerCase();
console.log(inputType);
/* then does uses a switch to do something depending
on what you want to do */
switch (inputType) {
case 'text':
// do something with text-inputs
break;
case 'radio':
// do something with radio-inputs
break;
case 'select':
// do something with select-elements
break;
// ...etc...
default:
// do something with other elements, element-types
break;
}
});
JS Fiddle demo.

Try this (jsfiddle):
$("form[name='test'] :input").each(function() {
alert(this.type);
});

Losing input hints after clearing inout fields... any work around?

I have two scripts for clearing my form and using input hints. The input hints are not returning AFTER I execute the clear function.
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
$(" .bx4a").removeAttr("style");
$(" .bxTXTa").removeAttr("style");
$(" .bxTXTa2").removeAttr("style");
$(" .bx4a2").removeAttr("style");
$(" .bx").removeAttr("style");
$(" .ts").removeAttr("style");
$(" .button-toggle-on").removeAttr("style");
$(" .gnM").removeAttr("style");
$(" .gnF").removeAttr("style");
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
// jQuery Input Hints plugin
// Copyright (c) 2009 Rob Volk
// http://www.robvolk.com
jQuery.fn.inputHints=function() {
// hides the input display text stored in the title on focus
// and sets it on blur if the user hasn't changed it.
// show the display text
$(this).each(function(i) {
$(this).val($(this).attr('title'))
.addClass('hint');
});
// hook up the blur & focus
return $(this).focus(function() {
if ($(this).val() == $(this).attr('title'))
$(this).val('')
.removeClass('hint');
}).blur(function() {
if ($(this).val() == '')
$(this).val($(this).attr('title'))
.addClass('hint');
});
};
$(document).ready(function() {$('input[title],textarea[title]').inputHints();});

The strategy for hint text is really simple: set the default value of the input to the hint text that you want, then when it gets focus set the value to ''. Then onblur, if the value is still '', set the value to the default value. e.g.
<label for="userName">Name:<input name="userName" id="userName"
value="Your full name…" class="hint"></label>
<script>
function hintFocus() {
if (this.value == this.defaultValue) this.value = '';
}
function hintBlur(el) {
if (this.value == '') this.value = this.defaultValue;
}
// Add the listeners
var el = document.getElementById('userName');
el.onfocus = hintFocus;
el.onblur = hintBlur;
</script>
Use a standard reset button for the form and give it a listener so it adds the hint class to input type text and textarea (as appropriate) when the form is reset.

I think there is a bug in RobG's answer, if the user type in text exactly same as the hint(Your full name…), then and then click somewhere and click the input, then what the user type in will disappear.

Need help on change event on both input boxes

i need help on this one....i want to trigger the alert() e.g some code to execute after the change event on both input boxes....here is my code..
Millimeter: <input type="text" id="millimeter" class="filter"/>
Inch: <input type="text" id="inch" class="filter"/>
<script type="text/javascript">
$(document).ready(function(){
$(".filter").change(function(){
var value = this.value;
var id = this.id;
var convert = "";
switch(id)
{
case "millimeter":
convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
$("#inch").val(convert).change();
break;
case "inch":
convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
$("#millimeter").val(convert).change();
break;
default:
alert('no input has been changed');
}
alert(id+" triggered the change() event");
//some code here....
});
});
</script>
what i want is to trigger the alert() 2 twice...the result would be look like this..."Millimeter triggered the change() event"...and then when the other input box changes its value...."Inch triggered the change() event"....vice versa...i'm new to javascript and jquery...any help would be much appreciated..

The problem with your code is that in the change event of the first textbox you are triggering the change event of the second and thus entering in an endless loop. You should only use the following:
$("#inch").val(convert);
and:
$("#millimeter").val(convert);
in order to set the value of the other field but do not trigger change again.

Running your script on jsFiddle got me a "Maximum call stack size exceeded" error. This is because you're calling your .change() function inside of itself. I removed it, and it works fine.
Fiddle: http://jsfiddle.net/EwdLs/
$(".filter").change(function() {
var value = this.value;
var id = this.id;
var convert = "";
switch (id) {
case "millimeter":
convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
$("#inch").val(convert);
break;
case "inch":
convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
$("#millimeter").val(convert);
break;
default:
alert('no input has been changed');
}
alert(id + " triggered the change() event");
//some code here....
});

If you want each input's change to also trigger the other input's change, but don't want to get in an endless loop, try some variation on the following:
$(document).ready(function(){
function applyChange(el, changeOther) {
var value = el.value;
var id = el.id;
var convert,
other = "";
if (changeOther) {
switch(id) {
case "millimeter":
convert = (value / 25.4).toFixed(2);
other = "#inch";
break;
case "inch":
convert = (value * 25.4).toFixed(2);
other = "#millimeter";
break;
default:
alert('no input has been changed');
break;
}
if (other != "") {
$(other).val(convert);
applyChange($(other)[0], false);
}
}
alert(id+" triggered the change() event");
//some code here....
}
$(".filter").change(function(){
applyChange(this, true);
});
});
In case it's not obvious, I basically took your existing change handler and put it in a new function, applyChange, which has a parameter to tell it whether or not to recurse. The code as is is clunky, but it should give you the general idea of one way to do what you seem to be asking.
P.S. Be sure to add in some validation that what the user entered is really a number.