Search jQuery

jQuery Forum

Form Validation - Focusing/Updating/Sending

in Getting Started • 10 years ago

Hi Guys,

I am new to jQuery and I am utilising it to try and improve a small business website I am making.

I am currently validating a webform which is going great. I have surprised myself how quick it was. I am writing the code in a ('body').append function. Which is working in general however when the users leaves a field using the mouse pointer or tabs (to a checkbox) it does not validate. Tabbing from a text box to a text box does validate :P This has completely confused me haha

Summarise Question 1:
How do I validate the field after every key press?

The second problem I am having is emailing the form to myself. I have written a php file which validates the fields server-side and emails them to myself but I am struggling to work out how I call the php script from jQuery so it uses the same submit form.

Summarise Question 2:
How do I call emailForm.php at the end of my .js file?

Here is a snippet of the first validation to give you a picture of my code :)

$(document).ready(function(){
var jVal = {
'fullName' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}

Replies(7)

kbwood.au

Re: Form Validation - Focusing/Updating/Sending

10 years ago

1. Put the validation code in a separate function and call that on keyup on the field.

$(function() { // Shorthand for $(document).ready(function() {
var jVal = {
fullName: function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({top: pos.top - 3, left: pos.left + ele.width() + 15});
ele.keyup(validateName);
validateName();
function validateName() {
if (ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').
html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
}
};
});

2. Use an ajax call to send the data to the server.

$.ajax('emailForm.php', {data: {fullname: $('#fullname').val(), ...}});

soapdodger

Re: Form Validation - Focusing/Updating/Sending

10 years ago

Thanks for the reply. I have implemented the Ajax into the one of the functions of my .js file I hope thats right haha

I am still struggling with the validation. I can only get the second field to Validate on enter when submitting the form and not on Tab. I'll give you a bit more code to give you a bigger picture.

The HTML is as follows. It's the phone field I am trying to validate

<legend>Personal Info</legend>
<p class="block">
<small>* = Required information.</small>
</p>
<p>
<label for="fullname" class="block">Full name:*</label>
<input name="fullname" type="text" id="fullname" size="50" />
</p>
<p>
<label for="phone" class="block">Phone number:</label>
<input name="phone" type="text" id="phone" size="50" />
</p>
</legend>

and the current jQuery:

$(function() {
'phone' : function() {
$('body').append('<div id="phoneInfo" class="info"></div>');
var phoneInfo = $('#phoneInfo');
var ele = $('#phone');
var pos = ele.offset();
phoneInfo.css({top: pos.top-3, left: pos.left+ele.width()+15});
ele.keyup(validatePhone);
validatePhone();
function validatePhone() {
if(ele.val().length < 6) {
jVal.errors = true;
phoneInfo.removeClass('correct').addClass('error').html('Number only (no spaces).').show();
ele.removeClass('normal').addClass('wrong');
} else {
phoneInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
}
}

(please note, I know it doesn't validate the number properly I am researching that atm)

Oh and although it doesn't mean anything to me I am using the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>

I think that is what I am using anyway :P

Cheers for the help, Dan :)

kbwood.au

Re: Form Validation - Focusing/Updating/Sending

10 years ago

Add a change callback as well as the keyup one. Try using a regular expression to test for only digits.

ele.keyup(validatePhone).change(validatePhone);
validatePhone();
function validatePhone() {
if(!ele.val().match(/^\d*$/)) {
jVal.errors = true;
phoneInfo.removeClass('correct').addClass('error').
html('Number only (no spaces).').show();
ele.removeClass('normal').addClass('wrong');
} else {
phoneInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}

soapdodger

Re: Form Validation - Focusing/Updating/Sending

10 years ago

Thanks again for the help but I seem to have no luck. I will give you the full .js file as I suspect the problem is elsewhere :p

note: it is still in the development stage so you will notice loads of errors, for example I am currently only passing two values into my php script :P

Hope it makes sense to you :)

$(function() { //$(document).ready(function(){
//hide the all of the element with class msg_body
$(".player_holder").hide();
//toggle the componenet with class msg_body
$(".msg_open").click(function()
{
$(this).next(".player_holder").slideToggle(400);
});
$('#email2').live("cut copy paste",function(e) {
e.preventDefault();
});
var jVal = {
'fullName' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({top: pos.top-3, left: pos.left+ele.width()+15});
ele.keyup(validateName);
validateName();
function validateName() {
if(ele.val().length < 6) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
},
'phone' : function() {
$('body').append('<div id="phoneInfo" class="info"></div>');
var phoneInfo = $('#phoneInfo');
var ele = $('#phone');
var pos = ele.offset();
phoneInfo.css({top: pos.top-3, left: pos.left+ele.width()+15});
ele.keyup(validatePhone).change(validatePhone);
validatePhone();
function validatePhone() {
if(!ele.val().match(/^\d*$/)) {
jVal.errors = true;
phoneInfo.removeClass('correct').addClass('error').html('Number only (no spaces).').show();
ele.removeClass('normal').addClass('wrong');
} else {
phoneInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
}
},
'ageCheck' : function() {
$('body').append('<div id="ageInfo" class="info"></div>');
var ageInfo = $('#ageInfo');
var ele = $('#age');
var pos = ele.offset();
var isChecked = $('#age').is(':checked');
ageInfo.css({ top: pos.top-3, left: pos.left+ele.width()+15});
if(isChecked.val() != true)
{
jVal.errors = true;
ageInfo.removeClass('correct').addClass('error').html('Please verify you are over 18 years of age.').show();
ele.removeClass('normal').addClass('wrong');
}
else
{
ageInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'email' : function() {
$('body').append('<div id="emailInfo" class="info"></div>');
var emailInfo = $('#emailInfo');
var ele = $('#email');
var pos = ele.offset();
emailInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^.+@.+[.].{2,}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
emailInfo.removeClass('correct').addClass('error').html('← give me a valid email adress, ok?').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'email2' : function() {
$('body').append('<div id="emailInfo2" class="info"></div>');
var emailInfo2 = $('#emailInfo2');
var ele = $('#email2');
var ele2 = $('#email');
var pos = ele.offset();
emailInfo2.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^.+@.+[.].{2,}$/i;
if(ele.val() != ele2.val()) {
jVal.errors = true;
emailInfo2.removeClass('correct').addClass('error').html('The two email\'s do not match').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo2.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'about' : function() {
$('body').append('<div id="aboutInfo" class="info"></div>');
var aboutInfo = $('#aboutInfo');
var ele = $('#about');
var pos = ele.offset();
aboutInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 75) {
jVal.errors = true;
aboutInfo.removeClass('correct').addClass('error').html('← come on, tell me a little bit more!').show();
ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
} else {
aboutInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'tNcCheck' : function() {
$('body').append('<div id="tncInfo" class="info"></div>');
var tncInfo = $('#tncInfo');
var ele = $('#tNc');
var pos = ele.offset();
var isChecked = $('#tNc').is(':checked');
tncInfo.css({ top: pos.top-3, left: pos.left+ele.width()+15});
if(isChecked.val() != true)
{
jVal.errors = true;
tncInfo.removeClass('correct').addClass('error').html('Please verify you are over 18 years of age.').show();
ele.removeClass('normal').addClass('wrong');
}
else
{
tncInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
'sendIt' : function (){
if(!jVal.errors) {
//$('#jform').submit();
$.ajax('GeneralContactForm.php', {data: {fullname: $('#fullname').val(), phone: $('#phone').val()}});
}
}
};
// ====================================================== //
$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform').offset().top }, 1000, function ()
{
jVal.errors = false;
jVal.fullName();
jVal.phone();
jVal.email();
jVal.email2();
jVal.about();
jVal.sendIt();
});
return false;
});
$('#fullname').change(jVal.fullName);
$('#phone').change(jVal.phoneInfo);
$('#email').change(jVal.email);
$('#email2').change(jVal.email2);
$('#about').change(jVal.about);
});

soapdodger

Re: Form Validation - Focusing/Updating/Sending

10 years ago

My post seems to have gone dead... Any ideas as to why it won't work?

Cheers :)

noth1ng

Re: Re: Form Validation - Focusing/Updating/Sending

10 years ago

Hi. You should change the ".change()" method down there to "keyup". Then you won't need all the others function within function within etc.

Try this. Change the fullname function like this:

'fullName' : function() {
var ele = $('#fullname');
if ($('#nameInfo').length === 0) $('<span id="nameInfo" class="info"></span>').insertAfter(ele);
if (ele.val().length < 6) {
jVal.errors = true;
$('#nameInfo')
.addClass('error').removeClass('correct')
.html('← at least 6 characters')
.show();
ele
.removeClass('normal')
.addClass('wrong');
} else {
$('#nameInfo')
.removeClass('error')
.addClass('correct')
.html('√').show();
ele
.removeClass('wrong')
.addClass('normal');
}
},

and the call down there like this:

$ ( '#fullname' ).keyup(jVal.fullName);

Same goes for the others text validations.

Here's a working example with all the validations and an ajax test (after submitting, the data will be inserted in the "data Results" table): http://jsfiddle.net/noth1ng/92uky/

soapdodger

Re: Form Validation - Focusing/Updating/Sending

10 years ago

Haha thanks... I thought it would be something simple like that -_- thats coding for ya. Cheers, I can go have a play now and see what I can get working :)

Newbie to webpages but I know a fair bit of C# :)

Top Reply

Response title

Attachments

jQuery Forum

Form Validation - Focusing/Updating/Sending

Replies(7)

Re: Form Validation - Focusing/Updating/Sending

Re: Form Validation - Focusing/Updating/Sending

Re: Form Validation - Focusing/Updating/Sending

Re: Form Validation - Focusing/Updating/Sending

Re: Form Validation - Focusing/Updating/Sending

Re: Re: Form Validation - Focusing/Updating/Sending

Re: Form Validation - Focusing/Updating/Sending

Statistics

Tags

Actions

Related Posts