Develop Reference

After validation return false document on click event not working

I have following validation in my web page,
$( document ).on( 'click', '.click_button', function() {
if(($('#first_name').val() == "")){
alert('Firstname missing');
return false;
}
// post to ajax
});
Once it met with firstname missing validation error the click event (for class click_button) will not work afterward. How can I append the click event after return false. Any advice will be greatly appreciated

function checkFormIsValid(){
var isValid = true;
var input = $.trim($('#first_name').val());
if(typeof input != 'string' || input==''){
isValid = false;
}
return isValid;
}
$( document ).on( 'click', '.click_button', function(e) {
if(checkFormIsValid()){
//do your stuff
}else{
e.preventDefault();
alert('Firstname missing');
return false;
}
});
Here is the fiddle https://jsfiddle.net/adwp6dLe/2/

please review this one (basically i don't add anything. only $('#first_name').val() === "" ). your code's working
html
<input id="first_name">
<button type="button" class="click_button">post</button>
javascript
$(document).on('click', '.click_button', function(e) {
if (($('#first_name').val() === "")) {
alert('Firstname missing');
return false;
}
alert('sending');
// post to ajax
});
jsfiddle

jQuery inline edit return key

I've got a working inline edit script which lets the user edit his or her name.
But it currently does not "save" when the user hits the enter key
The script:
<span class="pageTitle" id="username">Visitor 123123981203980912 <span class="iconb" data-icon=""></span></span>
// Inline edit
$.fn.inlineEdit = function(replaceWith, connectWith) {
$(this).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(this).click(function() {
var elem = $(this);
elem.hide();
elem.after(replaceWith);
replaceWith.focus();
replaceWith.blur(function() {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
});
});
};
var replaceWith = $('<input name="temp" type="text" class="inlineEdit" />'),
connectWith = $('input[name="hiddenField"]');
$('#username').inlineEdit(replaceWith, connectWith);
How can i make the above also react when the enter key is hit?

You need to detect the enter press and do the same thing in blur function. Add the following to your js. Demo
replaceWith.keypress(function(e) {
if(e.which == 13) {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
}
});

This should fire when the enter key is pressed inside the input:
$('#username').live("keypress", function(e) {
if (e.keyCode == 13) {
// action here
}
});

You can call the same function on keydown and check for e.keyCode for enter key which is 13..a fiddle would be helpful..
Also check this link
Thanks,
Hardik

val() returns Placeholder value instead of the actual value in IE8,9 when the field is empty

Placeholder attribute shown below works fine in firefox but if val() is called when the field is empty it returns the placeholder value instead of the actual value in the text.
JSFiddle - http://jsfiddle.net/Jrfwr/2/
<input id="tlt" type="text" placeholder="Enter Title" />
JSCode
function placeHolderFallBack() {
if ("placeholder" in document.createElement("input")) {
return;
}
else {
$('[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();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
}

You could override the val() method but I don't like doing that :D
I wrote a simple pVal() function which does the job
$.fn.pVal = function(){
var $this = $(this),
val = $this.eq(0).val();
if(val == $this.attr('placeholder'))
return '';
else
return val;
}
$(function(){
alert($('input').val())
alert($('input').pVal())
});​
http://jsfiddle.net/W7JKt/3/

In your JSFiddle code you get the value of the textbox in a BUTTON CLICK event... and your code that checks if the current value of the textbox is equal to the placeholder executes in the FORM SUBMIT event.
So... the problem is that the BUTTON's CLICK event executes before the FORM's SUBMIT event.
This code shows an example of how to get the correct value
Hope that helps.

Its to do with HTML 5. Please see this article.
http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

JQuery Check if input is empty not checking onload?

I am using this code to check if an inputbox is empty or not and it works fine but it only checks check a key is press not when the page loads.
It's does what it should but I also want it to check the status when the page loads.
Here is the current code:
$('#myID').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

Try the following:
$(function() {
var element = $('#myID');
var toggleClasses = function() {
if (element.val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
};
element.on('keyup keydown keypress change paste', function() {
toggleClasses(); // Still toggles the classes on any of the above events
});
toggleClasses(); // and also on document ready
});

The simplest way to do is trigger any of the keyup,keydown etc event on page load. It will then automatically call your specific handler
$(document).ready(function(){
$("#myID").trigger('keyup');
});

try checking the value on a doc ready:
$(function() {
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
EDIT: just as an update to this answer, a nicer approach might be to use toggle class, set up in doc ready then trigger the event to run on page load.
function check() {
var $status = $('#status');
if ($(this).val()) {
$status.toggleClass('required_ok').toggleClass('ok');
} else {
$status.toggleClass('required_ok').toggleClass('not_ok');
}
}
$(function () {
$('#myID').on('keyup keydown keypress change paste', check);
$('#myID').trigger('change');
});

Well then why dont just check the field after the page is loaded?
$(document).ready(function(){
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

JQuery Validation Problem

I doing a field validation using jquery to check if it is empty. If it is I want to display a message and then refocus on the field so the user can enter some data. Code:
$('#fieldId').blur(function() {
var fieldValue = $(this).val();
if(fieldValue == null || fieldValue.length == 0) {
$(this).addClass('error');
// show error message
$('#errorDivId')
.text('You must enter a value in this field')
.show();
$(this).focus();
}
else {
if ($(this).is('.error')) {
$(this.removeClass('error');
$('#errorDivId').hide()
}
}
});
It sort of works but it moves the cursor to the next field and not the one I refocused on.

You can try this:
$('#fieldId').blur(function(evt) {
var fieldValue = $(this).val();
if(fieldValue == null || fieldValue.length == 0) {
$(this).addClass('error');
// show error message
$('#errorDivId')
.text('You must enter a value in this field')
.show();
this.focus();
evt.preventDefault();
}
else {
if ($(this).is('.error')) {
$(this.removeClass('error');
$('#errorDivId').hide()
}
}
});
However that may not completely solve the problem, as some browsers might be confused. As an alternative, wrap your "focus" call up as a timeout and run it after the current event finishes:
var self = this;
setTimeout(function() { self.focus(); }, 1);
It's kind-of a hack but it should also work.
edit — #Gus is right about which "focus()" to call

The blur event is triggered during a focus change (as the control you are validating loses focus). This could cause weird behaviour if you try to alter the focus while it is already changing. Instead of blur, try attaching the validation to the change event.
Also, there's no need to call the jQuery version of focus: $(this).focus(), you can just call this.focus().
$('#fieldId').change(function() {
var fieldValue = $(this).val();
if(fieldValue == null || fieldValue.length == 0) {
$(this).addClass('error');
// show error message
$('#errorDivId').text('You must enter a value in this field').show();
this.focus();
} else {
if ($(this).is('.error')) {
$(this).removeClass('error');
$('#errorDivId').hide()
}
}
});