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.

jquery validation loop producing false positives

$(document).ready( function()
{
// hides the story and error text when the page loads
$('.errorText').hide();
$("#story").hide();
// global variables for the blanks and the textarea forms
var input = $("form").children();
var storyBlank = $('#story').children();
// Main Event on Click
$('button.submit').on( "click", function (event)
{
// if the form is not validated, highlights errors and prevents the submit from going through
if(!validate())
{
event.preventDefault();
}
// if the form is validated, fills the blanks in the story and displays it
else
{
fillInTheBlanks();
}
});
// Checks to see if there are any empty fields and highlights them if they are empty
function validate()
{
console.log('validate() initiated')
var success = false;
errcnt = 0;
cnt = 0;
while (cnt < 9)
{
if (input.eq(cnt).val().length == 0)
{
errcnt++;
input.eq(cnt).removeClass("hide");
console.log('errorcount', errcnt, 'at input', cnt);
}
else if (input.eq(cnt).val().length !== 0 && !(input.eq(cnt)).hasClass("hide"))
{
input.eq(cnt).addClass("hide");
}
cnt++;
}
if (errcnt == 0)
{
success = true;
}
return success;
}
// Fills in the blanks of the story
function fillInTheBlanks()
{
console.log('fillInTheBlanks() executed');
var blankCount = 0;
while (blankCount < 9)
{
storyBlank.eq(blankCount).empty().append(input.eq(blankCount).val());
blankCount++;
}
$("#story").show();
}
});
I am trying to make a mad libs style page with 9 textboxes for input. I am running into two problems.
First, when I click submit with all textboxes empty, only the the first four show an error (this is done in css, I have two classes on all the textboxes "error hide", I remove the class hide in my loop to show the error).
The second problem I'm having is if I click submit with text in all the textboxes, my validate functions errorcount goes up to 4 errors at every other textbox. I've even tried '$('input').eq(0).val().length == 0' for every textbox in the index and it's returning false every time. I don't understand how it's getting into that if then statement if it doesn't satisfy the argument.

i don't understand your problem, but if is validation on inputs empty... using
http://parsleyjs.org/

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;
}
});

Class not removing on click

$(document).ready(function (){
var postcode = $('#postcode-form').val();
function errors(){
if(postcode == ""){
$('#postcode-form').addClass("form-error");
}else{
$('#postcode-form').removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
The class adds when the form is empty but doesn't remove when I enter details in the form. I don't understand why?

Move the postcode chunk of code within your function. Otherwise it gets the value only once when the page loads. By placing it within the function, it'll check the value on each click.
function errors() {
var postcode = $('#postcode-form').val();
if (postcode == "") {
$('#postcode-form').addClass("form-error");
} else {
$('#postcode-form').removeClass("form-error");
}
}

So now you know why it isn't working. I would take advantage of the blunder though, and refactor to cache the selector!
$(document).ready(function (){
var $postcode = $('#postcode-form');
function errors(){
if($postcode.val() == ""){
$postcode.addClass("form-error");
}else{
$postcode.removeClass("form-error");
}
}
$('#submit-form').click(errors);
});

jQuery - Find any input with a given class that has no value

I have a (very) basic validation script. I basically want to check for any inputs with class .required to see if there values are a) blank or b) 0 and if so, return false on my form submit. This code does not seem to return false:
function myValidation(){
if($(".required").val() == "" || $(".required").val() == 0){
$(this).css({ backgroundColor:'orange' }) ;
return false;
}
}
Appending this function to my onSubmit handler of my form is not returning any results. Any light shed on this matter will be appreciated.
I am basically after a function that iterates through all the inputs with class .required, and if ANY have blank or 0 values, return false on my submit and change the background colour of all badly behaved inputs to orange.

Your code currently gets the .val() for the first .required, from the .val() documentation:
Get the current value of the first element in the set of matched elements.
You need to filter through each one individually instead, like this:
function myValidation(){
var allGood = true;
$(".required").each(function() {
var val = $(this).val();
if(val == "" || val == 0) {
$(this).css({ backgroundColor:'orange' });
allGood = false;
}
});
return allGood;
}
Or a bit more compact version:
function myValidation(){
return $(".required").filter(function() {
var val = $(this).val();
return val == "" || val == 0;
}).css({ backgroundColor:'orange' }).length === 0;
}

Try this jQuery selector:
$('.required[value=""], .required[value=0]')

You could also do it by defining your own custom jQuery selector:
$(document).ready(function(){
$.extend($.expr[':'],{
textboxEmpty: function(el){
return ($(el).val() === "");
}
});
});
And then access them like this:
alert($('input.required:textboxEmpty').length); //alerts the number of input boxes in your selection
So you could put a .each on them:
$('input.required:textboxEmpty').each(function(){
//do stuff
});