PDA

View Full Version : Form Validating - Return/Submit issue?



alexjewell
11-22-2010, 10:22 PM
I've written a validation script to validate forms before submission. One form is a subscription form (requiring only name and email), while the other is a full-fledged contact form. The script works for both the name and email of the mailing list form, but still submits the form after clicking ok on both alerts. The contact form, on the other hand, throws the alert for the first field (name), then submits the form without going through the other fields.

Below is the javascript, then the two form lines where I call the functions. Help!



function validEmail(fieldName){
var validate = fieldName.value;
if(validate == null || validate == ''){
var apos = validate.indexOf("@");
var dotpos = validate.lastIndexOf(".");
if (apos < 1|| dotpos - apos < 2){
alert('Please enter a valid email address!');
return false;
}
else{
return true;
}
}
}

function validForm(fieldName2,fieldLoc,fieldType){
var validate = fieldLoc.value;
if(validate == null || validate == ''){
alert('Please enter a valid ' + fieldName2);
return false;
}
else{
if(fieldType == 'number'){
var validateNum = validate.replace(/[\(\)\.\-\ ]/g, '');
if(isNaN(parseInt(validateNum))){
alert('Please enter a valid ' + fieldName2);
return false;
}
else{
return true;
}
}
else if(fieldType == 'email'){
validEmail(fieldLoc);
}
else{
return true;
}
}
}

function validFormRun(){
validForm('name',this.name,'text');
validForm('address',this.address,'text');
validForm('city',this.city,'text');
validForm('message',this.message,'text');
validEmail(this.email);
validForm('phone number',this.phone,'number');
validForm('zip code',this.zip,'number');
}


Mailing list form:

<form action="forms.php" method="post" onsubmit="validForm('email address',this.mailing_email,'email'); validForm('cell phone number',this.mailing_cell,'number');">

Contact form:

<form method="post" action="forms.php" id="contactForm" name="contactForm" onsubmit="return validFormRun()">

Thanks a lot!

prasanthmj
11-23-2010, 02:13 PM
The onsubmit of the mailing list should return false to stop the form from submitting.



<form action="forms.php" method="post" onsubmit="return validMailListForm()">

The validFormRun() function should return true or false.

like

function validFormRun(){
if(validForm('name',document.formname.name,'text')&&
validForm('address',document.formname.address,'text') &&
validForm('city',document.formname.city,'text'))
{
return true;
}
else
{
return false;
}
}

The Javascript validation code in the following page is very handy
JavaScript Form Validation (http://www.javascript-coder.com/html-form/javascript-form-validation.phtml)

alexjewell
11-23-2010, 08:27 PM
Still isn't working:



function validEmail(fieldName){
var validate = fieldName.value;
if(validate == null || validate == ''){
var apos = validate.indexOf("@");
var dotpos = validate.lastIndexOf(".");
if (apos < 1|| dotpos - apos < 2){
alert('Please enter a valid email address!');
return false;
}
else{
return true;
}
}
}

function validForm(fieldName2,fieldLoc,fieldType){
var validate = fieldLoc.value;
if(validate == null || validate == ''){
alert('Please enter a valid ' + fieldName2);
return false;
}
else{
if(fieldType == 'number'){
var validateNum = validate.replace(/[\(\)\.\-\ ]/g, '');
if(isNaN(parseInt(validateNum))){
alert('Please enter a valid ' + fieldName2);
return false;
}
else{
return true;
}
}
else if(fieldType == 'email'){
validEmail(fieldLoc);
}
else{
return true;
}
}
}

function validMailList(){
if(
validForm('email address',this.mailing_email,'email') &&
validForm('cell phone number',this.mailing_cell,'number')
){
return true;
}
else{
return false;
}
}

function validFormRun(){
if(
validForm('name',this.name,'text') &&
validForm('address',this.address,'text') &&
validForm('city',this.city,'text') &&
validForm('message',this.message,'text') &&
validEmail(this.email) &&
validForm('phone number',this.phone,'number') &&
validForm('zip code',this.zip,'number')
){
return true;
}
else{
return false;
}
}




<form method="post" action="#" id="contactForm" name="contactForm" onsubmit="return validFormRun()">




<form action="#" method="post" onsubmit="return validMailList()">