form validation issue

Hello,

First I will provide some background information:

I have about 20 pages that use 3 forms for a contact us page. On any given page only 1 form should be displayed.

Initially all 3 forms are hidden by using (style="display:none"). I then use .show to display the corresponding form.

My objective is to create a js file that validates all forms. Currently when I load a page I get the following error:

"Error Validating information". This makes me believe that my js file is having a tough time finding if the div is displayed. In

addition, the page seems to be in a loop (I see loading and the page remains blank).

All I want to do is have the current form (the form that is currently displayed on the page) to call the js file for form validation.

Any suggestions or recommendations would be greatly appreciated.

Thanks,

Michael

<html>

<head>

/* set the current form to be displayed */

$(function() {

$("div#contact_us_form1").show(); // show contact_us_form1

//$("div#contact_us_form2").show(); // show contact_us_form2

//$("div#contact_us_form3").show(); // show contact_us_form3

});

</head>

<body>



<div id="contact_us">

<p>

<em>

Personal information is collected to enable follow-up questions or to provide

information as plans progress. If you check 'Remain Anonymous,' no personal information

is required or saved, other than the comment.

</em>

</p>

<br/>

<div id="contact_us_form1" style="display:none">

<form id="contact_us_form1" method="POST" action="" name="Print Request">



<input type="hidden" name="print_config" value="email">

<input type="hidden" name="recipient" value="">

<input type="hidden" name="redirect" value="">

<input type="hidden" name="sort" value="order:first_name,last_name,email,phone,issue_comments,success_measure,upload,remain_anonymous">

<input type="hidden" name="subject" value="Whitemud Comments Submitted">

<input type="hidden" name="visited" value="" />

<fieldset>

<legend>

1.<b>Issue Identification</b>. Your comments at this stage will help us to create

relevant actions for the draft plan.

</legend>

<div>

<label for="first_name">First Name:</label>

<input class="first_name" name="first_name" type="text"/>

<span class="first_name_info"></span>

</div>

<div>

<label for="last_name">Last Name:</label>

<input class="last_name" name="last_name" type="text"/>

<span class="last_name_info"></span>

</div>

<div>

<label for="email">Email:</label>

<input class="email" name="email" type="text"/>

<span class="email_info"></span>

</div>

<div>

<label for="phone">Phone:</label>

<input class="phone" name="phone" type="text"/>

<span class="phone_info"></span>

</div>

<div>

<label for="issue_comments">I'd like to protect or I'm concerned about this land

or water related issue in my watershed:</label>

<textarea id="issue_comments" name="issue_comments"></textarea>

<span id="issue_comments_info"></span>

</div>

<div>

<label for="success_measure">We've been successful when:</label>

<textarea id="success_measure"></textarea>

<span id="success_measure_info"></span>

</div>

<div>

<label for="upload">Upload a photo to illustrate your issue or to add to our database.</label>

<input type="file" />

<span id="upload_info"></span>

</div>

<div>

<label for="remain_anonymous">Remain Anonymous</label>

<input class="remain_anonymous" name="remain_anonymous" type="checkbox"/>

<span class="remain_anonymous"></span>

</div>

<div>

<input id="submit_contact_us_form1" name="submit_draft_comments" type="submit" value="Submit Comments"/>

</div>

</fieldset>

</form>

</div>

<div id="contact_us_form2" style="display:none">

<form id="contact_us_form2" method="POST" action="" name="Print Request">



<input type="hidden" name="print_config" value="email">

<input type="hidden" name="recipient" value="">

<input type="hidden" name="redirect" value="">

<input type="hidden" name="sort" value="order:first_name,last_name,email,phone,draft_comments,draft_details,remain_anonymous">

<input type="hidden" name="subject" value="Whitemud Comments Submitted">

<fieldset>

<legend>

2.<b>Draft Plan Review</b>. Your cooments at this stage will help us improve the draft

management plan.

</legend>

<div>

<label for="first_name">First Name:</label>

