Javascript to check req fields on button click

**larztheloser** · Jan 18 '10, 07:17 AM

Hey ismailc,

The approach to use is, when the button is clicked, to get it to run a java script function. I gather you're already doing this. This function checks each form element, to see whether it is empty. Let me show you an example from a website I built recently.

The form (the important part) looked like this:

Code:

Name:<input type="text" name="contact"><br>
<textarea rows="10" cols="60" name="feedback"></textarea><br>

The code (part of it) looked like this:

Code:

function validate()
{
input1=document.forms[0].contact.value;
input2=document.forms[0].feedback.value;
if(input1=="")
{
alert("Please provide your contact details");
}
else if(input2=="")
{
alert("You have posted no comments!");
}
else
{
document.forms[0].submit()
}
}

Of course, here the button is always visible - to make a dynamically appearing button is harder, but since you sound like you're in a bit of a hurry this should be find.

Your button to call the function could be a link or a HTML button. Remember also to give the form somewhere to submit to.

regards,
lars

**ismailc** · Jan 18 '10, 07:30 AM

Thank You very much, I'll start now...

Is there a way to decorate the display the message.

To maybe change the font & have a OK Button on message

Please help - i'll get back soon on the validate

**RamananKalirajan** · Jan 18 '10, 08:28 AM

You can have a dedicated div for showing the error messages or success message. In the body you can have a "onmousedow n" listener and clear the content of the div

Ex:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Ramanan Kalirajan">
<META NAME="Keywords" CONTENT="Demo">
<META NAME="Description" CONTENT="Demo">
<style type="text/css">
html, body
{
	height: 100%;
	width: 100%;
	margin: 0px;
	width: 0px;
	overflow: auto;
	font-family: arial;
	font-size: 11px;
}
body{
	overflow: hidden;
}

.errorDiv{
	color: #FF0000;
	height: 24px;
	width: 100%;
	float:left;
	font-weight: bold;
	text-align: center;
}

</style>
</HEAD>
<BODY onmousedown="document.getElementById('errorMsg').innerHTML='';">
<div id="errorMsg" class="errorDiv">
	&nbsp;
</div>
<input type="button" value="Show Message" onclick="document.getElementById('errorMsg').innerHTML='This is a Sample Message';">
</BODY>
</HTML>

Thanks and Regards
Ramanan Kalirajan

**ismailc** · Jan 18 '10, 09:29 AM

Thank You this works great.

Thanks - I realized the message box is better as the user will have to read the message

Any suggestions on displaying an information message box which has a info icon on with an ok button. Also change the font of the message box.

Code:

<SCRIPT TYPE='text/javascript'>
function validate()
{
  input1=document.getElementById('VE1020User').value;
  input2=document.getElementById('VE1085NewVSite').value;

if(input1=="")
{
  alert("Please provide your contact details");
}
else if(input2=="")
{
alert("You have posted no comments!");
}
else
{
  document.getElementById('VE10999Done').click();
  document.getElementById('___Submit').click();
}
}
</SCRIPT>

**RamananKalirajan** · Jan 18 '10, 12:00 PM

You can't change the font-style or size of the alert box. For that you have to create your own message boxes with your own styles.

Thanks and Regards
Ramanan Kalirajan

**acoder** · Jan 18 '10, 01:18 PM

Where you submit programmaticall y:

Code:

document.getElementById('___Submit').click();

can be replaced by

Code:

return true;

if you call it from the form onsubmit event.

One other thing to consider: you could provide immediate visible feedback by having messages next to the input which appear when focus is removed from an input box.

**ismailc** · Jan 18 '10, 01:26 PM

Thank You :) I will give it a try

Javascript to check req fields on button click

Javascript to check req fields on button click

Comment

Comment

Comment

Comment

Comment

Comment

Comment