Form submitting with JavaScript verification problem

[davidwhite]

Hello,

I want to validate form fields with JavaScript. This is easy - I can just take some standard scripts off the net that do this.

The problem is that my form keeps submitting even when verification is needed.

So for example, if I leave the name field empty and press submit, it will bring up the alert box saying to enter a name then it will submit a record to the database anyway.

Then the customer fills in the details correctly and submits properly so there are 2 entries.

I have tried putting the verification function in the submit button and the form tag as an onClick but it doesn't work.

The form tag is:

<form name="theForm" method="post" action="Register" id="Register">

Basically the 'action' above activates when submit is clicked even when there is verification needed.

What can be done about this?

Thanks.

[abduraooft]

What can be done about this?

We need to see the full markup of your form and the javascript code involved.

[davidwhite]

Originally Posted by abduraooft

We need to see the full markup of your form and the javascript code involved.

The code is long. Good luck.

Here's the submit button.

<button type="submit" id="mygrey" class="registeruserButton" onclick="regSubmit()">Register</button>


Here's the JavaScript.

function regSubmit()
 {   
  if(validateFields())
  {
  if(formObj.receiveEmailSub.checked)
  formObj.receiveEmail.value = true ;
  else
  formObj.receiveEmail.value = false ;
 
 //setting preferred currency
 if (document.RegisterForm.country[document.RegisterForm.country.selectedIndex].value == "IE") {
 	document.RegisterForm.preferredCurrency.value = "EUR";
 } else {
 	document.RegisterForm.preferredCurrency.value = "GBP";
 }
 
 //setting popup
 if (document.RegisterForm.country[document.RegisterForm.country.selectedIndex].value != "GB" && document.RegisterForm.country[document.RegisterForm.country.selectedIndex].value != "IE") {
 	document.RegisterForm.showPopup.value = "Y";
 } else {
 	document.RegisterForm.showPopup.value = "";
 }
 
 //setting logonid to lowercase
 document.RegisterForm.logonId.value = document.RegisterForm.logonIdnew.value.toLowerCase() + "#<c:out value="${WCParam.storeId}"/>";
 
  document.RegisterForm.submit();
  }
  else
  return false
  
  document.getElementById('mygrey').disabled = 'disabled';
  
} 

//Validate all the fields before submitting

function validateFields() 
{
    formObj=document.RegisterForm;
    return validateFirstName();
}

function validateFirstName() {
    // validate first name
    var str = formObj.firstName.value;
    if (str.length < 1 || str <="                   ") {
      alert("Please enter your First Name");
      formObj.firstName.focus();
      return false;}
    if (!checkAlpha(formObj.firstName)) {
      alert("First Name must not contain digits");
      return false; }
    return validateLastName();
  }

 function validateLastName() {
    // validate last name
    var str = formObj.lastName.value;
    if (str.length < 1 || str <="                   ") {
      alert("Please enter your Last Name");
      formObj.lastName.focus();
      return false;}
    if (!checkAlpha(formObj.lastName)) {
      alert("Last Name must not contain digits");
      return false; }
    return validateEmail();
  }
  
  function validateEmail()   {
    //validate email
    var str = formObj.email1.value;
    if (str.indexOf ('@',0) == -1 || str.indexOf ('.',0) == -1) {
      alert("\nPlease enter a valid e-mail address.")
      formObj.email1.focus();
      return false; }
      return spaceyemail();
}

 function spaceyemail(){

    var str = formObj.email1.value;
     if(str.indexOf(' ',0) != -1){
      alert("\nE-mail address cannot contain a 'space'.")
      formObj.email1.focus();
      return false; }
     return alienemail();
}

 function alienemail(){ 
    var str = formObj.email1.value;
    var pooh = "!£$%^&*()][><?;|,+{}#"; 
    for(i=0; i < str.length; i++){
    strChar = str.charAt(i);
     if (pooh.indexOf(strChar) != -1){
      alert("\nE-mail address contains an invalid character.")
      formObj.email1.focus();
      return false; }      
    }
     return confirmemail();
  }

  function confirmemail() {
     if(!formObj.logonIdnew.value) {
	 alert('\nPlease confirm your email address');
         formObj.logonIdnew.focus();
	 return false;
     }
     else if((formObj.email1.value) != (formObj.logonIdnew.value))
     {
	alert('\nYour two email addresses do not match');
        formObj.logonIdnew.focus();
	return false;
     }
   return changeEmailToLower();
  }
	

  function changeEmailToLower(){
   formObj.email1.value = formObj.email1.value.toLowerCase();
   formObj.logonIdnew.value = formObj.logonIdnew.value.toLowerCase();
   return validatePassword();
  }
  