<input class="first_name" name="first_name" type="text"/>

<span class="first_name_info"></span>

</div>

<div>

<label for="last_name">Last Name:</label>

<input class="last_name" name="last_name" type="text"/>

<span class="last_name_info"></span>

</div>

<div>

<label for="email">Email:</label>

<input class="email" name="email" type="text"/>

<span class="email_info"></span>

</div>

<div>

<label for="phone">Phone:</label>

<input class="phone" name="phone" type="text"/>

<span class="phone_info"></span>

</div>

<div>

<label for="draft_comments">Please provide general comments on the draft plan here:</label>

<textarea id="draft_comments" name="draft_comments"></textarea>

<span id="draft_comments_info"></span>

</div>

<div>

<label for="draft_details">Please provide page-specific comments here:</label>

<textarea id="draft_details"></textarea>

<span id="draft_details_info"></span>

</div>

<div>

<label for="remain_anonymous">Remain Anonymous</label>

<input class="remain_anonymous" name="remain_anonymous" type="checkbox"/>

<span class="remain_anonymous"></span>

</div>

<div>

<input id="submit_contact_us_form2" name="submit_draft_comments" type="submit" value="Submit Comments"/>

</div>

</fieldset>

</form>

</div>

<div id="contact_us_form3" style="display:none">

<form id="contact_us_form3" method="POST" action="" name="Print Request">



<input type="hidden" name="print_config" value="email">

<input type="hidden" name="recipient" value="">

<input type="hidden" name="redirect" value="">

<input type="hidden" name="sort" value="order:first_name,last_name,email,phone,implementation_comments,remain_anonymous">

<input type="hidden" name="subject" value="Whitemud Comments Submitted">

<fieldset>

<legend>

3.<b>Plan Implementation</b>. Your comments at this stage will be on the

progress of plan implementation in your watershed.

</legend>

<div>

<label for="first_name">First Name:</label>

<input class="first_name" name="first_name" type="text"/>

<span class="first_name_info"></span>

</div>

<div>

<label for="last_name">Last Name:</label>

<input class="last_name" name="last_name" type="text"/>

<span class="last_name_info"></span>

</div>

<div>

<label for="email">Email:</label>

<input class="email" name="email" type="text"/>

<span class="email_info"></span>

</div>

<div>

<label for="phone">Phone:</label>

<input class="phone" name="phone" type="text"/>

<span class="phone_info"></span>

</div>

<div>

<label for="implementation_comments">Please provide comments on your experience with plan

implementation here:</label>

<textarea id="implementation_comments" name="implementation_comments"></textarea>

<span id="implemenation_comments_info"></span>

</div>

<div>

<label for="remain_anonymous">Remain Anonymous</label>

<input class="remain_anonymous" name="remain_anonymous" type="checkbox"/>

<span class="remain_anonymous"></span>

</div>

<div>

<input id="submit_contact_us_form3" name="submit_implementation_comments" type="submit" value="Submit Comments"/>

</div>

</fieldset>

</form>

</div>

</div>



</body>

</html>

javascript form validation page

/*** Form validation - for use with contact_us_form1,contact_us_form2, and contact_us_form3 forms***/

