Form should submit only when all data is filled

[vikas251074]

I now creating material outpass for taking material out from our campus.
In the first page, persons name taking material out, issue_date, department, vehicle_no, driver_name, purpose, received_by and remarks is entered.
In the second page no. of materials to taken out is given.
In the third page, it creates no. of row as mentioned in the second page. suppose 5. Five row is created. Fields in this page are material_name, company_sr_no, department_sr_no, quantity, weight, remarks. Two buttons are there. One is 'Cancel' and other is form submit button 'Add'.

Here in third page, one problem regular occurs. When enter key is pressed by mistake without filling all details, the form is submitted (i.e. 'Add' button is pressed). How can I stop this? I want to there should be no effect of enter key without filling all the five row. If any one tries to click 'Add', 'Add' button should not work untill and unless all the five rows of material are filled.

Thanks and regards,
Vikas

[gits]

hi ...

add an onsubmit-handler to your form and call a javascript function that validates all the fields:

<form action="what_ever" onsubmit="return validate_form(this);">

the function should check all fields and has to return either true or false depending on your validation:

function validate_form(node) {
    var val = true;
 
    // validation code sets the val that should be returned
    // note the parameter node is a reference to your form already
 
    return val;
}
 

kind regards

[vikas251074]

hi ...

add an onsubmit-handler to your form and call a javascript function that validates all the fields:

<form action="what_ever" onsubmit="return validate_form(this);">

the function should check all fields and has to return either true or false depending on your validation:

function validate_form(node) {
    var val = true;
 
    // validation code sets the val that should be returned
    // note the parameter node is a reference to your form already
 
    return val;
}
 

kind regards

Each record contains five fields, material_name, comp_sr_no, dept_sr_no, qtyl, wt.
And suppose there are three records. Now I want to check only material_name, if all the three records are filled with material_name. How can I check this? I don't know how to do this. I have tried to searched this solution on internet.

Thanks and regards,
Vikas

[gits]

please post an example of your form since it would be a kind of guesswork without seeing what you have done so far ...

kind regards

[vikas251074]

please post an example of your form since it would be a kind of guesswork without seeing what you have done so far ...

kind regards

OK Sir,

Should I provide code? If yes, then following is code.

[gits]

hmmm ...

try the following:

function validate_form(node) {
    var val = true;
 
    // get the list of all 'mat'-fields
    var list = node.getElementsByName('mat');
 
    for (var i = 0, n; n = list[i]; i++) {
        // in case any value of a 'mat' field is empty we
        // return false
 
        if (n.value == '') {
            val = false;
            break;
        }
    }
 
    return val;
}
 

kind regards

[vikas251074]

I have added the above code as follows

<script language="javascript">
function validate_form(node) 
{
  var val = true;
  // get the list of all 'mat'-fields
  var list = node.getElementsByName('mat');
  for (var i = 0; n = list[i]; i++) 
  {
    // in case any value of a 'mat' field is empty we return false
    if (n.value == '') 
    {
      val = false;
      break;
    }
  }
  return val;
}
</script>

and modified the following line.

<form name="myform" action="smaterial.asp" method="post" onSubmit="return validate_form(this)">

Note:- action="smaterial.asp" is calling another file where message is displayed for submission of form i.e. 'Record has been saved.'

On running programme, form is submitted even without entering any value. Then I changed some line as follows -

function validate_form(node) 
{
  var val = true;
  var n; 
  // get the list of all 'mat'-fields
  var list = node.getElementsByName('mat');
  for (var i = 0; i < 3; i++) 
  {
    // in case any value of a 'mat' field is empty we
    // return false
alert("Form Submit Status");
    n = list[i]
    if (n.value == '') 
    {
      val = false;
      break;
    }
  }
  return val;
}

But this is also not working. I think function validate_form(this) is not calling the function because alert message is also not displaying. How could I complete this job.

Thanks and regards,
Vikas

[gits]

sorry my bad ... replace the node-reference with a document reference:

function validate_form() {
    var val = true;
 
    // get the list of all 'mat'-fields
    var list = document.getElementsByName('mat');
 
    for (var i = 0, n; n = list[i]; i++) {
        // in case any value of a 'mat' field is empty we
        // return false
 
        if (n.value == '') {
            val = false;
            break;
        }
    }
 
    return val;
}
 

kind regards

btw: don't use the language-attribute in script tags since it is deprecated ... use type:

[HTML]<script type="text/javascript">[/HTML]
and write onsubmit all in lowercase ...

[vijay]

I now creating material outpass for taking material out from our campus.
In the first page, persons name taking material out, issue_date, department, vehicle_no, driver_name, purpose, received_by and remarks is entered.
In the second page no. of materials to taken out is given.
In the third page, it creates no. of row as mentioned in the second page. suppose 5. Five row is created. Fields in this page are material_name, company_sr_no, department_sr_no, quantity, weight, remarks. Two buttons are there. One is 'Cancel' and other is form submit button 'Add'.

Here in third page, one problem regular occurs. When enter key is pressed by mistake without filling all details, the form is submitted (i.e. 'Add' button is pressed). How can I stop this? I want to there should be no effect of enter key without filling all the five row. If any one tries to click 'Add', 'Add' button should not work untill and unless all the five rows of material are filled.

Thanks and regards,
Vikas

use javascript functions to cary out validation..

call this function when the form is submited by using the event handler
onSubmit

[gits]

use javascript functions to cary out validation..

call this function when the form is submited by using the event handler
onSubmit

as i said already: it is 'onsubmit' instead of 'onSubmit' ... it is a node attribute and all node-attributes should be written in lowercase and their values should be enclosed in double-quotes ... read post #8 -> this should work ...

kind regards

[vikas251074]

Yes sir,

This problem has been solved now. This is working fine.

Thanks and regards,
Vikas

[gits]

no problem ... post back to the forum anytime you have more questions ...

kind regards