We Keep Coding

jQuery - Validation

I'm having an issue with my validation process. I'm not using a standard "submit" button, rather I have <span class="button" id="print">Print</span> and jQuery listens for a click. This is the validation code I have when that "button" is clicked:
var validation = "";
function validate() {
$("#servDetails").find("input").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
$("#checklist").find("input[required]").each(function () {
if ($(this).prop("required") && $(this).val() == "") {
validation = false;
}
else {
validation = true;
}
});
}
$("#print").on("click", function() {
validate();
if (validation == false) {
alert("Please fill out all required inputs!");
return false;
}
else {
window.print();
}
});
If I click the button without filling anything out (all items blank), I get my alert as expected.
If I fill out all of the required elements, it pulls up the print dialouge as expected.
However, if I leave some of the boxes blank while others are correctly filled, it still goes to print instead of giving me the alert like I need. Any thoughts?

The code have to be rewritten, or better replace it with any validation plug-in.
But in your case, I suppose, you just forgot to return, in case you found some not filled field. So if you have any filled input it override your validation variable.
The simplest solution is to remove
else {validation = true;} code blocks, and add
validation = true;
at the beggining of the function.

Toggle class if input is empty or contains value - Javascript

I'm trying to add a disabled class to an input if the value of the input is empty and remove it if the input has content value. Here is my current take on this that doesn't work:
if ($("#assignment_name").val() == "") {
$(".to_description").addClass("disabled");
};
This adds the class on load but it doesn't remove the class if someone types in the field. How can I achieve this?

You could use removeClass binded to an event that triggers when user enters text, such as keyup, for example:
$("#assignment_name").on('keyup', function() {
if ($("#assignment_name").val() == "") {
$(".to_description").addClass("disabled");
} else {
$(".to_description").removeClass("disabled")
}
});

You're just adding the class when first loading it, besides that you need to add an "onChange" event handler to check further changes on this input.
if ($("#assignment_name").val() == "") {
$(".to_description").addClass("disabled");
$("#assignment_name").on("change", function() {
if($(this).val() == "") {
$(".to_description").addClass("disabled");
} else {
$(".to_description").removeClass("disabled");
}
});
};

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.

Validate multiple textboxes

I have this code that validates if ContentPlaceHolder1_locationTextBox has text in it before newIndex can become 3.
if ((newIndex === 3 && $("#ContentPlaceHolder1_locationTextBox").val() == "")) {
$('#ContentPlaceHolder1_locationLabelV').show();
return false;
}
else {
$('#ContentPlaceHolder1_locationLabelV').hide();
}
However I also have ContentPlaceHolder1_countryTextBox & ContentPlaceHolder1_seaTextBox on the page with thier respective labels, how can I modify the script so that it validates against all textboxes?
I tried adding a horrible or statement however this was causing the page to freeze. What s the best method to check against all three textboxes?

You can add class for all inputs, example: validate
After you can create JS function. You can fire this function as you wish.
function check(){
$('.validate').each(function(){
label = $("label[for='"+$(this).attr('id')+"']");
if ((newIndex === 3 && $(this).val() == "")) {
label.show();
return false;
}
else {
label.hide();
}
});
}

function validate(value) {
if ...
//show div
else ...
// hide div
}
$("input[type='text']").each(function(){
//value from input text field
var myval = $(this).val();
//call validation function
validate(myval);
});

jQuery form validation for appended fields

I have a form which contains couple fields. Its very easy to validate this form. But when I'm using append or clone comand and add couple more fields in it dynamically I cannot validate the appended fields.
Here is the my code:
function addone(container, new_div) {
var to_copy = document.getElementById(new_div);
$(to_copy).clone(true).insertAfter(to_copy);
}
And because it doesn't matter which fields and I want all of them get field out I used class instead of id.
$(document).ready(function(){
$('#add_size').live('click', function(){
if($('.inp').val() == "") {
alert('Need to fill-out all fields')
}
else {
alert('Thanks')
}
})
})
Any idea? Thanks in advance.

$(document).ready(function(){
$('#add_size').live('click', function(){
if( ! checkvalid() ) {
alert('Need to fill-out all fields')
}
else {
alert('Thanks')
}
})
})
function checkvalid(){
var valid = true;
$('.inp').each(function(){
if (this.value == '') {
valid = false;
return;
}
})
return valid;
}

I see one thing that might cause you trouble...:
If you're only going to check fields for validity on submit, then I don't think you need the live handler. You're not adding fields with #add_size, you're adding .inp's. Just do your validations on click, and jQuery should find all the .inp class fields that are there at the time of the event:
$('#add_size').click(function(
$('.inp').each ...
)};
Or maybe I totally read the question wrong...