$(function() {

// global form validation functions

function validateFirstName() {

// if first name is not valid

if (first_name.val().length < 4) {

first_name.addClass("error");

first_name_info.text("First names must be at least 3 characters long.");

first_name_info.addClass("error");

return false;

}

// if first name is valid

else {

first_name.removeClass("error");

first_name_info.text("");

first_name_info.removeClass("error");

return true;

}

}

function validateLastName() {

// if last name is not valid

if (last_name.val().length < 4) {

last_name.addClass("error");

last_name_info.text("Last names must be at least 3 characters long.");

last_name_info.addClass("error");

return false;

}

// if last name is valid

else {

last_name.removeClass("error");

last_name_info.text("");

last_name_info.removeClass("error");

return true;

}

}

function validateEmail() {

// test regular expression

var a = $(".email").val();

var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

// if it's a valid email

if (pattern.test(a)) {

email.removeClass("error");

email_info.text("");

email_info.removeClass("error");

return true;

}

// if it's an invalid email

else {

email.addClass("error");

email_info.text("Please enter a VALID email address.");

email_info.addClass("error");

return false;

}

}

function validatePhone() {

var b = $(".phone").val();

var phone_pattern = /\d{3}\-\d{3}\-\d{4}/; // wrong regualar expression

// if phone number is valid

if (phone_pattern.test(b)) {

phone.removeClass("error");

phone_info.text("");

phone_info.removeClass("error");

return true;

}

// phone number is invalid

else {

phone.addClass("error");

phone_info.text("Please enter a phone number, including area code.");

phone_info.addClass("error");

return false;

}

}

// for form 1

function validateIssueComments() {

// if comments are not valid

if (issue_comments.val().length < 1) {

issue_comments.addClass("error");

//implementation_comments_info.text("Comments can not be empty.")

return false;

}

// comments are entered

else {

issue_comments.removeClass("error");

issue_comments_info.text("");

return true;

}

}

function validateSuccessMeasure() {

// if comments are not valid

if (success_measure.val().length < 1) {

success_measure.addClass("error");

return false;

}

// comments are entered

else {

success_measure.removeClass("error");

success_measure_info.text("");

return true;

}

}

// for form 2

function validateDraftComments() {

// if comments are not valid

if (draft_comments.val().length < 1) {

draft_comments.addClass("error");

//implementation_comments_info.text("Comments can not be empty.")

return false;

}

// comments are entered

else {

draft_comments.removeClass("error");

draft_comments_info.text("");

return true;

}

}

function validateDraftDetails() {

// if comments are not valid

if (draft_details.val().length < 1) {

draft_details.addClass("error");

return false;

}

// comments are entered

else {

draft_details.removeClass("error");

draft_details_info.text("");

return true;

}

}

// for form 3

function validateImplementationComments() {

// if comments are not valid

if (implementation_comments.val().length < 1) {

implementation_comments.addClass("error");

//implementation_comments_info.text("Comments can not be empty.")

}

// comments are entered

else {

implementation_comments.removeClass("error");

implementation_comments_info.text("");

return true;

}

}

// clear and disable fields if checkbox is checked

function clearFields() {

if ($(this).is(":checked")) {

// clear first name field

$(".first_name").val("").attr("disabled", true);

first_name.removeClass("error");

first_name_info.removeClass("error");

first_name_info.text("");

// clear last name field

$(".last_name").val("").attr("disabled", true);

last_name.removeClass("error");

last_name_info.removeClass("error");

last_name_info.text("");

// clear email field

$(".email").val("").attr("disabled", true);

email.removeClass("error");

email_info.removeClass("error");

email_info.text("");

// clear phone field

$(".phone").val("").attr("disabled", true);

phone.removeClass("error");

phone_info.removeClass("class");

phone_info.text("");

} else {

$(".first_name").attr("disabled", false);

$(".last_name").attr("disabled", false);

$(".email").attr("disabled", false);

$(".phone").attr("disabled", false);

}

}

// end global validation functions

if ($('div#contact_us_form1').is(':visible')) {

// grab data from form 1

var form = $("form#contact_us_form1");

var first_name = $(".first_name");

var first_name_info = $(".first_name_info");

var last_name = $(".last_name");

var last_name_info = $(".last_name_info");

var email = $(".email");

var email_info = $(".email_info");

var phone = $(".phone");

var phone_info = $(".phone_info");

var remain_anonymous = $(".remain_anonymous");

var remain_anonymous_info = $(".remain_anonymous_info");

var issue_comments = $("#issue_comments");

var issue_comments_info = $("#issue_comments_info");

var success_measure = $("#success_measure");

var success_measure_info = $("#success_measure_info");

// time to handle events

// on blur

first_name.blur(validateFirstName);

last_name.blur(validateLastName);

email.blur(validateEmail);

phone.blur(validatePhone);

issue_comments.blur(validateIssueComments);

success_measure.blur(validateSuccessMeasure);

// on key press

first_name.keyup(validateFirstName);

last_name.keyup(validateLastName);

phone.keyup(validatePhone);

issue_comments.keyup(validateIssueComments);

success_measure.keyup(validateSuccessMeasure);

// triggering an event from checking off remain anonymous

$("input:checkbox").click(clearFields);

// submit form

form.submit(function() {

if ((validateIssueComments() & validateSuccessMeasure()) && ($("input[name='remain_anonymous']:checked")))

return true;

else if ((validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateIssueComments() & validateSuccessMeasure()) &

($("input[name='remain_anonymous']:not(checked)")))

return true;

else

return false;

});

} else if ($('div#contact_us_form2').is(':visible')) {

// grab datafrom form 2

var form = $("form#contact_us_form2");

var first_name = $(".first_name");

var first_name_info = $(".first_name_info");

var last_name = $(".last_name");

var last_name_info = $(".last_name_info");

var email = $(".email");

var email_info = $(".email_info");

var phone = $(".phone");

var phone_info = $(".phone_info");

var remain_anonymous = $(".remain_anonymous");

var remain_anonymous_info = $(".remain_anonymous_info");

var draft_comments = $("#draft_comments");

var draft_comments_info = $("#draft_comments_info");

var draft_details = $("#draft_details");

var draft_details_info = $("#draft_details_info");

// time to handle events

// on blur

first_name.blur(validateFirstName);

last_name.blur(validateLastName);

email.blur(validateEmail);

phone.blur(validatePhone);

draft_comments.blur(validateDraftComments);

draft_details.blur(validateDraftDetails);

// on key press

first_name.keyup(validateFirstName);

last_name.keyup(validateLastName);

phone.keyup(validatePhone);

draft_comments.keyup(validateDraftComments);

draft_details.keyup(validateDraftDetails);

// triggering an event from checking off remain anonymous

$("input:checkbox").click(clearFields);

// submit form

form.submit(function() {

if ((validateDraftComments() && validateDraftDetails()) && ($("input[name='remain_anonymous']:checked")))

return true;

else if ((validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateDraftComments() && validateDraftDetails()) &

($("input[name='remain_anonymous']:not(checked)")))

return true;

else

return false;

});

} else if ($('div#contact_us_form3').is(':visible')) {

// grab data from form 3

var form = $("form#contact_us_form3");

var first_name = $(".first_name");

var first_name_info = $(".first_name_info");

var last_name = $(".last_name");

var last_name_info = $(".last_name_info");

var email = $(".email");

var email_info = $(".email_info");

var phone = $(".phone");

var phone_info = $(".phone_info");

var remain_anonymous = $("#remain_anonymous");

var remain_anonymous_info = $("#remain_anonymous_info");

var implementation_comments = $("#implementation_comments");

var implementation_comments_info = $("#implementation_comments_info");

// time to handle events

// on blur

first_name.blur(validateFirstName);

last_name.blur(validateLastName);

email.blur(validateEmail);

phone.blur(validatePhone);

implementation_comments.blur(validateImplementationComments);

// on key press

first_name.keyup(validateFirstName);

last_name.keyup(validateLastName);

phone.keyup(validatePhone);

implementation_comments.keyup(validateImplementationComments);

// triggering an event from checking off remain anonymous

$("input:checkbox").click(clearFields);

// submit form

form.submit(function() {

if (validateImplementationComments() && ($("input[name='remain_anonymous']:checked")))

return true;

else if ((validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateImplementationComments()) &

($("input[name='remain_anonymous']:not(checked)")))

return true;

else

return false;

});

} else {

document.write("<div>Error Validating information.</div>");

return false;

}

}); // end ready event

Topic Participants
mbialowas
dkimbell13
eliza.sahoo

form validation issue

form validation issue

Topic Participants

mbialowas

dkimbell13

eliza.sahoo