function validatePassword() {
    // validate password
    var str = formObj.logonPassword.value;
    if (str.length < 1 || str <= "                   ") {
      alert("Please enter your Password");
      formObj.logonPassword.focus();
      return false;}
    return validateVerifyPassword();
  }

  function validateVerifyPassword() {
    // validate verify password
    var str = formObj.logonPasswordVerify.value;
    if (str.length < 1 || str <= "                   ") {
      alert("Please enter your Password Verification");
      formObj.logonPasswordVerify.focus();
      return false;}
    if (str != formObj.logonPasswordVerify.value) {
      alert("Password Verification does not match password");
      formObj.logonPasswordVerify.focus();
      return false;}
   	return validatePhone();
  }
 function validatePhone() {
    // validate phone
    var str = formObj.phone1.value;
    if (str.length < 1 || str <= "                   ") {
      alert("Please enter your Telephone Number including STD code.");
      formObj.phone1.focus();
      return false;}
    if (!checkNumeric(formObj.phone1))  {
      alert("Phone Number must only contain numbers and spaces");
      return false; }
    return validatePostcode();
  }

 

 function validatePostcode() {
    // validate post code
    var str = formObj.zipCode.value;
    if (str.length < 1 || str <="                    ") {
      alert("Please enter the Postcode for your address");
      formObj.zipCode.focus();
      return false;}
    return validatepostcodespace();
}

 /*function validateCountry()   {
    // validate country field if UK not selected
    if (formObj.country.options[0].selected) {
      var str = formObj.country.value;
      if (str.length < 1 || str <="                    ") {
        alert("Please enter the Country for your address");
        formObj.country.focus();
        return false;}
    }
    return validatepostcodespace();
  }*/

function validatepostcodespace() {
    var str = formObj.zipCode.value;
    if(formObj.country.value ==	'GB'){
    if (str.indexOf (' ',0) == -1){
      alert("\nYour Postcode should contain a space.");
      formObj.zipCode.focus();
      return false;}
    }
    return validateAddressLine1();
 }

 function validateAddressLine1() {
  
    // validate address line 1
	if(document.getElementById('address1') == null){
	alert("Please enter your full address either by using PostCode Lookup or enter address manually");
	formObj.zipCode.focus();
	return false;
	}
    else{
    var str = formObj.address1.value;
    if (str.length < 1 || str <="                   ") {
      alert("Please enter your Street Address line 1");
      formObj.address1.focus();
      return false;}
    }
    return validateState();
  }

function validateState() {
    // validate state=county
    if(document.getElementById('state') == null){
	alert("Please enter your full address either by using PostCode Lookup or enter address manually");
	formObj.zipCode.focus();
	return false;
	}
	else{
    var str = formObj.state.value;
    if (str.length < 1 || str <="                   ") {
      	formObj.state.value = "-";
      return validateVAT();}
     }
    return validateVAT();
  }
  
  function validateVAT(){
  	 var str = formObj.taxPayerId.value;
  	 if(!(str.length < 1 || str <="                    "))
  	 {
  	 	if(checkStringforVAT(str.substring(0,2))) {
  	 		alert("Please verify VAT format. Click on Information(i) for more details");
  	 		formObj.taxPayerId.focus();
  	 	return false;}
  	 }
  	 	return validateAcceptTC();
  }
  
  function checkStringforVAT(value) {

		var allowed = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		var allok = false;
		for(var i=0;i < value.length;i++) {
			if (allowed.indexOf(value.charAt(i)) == -1) {
				allok = true;
			}
		}
		return allok;
	  }
  
   function validateAcceptTC() {
   if (!formObj.termconditions.checked) {
      alert("Please confirm that you accept our T&C");
      return false;}
      return true;
  }
  

function checkOnlyUC(value) {

	var allowed = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var allok = true;
	for(var i=0;i < value.length; ++i) {
		if (allowed.indexOf(value.charAt(i)) == -1) {
			allok = false;
			break;
		}
	}
	return allok;
	} 

function checkNumeric(field) {
    // check that field passed contains only digits & spaces
    var str = field.value;
    for (j=0; j < str.length; j++) {
      chr = str.substring(j, j+1);
      if (chr == " ") {  }
      else {
	if (chr < "0" || chr > "9")  {
	  field.focus();
          return false; }
      }
    }
    return true;
  }

  function checkAlpha(field) {
    // check if that field does not contain any numerics
    var str = field.value;
    for (j=0; j < str.length; j++) {
      chr = str.substring(j, j+1);
      if (chr >= "0" && chr <= "9")  {
	field.focus();
        return false; }
    }
    return true;
  }

Thanks

[sunfighter]

To save time:

Originally Posted by abduraooft View Post
We need to see the full markup of your form and the javascript code involved.

We want to see your form also.

[vwphillips]

the call to the function regSubmit should be called from the form tag
presuming the function return true if the validation is correct and false if not correct.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<form name="theForm" method="post" action="Register" id="Register" onsubmit="return regSubmit()">
<button type="submit" id="mygrey" class="registeruserButton" >Register</button>
</form>
</body>

</html>

[davidwhite]

Originally Posted by sunfighter

To save time:

We want to see your form also.

Can't.

The text that you have entered is too long (36275 characters). Please shorten it to 20000 characters long.

[davidwhite]

Originally Posted by vwphillips

the call to the function regSubmit should be called from the form tag
presuming the function return true if the validation is correct and false if not correct.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<form name="theForm" method="post" action="Register" id="Register" onsubmit="return regSubmit()">
<button type="submit" id="mygrey" class="registeruserButton" >Register</button>
</form>
</body>

</html>

I think you might be on to something vwphillips. This didn't work when I tried it before because I think I was stupid enough to use onclick in the form as well as the submit button when of course I should have used onsubmit in the form.

Thanks