form validation not working
Hi guys,
In this form a message should appear in the span if a user leaves an input blank, but its not working.
http://actualplus.arredemo.org/ch8/chapter8.html
Anyone know what might be wrong with my code?
Thanks!
-
$(document).ready(function(){
$('legend').wrapInner('<span></span>');
});
$(document).ready(function(){
var requiredFlag='*';
var conditionalFlag='**';
var requiredKey=$('input.required:first')
.next('span').text();
var conditionalKey=$('input.conditional:first')
.next('span').text();
requiredKey=requiredFlag +
requiredKey.replace(/^\((.+)\)$/,'$1');
conditionalKey=conditionalFlag +
conditionalKey.replace(/^\((.+)\)$/,'$1');
$('<p></p>')
.addClass('field-keys')
.append(requiredKey+'<br/>')
.append(conditionalKey)
.insertBefore('#contact');
});
$(document).ready(function(){
var requiredFlag='*';
var conditionalFlag='**';
$('form :input')
.filter('.required')
.next('span').text(requiredFlag).end()
.prev('label').addClass('req-label').end()
.end()
.filter('.conditional')
.next('span').text(conditionalFlag);
});
$(document).ready(function(){
$('input.conditional').next('span').andSelf().hide()
.end().end()
.each(function(){
var $thisInput=$(this);
var $thisFlag=$thisInput.next('span');
$thisInput.prev('label').find(':checkbox')
.attr('checked',false)
.click(function(){
if(this.checked){
$thisInput.show().addClass('required');
$thisFlag.show();
$(this).parent('label').addClass('req-label');
}else{
$thisInput.hide();
$thisFlag.hide();
$(this).parent('label')
.removeClass('req-label');
}
});
});
});
$(document).ready(function(){
$('form:input').blur(function(){
if ($(this).hasClass('required')){
var $listItem=$(this).parents('li:first');
if(this.value==''){
var errorMessage='This is a required field';
if($(this).hasClass('conditional')){
errorMessage+=',when its related'+'checkbox is checked';
}
$('<span></span>')
.addClass('error-message')
.text(errorMessage)
.appendTo($listItem);
$listItem.addClass('warning');
}
}
});
});