In a form a text box is created dynamically by clicking on add button such that the text box is created in a new row.Now my problem is the validation of text boxes which were created dynamically such that it shows a message if any of text boxes are left empty when form is submitted by clicking submit button.Please help me out.
EDIT
<html>
<head>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
}
</SCRIPT>
</head>
<body>
<form onSubmit="return validateFormOnSubmit(this)">
<INPUT type="button" value="Add More Symptom " onClick="addRow('dataTable')" />
<TABLE id="dataTable" >
<TR>
<TD >
<INPUT type="text" name="symp[]" />
</TD>
</TR>
</TABLE>
<input type="submit" value="Submit" name="ADD_SUBMIT">
</form>
</body>
</html>
Above is the script to add new textboxes in a new row. Now i require that when submit button is clicked, each text boxes should be validated whether it is empty or not on client side. The entered values in the text box should not disappear and number of empty text boxes should be same.
In a form a text box is created dynamically by clicking on add button such that the text box is created in a new row.Now my problem is the validation of text boxes which were created dynamically such that it shows a message if any of text boxes are left empty when form is submitted by clicking submit button.Please help me out.
EDIT
<html>
<head>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
}
</SCRIPT>
</head>
<body>
<form onSubmit="return validateFormOnSubmit(this)">
<INPUT type="button" value="Add More Symptom " onClick="addRow('dataTable')" />
<TABLE id="dataTable" >
<TR>
<TD >
<INPUT type="text" name="symp[]" />
</TD>
</TR>
</TABLE>
<input type="submit" value="Submit" name="ADD_SUBMIT">
</form>
</body>
</html>
Above is the script to add new textboxes in a new row. Now i require that when submit button is clicked, each text boxes should be validated whether it is empty or not on client side. The entered values in the text box should not disappear and number of empty text boxes should be same.
Share Improve this question edited Jun 21, 2010 at 21:05 Marco Demaio 34.4k33 gold badges132 silver badges161 bronze badges asked Jun 21, 2010 at 18:27 SatishSatish 1,3354 gold badges15 silver badges22 bronze badges 2- 1. Validation of text boxes client side or server side? 2. show a bit of code maybe could halp us reply. 3. if client side validation of boxes does not change much either they are created dyncamically or not. – Marco Demaio Commented Jun 21, 2010 at 18:43
- Here text boxes ,created dynamically, has to be validated on client side. – Satish Commented Jun 21, 2010 at 18:48
1 Answer
Reset to default 4on the submit event of the form you simply need to collect all input text boxes that you find in the form and pass them into a validation function.
Put this code in the <head> section of your page
//This function here is only a cross-browser events stopper
stopEvent = function(ffevent)
{
var current_window = window;
if(current_window.event) //window.event is IE, ffevent is FF
{
//IE
current_window.event.cancelBubble = true; //this stops event propagation
current_window.event.returnValue = false; //this prevents default (usually is what we want)
}
else
{
//Firefox
ffevent.stopPropagation();
ffevent.preventDefault();
};
}
function validateAllInputBoxes(ffevent)
{
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; ++i)
if(inputs[i].type === 'text')
//@Satish, maybe below you wrote by mistake if(inputs[i].value = '') thus all input elements values get cleared out.
if(inputs[i].value === '')
{
alert("form could not be sent one input text field is empty");
stopEvent(ffevent);
}
}
and in the the <form> tag place the following code:
onsubmit="validateAllInputBoxes(event);"