Skip to content

HTML Validation for requiring text box and check boxes using JQuery

April 2, 2013

Today, I had been refining the HTML Validation on the front end ASPX page with a few issues to resolve from last week, mainly that the Valiation JS scripts didn’t work so well on ASP.NET pages, which it kept throwing some object resolving errors on the script side.
Instead, I stripped out all the Validation scripts, and made it bare bones with simple JQuery to check the values of the text boxes. Essentially I needed a validation to check that the email address text box is entered as well as having the right text for the email address including an @ symbol and ‘.’ sign inside the email. Final check is to have the terms and condition check box to be checked inside the component. The email code check in Javascript had been fairly simple, however the code to write for seeing if the checkbox was checked needed more time to investigate.

Email:

Name:

I agree to the privacy policy & terms of use

The problem with the code was that the following code I had written if ($(‘input:checkbox#termsandconditions’).not(‘:checked’))
didn’t pick up on JS, maybe it’s due to the verisoning of JQuery where the .not operator is not used for input components, but nothing seemed to be pick up, so I had to write a lot of alert messages to see which part of the code was run and which parts were not. It seemed that that code didn’t run at all, so using the is operator worked but the check for the validating all of the email and checkbox for terms and conditions with the is operator would be difficult.
After using several over keywords like prop and val(), no alternatives worked. Eventually the ! operator works if (!$(‘input:checkbox#termsandconditions’).is(‘:checked’)) and solved the problem, so that meant writing a series of if statements, and the final if statement to make sure all validation checks are done, inverting all of the previous if statements.

Here is the code that does the check for email and checking the check box for terms and conditions: –


var x = $('input#tbEmail').val();
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (x==null || x=="")
{
e.preventDefault();
$("#requiredemail").css("display", "block");
}
if (atpos=x.length)
{
e.preventDefault();
$("#invalidemail").css("display", "block");
}
if (!$('input:checkbox#termsandconditions').is(':checked'))
{
e.preventDefault();
$("#requiredtermsandconditions").css("display", "block");
}
if ((x!=null || x!="") && !(atpos=x.length) && ($('input:checkbox#termsandconditions').is(':checked')))
{
e.preventDefault();
$("#requiredemail").css("display", "none");
$("#invalidemail").css("display", "none");
$("#requiredtermsandconditions").css("display", "none");
saveRegistration(function() {
$('#topbarBox_Register').fadeOut(function() {
$('#topbarBox_Packages').fadeIn();
});
});
}
else
{
e.preventDefault();
}

Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: