I have set up a form where the user can comment by entering their name, email and comment.
I want to run a validation on the input once the user leaves the #name field, but I can't get it to work please help.
$(document).ready(function() {
$('#name').on("change", function () {
var name = $('input[name=name]');
if (name.val()=='') { //A regex check will be added later on to check for invalid caracters
name.addClass('hightlight');
$('#name_error').show();
var error = true;
} else {
name.removeClass('hightlight');
$('#name_error').hide();
}
if ($(error).length) {
return false;
}
});
});
$('#name').focusout(function() {
//code
});
if you want it to trigger on leave than you can use:
$('#name').blur(function() {
//your code
}
Refer here: http://api.jquery.com/blur/
if you want to trigger on change than:
$('#name').change(function() {
//your code
}
Refer here:http://api.jquery.com/change/
You can use focusout instead of change
$(document).ready(function () {
$('#name').focusout(function () {
var name = $('input[name=name]');
if (name.val() == '') { //A regex check will be added later on to check for invalid caracters
name.addClass('hightlight');
$('#name_error').show();
var error = true;
} else {
name.removeClass('hightlight');
$('#name_error').hide();
}
if ($(error).length) {
return false;
}
});
});
Related
Here is the JS Fiddle
My Ajax code not working i dont know how..
I used ajax below code many time but this time not working
please help me..
only this code run inside the ajax code
if(!validateee()) return false;
If validation code remove then ajax run
Ajax Code
$('#body-enquiry').submit(function(e){
e.preventDefault();
if(!validateee()) return false;
$(this).find(":submit").prop("disabled", true);
var form = $(this);
var post_url = 'enquiry-entire-mail.php';
var post_data = form.serialize();
$.ajax({
type: 'POST',
url: post_url,
data: post_data,
success: function(data) {
alert('Submited');
}
});
});
you forgot to return true at the end of your function that is the issue.
return true;
this you need to write in you validateee function .
please find update here : https://jsfiddle.net/qref356z/6/
you updated validateee function, update below code it will work i checked it at my end
function validateee() {
var name = document.popbody.namebody.value;
var email = document.popbody.emailbody.value;
var number = document.popbody.numberbody.value.length;
var msg = document.popbody.msgbody.value.length;
alert('msg5');
if(name.trim() == "") {
alert("Please Fill Name");
document.popbody.namebody.focus();
return false;
}
alert('msg4');
if(name<3) {
alert("invalid Name");
document.popbody.namebody.focus();
return false;
}
alert('msg3');
if(email=="") {
alert("Enter Your Email");
document.popbody.emailbody.focus();
return false;
}
alert('msg2');
if(number=="") {
alert("Enter Your Number");
document.popbody.numberbody.focus();
return false;
}
alert('msg1');
if(number<9) {
alert("Your Mobile number at least 10 digit");
document.popbody.numberbody.focus();
return false;
}
alert('msg');
if(msg == "") {
alert("Enter your Message");
document.popbody.msgbody.focus();
return false;
}
return true;///you need to add here
}
I'm getting error TypeError: $(...) is null and TypeError: $(...).visible is null.
In onepage checkout jquery function which is if($('checkout-step-shipping').visible() || $('checkout-step-shipping_method').visible())
Please let me know what may cause this problem
function styleRegionInterval() {
if (!intervalInit) {
styleRegion = setInterval(styleRegionInput, 500);
intervalInit = true;
}
}
function styleRegionInput() {
if($('checkout-step-shipping').visible() || $('checkout-step-shipping_method').visible()) {
clearInterval(styleRegion);
intervalInit = false;
shippingRegionUpdater.update();
}
}
Some days before i had removed shipping method but my checkout was working fine without it.
There is same on billing or register page of checkout to continue button as function calls there.
Try using jQuery('checkout-step-shipping').visible() instead of $('checkout-step-shipping').visible().
Your could should look like:
function styleRegionInterval() {
if (!intervalInit) {
styleRegion = setInterval(styleRegionInput, 500);
intervalInit = true;
}
}
function styleRegionInput() {
if(jQuery('checkout-step-shipping').visible() || jQuery('checkout-step-shipping_method').visible()) {
clearInterval(styleRegion);
intervalInit = false;
shippingRegionUpdater.update();
}
}
My problem is when I check one of the checkboxs and then I search it, the checkbox will change to uncheck. and I don`t know what's wrong with my livesearch, it is not working.
please check this link to test.
http://jsfiddle.net/v921/KmVHf/4/
is is my javascript
var tr = $(".AvailableGroupLab").clone().html();
function filter(element) {
$('.AvailableGroupLab').html(tr);
var value = $(element).val().toLowerCase();
$(".AvailableGroupLab tr").each(function () {
if ($(this).text().toLowerCase().search(value) == -1){
$(this).remove();
}
});
}
Try
function filter(element) {
var $trs = $('.AvailableGroupLab tr').hide();
var regexp = new RegExp($(element).val(), 'i');
var $valid = $trs.filter(function () {
return regexp.test($(this).children(':nth-child(2)').text())
}).show();
$trs.not($valid).hide()
}
$('input:text').on('keyup change', function () {
filter(this);
})
Demo: Fiddle
I tried to define multiple custom validation rules under a observable array, I was referring to https://github.com/ericmbarnard/Knockout-Validation/wiki/Custom-Validation-Rules.
Following is my observablearray with the validation calls:
this.WeeklyData = ko.observableArray([]).extend({
validation: [
{
validator : fminIncrements,
message: 'use 15 min increments'
},
{
validator: ValidateMinMax,
message: "Invalid min/max value"
}
]
});
var ValidateMinMax = function (valueArray) {
var check = true;
ko.utils.arrayFirst(valueArray, function (value) {
if (parseInt(value.Val(), 10) < 0 || parseInt(value.Val(), 10) > 168) {
check = false;
return true;
}
});
return check;
};
var fminIncrements = function (valueArray) {
var check = true;
ko.utils.arrayFirst(valueArray, function (value) {
if (parseInt(value.Val(), 10) % 15 !== 0) {
check = false;
return true;
}
});
return check;
};
when I do this only the first rule fires. I debugged, and it doesn't even hit the second one. Any idea?
Thanks in advance for any help.
I believe its because you are using the ko.utils.arrayFirst(). If you use the ko.utils.arrayForEach() instead to check for every case then it shouldn't return at the first occurrence.
ok so im having a hard time hiding some layout sections (divs in my layout page and im using mvc3).
I have this js fragment which is basically the main logic:
$('.contentExpand').bind('click', function () {
$.cookie('right_container_visible', "false");
});
//Cookies Functions========================================================
//Cookie for showing the right container
if ($.cookie('right_container_visible') === 'false') {
if ($('#RightContainer:visible')) {
$('#RightContainer').hide();
}
$.cookie('right_container_visible', null);
} else {
if ($('#RightContainer:hidden')) {
$('#RightContainer').show();
}
}
as you can see, im hidding the container whenever i click into some links that have a specific css. This seems to work fine for simple tests. But when i start testing it like
.contentExpand click --> detail button click --> .contentExpand click --> [here unexpected issue: the line $.cookie('right_container_visible', null); is read but it doesnt set the vaule to null as if its ignoring it]
Im trying to understand whats the right logic to implement this. Anyone knows how i can solve this?
The simpliest solution is to create variable outside delegate of bind.
For example:
var rightContVisibility = $.cookie('right_container_visible');
$('.contentExpand').bind('click', function () {
$.cookie('right_container_visible', "false");
rightContVisibility = "false";
});
if (rightContVisibility === 'false') {
...
}
The best thing that worked for me was to create an event that can catch the resize of an element. I got this from another post but I dont remember which one. Anyway here is the code for the event:
//Event to catch rezising============================================================================
(function () {
var interval;
jQuery.event.special.contentchange = {
setup: function () {
var self = this,
$this = $(this),
$originalContent = $this.text();
interval = setInterval(function () {
if ($originalContent != $this.text()) {
$originalContent = $this.text();
jQuery.event.handle.call(self, { type: 'contentchange' });
}
}, 100);
},
teardown: function () {
clearInterval(interval);
}
};
})();
//=========================================================================================
//Function to resize the right container============================================================
(function ($) {
$.fn.fixRightContainer = function () {
this.each(function () {
var width = $(this).width();
var parentWidth = $(this).offsetParent().width();
var percent = Math.round(100 * width / parentWidth);
if (percent > 62) {
$('#RightContainer').remove();
}
});
};
})(jQuery);
//===================================================================================================