[jQT] Form Validation My solution

[trojan]

I am using rev 147. I am a coldfusion developer and well using built
cf tags for validation just makes jqtouch cry. I use
goTo(somedirectory/me.cfm, slide);. So when coldfusion does its
javascript thing for validating it breaks since jqtouch doesn't like
pulling in javascript when calling a page. So I decided to write
something inside of jqtouch.js that will check if it needs to
validate. By no means am I a jquery jedi so i expect this not to be
the most efficient way of doing it but I think it could help people
along the way.

Jqtouch.js - Original

function submitForm(e, callback) {
var $form = (typeof(e)==='string') ? $(e).eq(0) :
(e.target ? $(e.target) : $(e));

if ($form.length && $form.is(jQTSettings.formSelector)) {
showPageByHref($form.attr('action'), {
data: $form.serialize(),
method: $form.attr('method') || "POST",
animation: animations[0] || null,
callback: callback
});
return false;
}
return true;
}

Jqtouch.js - Validation Added

function submitForm(e, callback) {
var $form = (typeof(e)==='string') ? $(e).eq(0) :
(e.target ? $(e.target) : $(e));

if ($form.length && $form.is(jQTSettings.formSelector)) {
var Errorcnt = 0;
var validatemessage = "Required fields";
//Checkbox Select Textarea Input
$('input,input[type=checkbox][checked], select, textarea',
$form).each(
function() {

if($(this).hasClass("Required"))
{
//Special Check For Checkbox
if($(this).attr('type') == "checkbox")
{
//Are You Checked?
if(!$(this).attr('checked')){
var errorField = $(this).attr('class');
//Remove Required
errorField = errorField.replace('Required ','');
//Remove Underscore
errorField = errorField.replace('_',' ');
//Add to String
validatemessage = validatemessage + " " + errorField;
Errorcnt = Errorcnt + 1;
}
}
else
{
if($(this).val() == ""){
//Grab Class
var errorField = $(this).attr('class');
//Remove Required
errorField = errorField.replace('Required ','');
//Remove Underscore
errorField = errorField.replace('_',' ');
//Add to String
validatemessage = validatemessage + " " + errorField;
Errorcnt = Errorcnt + 1;
}
}
}

}
);
//Radio Validation
$('div.RequiredRadio').each(function(){

if( $('input:radio:checked', this).length == 0){
var errorField_Radio = $(this).attr('class');
errorField_Radio = errorField_Radio.replace('RequiredRadio
','');
errorField_Radio = errorField_Radio.replace('_',' ');
validatemessage = validatemessage + " " + errorField_Radio;
Errorcnt = Errorcnt + 1;
}
});
if( Errorcnt != 0)
{
//You can use a popup alert or floaty up to you.
alert(validatemessage);

}else
{
showPageByHref($form.attr('action'), {
data: $form.serialize(),
method: $form.attr('method') || "POST",
animation: animations[0] || null,
callback: callback
});
return false;
}
}
return true;
}

What this does it checks if the element has the class="Required"
If it does checks to see if it has a value
If not then it won't let it submit.
What did for everything button radio was if you have an input field
your want to require and it is a first name
you can simple do
<input type="text" class="Required First_Name" name="First_Name"
id="First_Name">
It sees required checks for a value then if it doesn't have a value it
saves the class to a variable then removes required and the
underscore. So only thing left is the variable is "First Name". You
use the second part of the class to Show what text you want to prompt
the user with. I decided not to use name/id for it because sometimes
those things are not really user readable and this way you can put
whatever you want to say without having to worry about long query
insert names.

For radio is it alittle bit more confusing and this might not be the
greatest way to do it but here it goes.
You wrap your radio groups in a div

<div class="RequiredRadio Test_22">
<input type="radio" name="test2" value="3">
<input type="radio" name="test2" value="4">
</div>

Name of radio's need to be the same of course but then you class the
div RequiredRadio anything after that is what gets prompted to the
user.

Selects

<select class="Required Test_Select" name="Tester"
id="Tester"><option value="" selected>Pick One</option><option
value="1">2st</option></select>

class the same if your going to have a value represent nothing just
put value="" but pretty much the same.

CheckBoxes are like so.

<input class="Required CheckBox" type="checkbox" name="testcheckbox"
value="3">

I hope i explained it will enough. Basically comes down to
class="Required Whateveryouprompt" for everything but radio for radio
wrap the buttons in a div and class="Required Whateveryouprompt".

I have only needed so far text
input,select,checkbox,radioboxes,textarea probably work for other
things with more modifications maybe i will get to it in the future
and or add email phone number validation along the way.

I hope it works :)

Trojan

[Colin Earle]

Works fine. Although the function is now called submitHandler