using validation when doing multiple submits 3

[kiwieur]

Hi,

I am using a form that has 3 rows with input fields for data and using an "insert sql" statement I am able to submit either 1 or 2 or all 3 depending on whether a certain field is populated on each of the rows.

This is the code

    ' Executing the sql insertion code
    If strTID <> "" Then con.Execute sql_insert Else Counter= Counter+1
	If strTID2 <> "" Then con.Execute sql_insert2 Else Counter= Counter+1
	If strTID3 <> "" Then con.Execute sql_insert3 Else Counter= Counter+1

However I also need to validate that certain fields are also populated, i have managed to create the following code which works OK

<script language="JavaScript">
<!--
function validateform ()
{
  valid = true;

      if ( document.form1.txtTID.value != "" && document.form1.txtOrderS.value == "" || document.form1.txtBG.value == "" || document.form1.txtSize.value == "" )
      {
              alert ( "Please Enter Values For OrderQty, Board Grade And Sizes For Record 1" );
              valid = false;
      }

      return valid;
}

//-->

</script>

My problem is that I also need to validate the fields in rows 2 & 3 if needed and I cannot get this to work at all. I created another function

<script language="JavaScript">
<!--
function validateform2 ()
{
  valid = true;

      if ( document.form1.txtTID2.value != "" && document.form1.txtOrderS2.value == "" || document.form1.txtBG2.value == "" || document.form1.txtSize2.value == "" )
      {
              alert ( "Please Enter Values For OrderQty, Board Grade And Sizes For Record 2" );
              valid = false;
      }

      return valid;
}

//-->

</script>

And used the following

<form action="InsertEnquiry.asp" method="post" name="form1" target="_self" onSubmit="return validateform(); return validateform2()">

However the first function will validate but the second one gets ignored completely

Is there a Guru out there that can help ??

Any help would be greatly appreciated





Regards

Paul

 

[vicvirk]

Give all your text boxes ID tags and make sure they are unique, they don't need to be the same as the "name" tag, but I find it useful if they are:

<input type="text" name="tbxOne" [b]id="tbxOne"[/b] />
<input type="text" name="tbxTwo" [b]id="tbxTwo"[/b] />

Now you can use a simpler way to access their values:

var tbxOneValue = document.getElementById("tbxOne").value;
var tbxTwoValue = document.getElementById("tbxTwo").value;

Next, validate each value

if (tbxOneValue == "") {
alert("you must enter a value for one");
return false;
}
if (tbxTwoValue == "") {
alert("you must enter a value for two");
return false;
}
return true;

^ a more effective way to do that would be to present the user with one error message at the start:

var msg = "";
var blnReturn = true; // by default, it's all good
if (tbxOneValue == "") {
msg+= "You must provide a value for one\n"; 
blnReturn == false;
}

if (tbxTwovalue == "") {
msg += "You must provide a value for two\n";
blnReturn == false;
}

if (msg != "") {
alert(msg);
}

return blnReturn;

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers

 

[kiwieur]

Hi virvirk,

thanks for your reply but I am not quite sure what the changes you suggest would make. I can understand using the var to identify the value of each textbox and that this will produce cleaner code. I have already given each of my inputs unique names as shown below

These are some of the input boxes from row 1

