Member Avatar for veledrom

Hi,

I have 2 textbox and 2 buttons in my form. Seperatly, Button 1 will validate textbox 1 and Button 2 will validate textbox 2, if they are empty or not.

How can we do it?

Thanks

  • 3 Contributors
  • 3 Replies
  • 101 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by veledrom
Member Avatar for R0bb0b

very basic version but it should get you started:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function validateForm(inputID)
{
	if(document.getElementById(inputID).value == "")
	{
		document.getElementById(inputID + "_error").style.display = "block";
	}
	else
	{
		document.getElementById(inputID + "_error").style.display = "none";
	}
}
</script>
</head>

<body>
<table cellpadding="0" cellspacing="0">
	<tr>
		<td style="height:20px;"><div id="txt1_error" style="display:none;">TextBox 1 is blank</div></td>
		<td style="height:20px;"><div id="txt2_error" style="display:none;">TextBox 2 is blank</div></td>
	</tr>
	<tr>
		<td><input type="text" name="txt1" id="txt1" /></td>
		<td><input type="text" name="txt2" id="txt2" /></td>
	</tr>
	<tr>
		<td><input type="button" name="btnValidate1" value="Validate TextBox 1" onclick="validateForm('txt1');" /></td>
		<td><input type="button" name="btnValidate2" value="Validate TextBox 2" onclick="validateForm('txt2');" /></td>
	</tr>
</table>
</body>
</html>
Member Avatar for essential

Just another option!
Please kindly marked this thread solved if thus solve the issue concerning your interest. Thanks...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Input Text Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
form { margin: 2px; font-weight: bold; color: green; text-align: left; }
form  input[type=button] { background-color: green; color: white; margin-top: 4px; }
-->
</style>
<script type="text/javascript">
<!-- BEGIN HIDING

/*I will simply use one button, 
to validate this 2 txt boxes.
But if you think that it's really necessary for you to have another button. Just add 
it up and reconfigure this code */

document.onclick = function(txt)
{ txt = txt ? txt : window.event;
   validate = txt.target ? txt.target : txt.srcElement; 


if (( validate.name ) && ( validate.name == 'b1' )) 
{ if (( txtform._txt1.value == '' ) || ( txtform._txt1.value.length <= 2 )) 
{ alert('\nPlease enter a valid name with atleast 6 characters\' long!'); return false; } 
else if ( txtform._txt1.value.length > 10 ) { msg = alert('\nMax character reached!'); return false; } 
  
if (( txtform._txt2.value.indexOf('@') == -1 ) || ( txtform._txt2.value.indexOf('.') == -1 ) || ( txtform._txt2.value.length <= 10 )) { alert('\nInvalid e-mail address!\nPlease try again.'); }
else if ( txtform._txt2.value.length > 12 ) { alert('Max acharacter reached\nPlease try again.'); 
    } 
  } else { return true; }
}

// DONE HIDING -->
</script>
</head>
<body>
<form name="txtform" onsubmit="return false">
Name:<br />
<input name="_txt1" size="24" /><br />
Email:
<input name="_txt2" size="24" /><br />
<input name="b1" type="button" value=" Enter " />
</form>
</body>
</html>
Member Avatar for veledrom

Solved with R0bbob's solution.

Thanks both of you

Now how can i mark it as solved for R0bbob.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.