<td width="48">
            <div align="center">
              <input name="[COLOR=red]txtBG[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtBG[/color]" size="12" maxlength="12">
            </div></td>
          <td width="60">
            <div align="center">
              <input name="="[COLOR=red]txtSize[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtSize[/color]" size="15" maxlength="15" />
            </div></td>
          <td width="20">
            <div align="center">
              <input name="="[COLOR=red]txtSN[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtSN[/color]" value="0" size="3" maxlength="3">
            </div></td>
          <td width="35">
            <div align="center">
              <input name="="[COLOR=red]txtSR[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtSR[/color]" size="8" maxlength="8">
            </div></td>
          <td width="88"><div align="center">

And these are the same input boxes from row 2

 <input name="="[COLOR=red]txtBG2[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtBG2[/color]" size="12" maxlength="12">
            </div></td>
          <td><div align="center">
            <input name="="[COLOR=red]txtSize2[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtSize2[/color]" size="15" maxlength="15">
          </div></td>
          <td>
            <div align="center">
              <input name="="[COLOR=red]txtSN2[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtSN2[/color]" value="0" size="3" maxlength="3">
            </div></td>
          <td>
            <div align="center">
              <input name="="[COLOR=red]txtSR2[/color]" type="text" class="TextCentre9px" id="="[COLOR=red]txtSR2[/color]" size="8" maxlength="8">
            </div></td>
          <td><div align="center">

you will see that they have a 2 on the end of them

i.e.

row 1 = txtBG
row 2 = txtBG2
row 3 = txtBG3

and so on

My problem is that I can get the first row to validate but even if the txtTID textboxes in the second and third rows are empty my present code is still asking me to fill in data for the text boxes in those rows

Regards

Paul

 

[feherke]

Hi

I am also saying to rewrite it as vicvirk suggested.

Just to provide some explanation.

<form action="InsertEnquiry.asp" method="post" name="form1" target="_self" onSubmit="return validateform(); return validateform2()">

This is useless, while the first [tt]return[/tt] is executed unconditionally, so nothing after that will be executed ever.

Anyway, from and event handler only one value can be returned. So if you have more functions to call, you have to calculate a single value from their return values :

return validateform() [red]&[/red] validateform2() [gray]// true if both functions returns true[/gray]

[gray]// or[/gray]

return validateform() [red]|[/red] validateform2() [gray]// true if any function returns true[/gray]

Feherke.

http://rootshell.be/~feherke/

 

[tsuji]

>onSubmit="return validateform(); return validateform2()"
[tt]onSubmit="return validateform() [red]&&[/red] validateform2()"[/tt]

 

[feherke]

Hi

<input name="txtBG" type="text" class="TextCentre9px" id[COLOR=red pink]="[/color]="txtBG" size="12" maxlength="12">

There are extra equal signs ( = ) and double quotes ( " ).


Feherke.

http://rootshell.be/~feherke/

 

[kiwieur]

Hi Guys,

I did take your advice on board and I now have some working code as shown below

<script language="JavaScript">
<!--
function validateform ()
{

var txtTID=document.getElementById("txtTID").value;
var txtTID2=document.getElementById("txtTID2").value;
var txtTID3=document.getElementById("txtTID3").value;
var txtOS=document.getElementById("txtOrderS").value;
var txtOS2=document.getElementById("txtOrderS2").value;
var txtOS3=document.getElementById("txtOrderS3").value;
var txtBG=document.getElementById("txtBG").value;
var txtBG2=document.getElementById("txtBG2").value;
var txtBG3=document.getElementById("txtBG3").value;
var txtS1=document.getElementById("txtSize").value;
var txtS2=document.getElementById("txtSize2").value;
var txtS3=document.getElementById("txtSize3").value;

  valid = true;

      if ( txtTID != "" && txtOS == "")
      {
              alert ( "Please Enter A Order Qty \nFor Record 1." );
              valid = false;
      }

      else if ( txtTID != "" && txtBG == "" )
      {
              alert ( "Please Enter A Board Grade \nFor Record 1." );
              valid = false;
      }
	
	  else if ( txtTID != "" && txtS1 == "" )
      {
              alert ( "Please Enter A Size \nFor Record 1." );
              valid = false;
      }
       
	   
	   else if ( txtTID2 != "" && txtOS2 == "")
      {
              alert ( "Please Enter A Order Qty \nFor Record 2." );
              valid = false;
      }
	  
	  else if ( txtTID2 != "" && txtBG2 == ""  )
      {
              alert ( "Please Enter A Board Grade \nFor Record 2." );
              valid = false;
      }
	
	  else if ( txtTID2 != "" && txtS2 == "" )
      {
              alert ( "Please Enter A Size \nFor Record 2." );
              valid = false;
	  }	  
      else if ( txtTID3 != "" && txtOS3 == "")
      {
              alert ( "Please Enter A Order Qty \nFor Record 3." );
              valid = false;
      }
	  else if ( txtTID3 != "" && txtBG3 == "" )
      {
              alert ( "Please Enter A Board Grade \nFor Record 3." );
              valid = false;
      }
	
	  else if ( txtTID3 != "" && txtS3 == "" )
      {
              alert ( "Please Enter A Size \nFor Record 3." );
              valid = false;
      }
      return valid;
}

//-->

</script>

However it seems a little long winded, could anyone suggest a way to shorten it.



Regards

Paul

 

[kiwieur]

Hi Feherke,

with regards to your statement

There are extra equal signs ( = ) and double quotes ( " ).

They are not actually in the code it was my error when adding the colour to highlight the "id" as I copied and pasted the colour code and did not paste correctly, but i have to say well spotted

Regards

Paul

 

[feherke]

Hi

What about this, based on vicvirk's second suggestion of collecting the messages in a single [tt]alert()[/tt] ?

function validateform ()
{

  var txtTID=document.getElementById("txtTID").value;
  var txtTID2=document.getElementById("txtTID2").value;
  var txtTID3=document.getElementById("txtTID3").value;
  var txtOS=document.getElementById("txtOrderS").value;
  var txtOS2=document.getElementById("txtOrderS2").value;
  var txtOS3=document.getElementById("txtOrderS3").value;
  var txtBG=document.getElementById("txtBG").value;
  var txtBG2=document.getElementById("txtBG2").value;
  var txtBG3=document.getElementById("txtBG3").value;
  var txtS1=document.getElementById("txtSize").value;
  var txtS2=document.getElementById("txtSize2").value;
  var txtS3=document.getElementById("txtSize3").value;

  var msg = "";

  if ( txtTID != ""  && txtOS == "" ) msg+="Please Enter A Order Qty For Record 1.\n";
  if ( txtTID != ""  && txtBG == "" ) msg+="Please Enter A Board Grade For Record 1.\n";
  if ( txtTID != ""  && txtS1 == "" ) msg+="Please Enter A Size For Record 1.\n";
  if ( txtTID2 != "" && txtOS2 == "") msg+="Please Enter A Order Qty For Record 2.\n";
  if ( txtTID2 != "" && txtBG2 == "") msg+="Please Enter A Board Grade For Record 2.\n";
  if ( txtTID2 != "" && txtS2 == "" ) msg+="Please Enter A Size For Record 2.\n";
  if ( txtTID3 != "" && txtOS3 == "") msg+="Please Enter A Order Qty For Record 3.\n";
  if ( txtTID3 != "" && txtBG3 == "") msg+="Please Enter A Board Grade For Record 3.\n";
  if ( txtTID3 != "" && txtS3 == "" ) msg+="Please Enter A Size For Record 3.\n";

  if (msg != "") alert(msg);

  return msg==""
}

( Just typed, not tested. )

Feherke.

http://rootshell.be/~feherke/

 

[kiwieur]

Hi Feherke,

Thank You for the modified code it works very well.

I would like to thank vicvirk, tsuji and your good self for the advice and help you have given me in solving this issue.

I do try and sort problems myself but am very grateful to all the people on tek-tips who are willing to guide those less gifted in the right direction




Regards

Paul