making a text field mandatory?

[MT]

Hi all, this sounds like an easy enough thing to do, but after
spending 45 minutes searching google and various javascript sites I
can't find out how to make a textfield (textbox or whatever you want
to call it) in an html form be a mandatory field. I'm guessing it
would be on the "submit" click, and a pop-up would appear saying to
enter data in teh field. Can anyone recommend a good javascript site?
thanks in advance.

 

[Jeff North]

On 8 Oct 2003 18:09:02 -0700, in comp.lang.javascript

| Hi all, this sounds like an easy enough thing to do, but after
| spending 45 minutes searching google and various javascript sites I
| can't find out how to make a textfield (textbox or whatever you want
| to call it) in an html form be a mandatory field. I'm guessing it
| would be on the "submit" click, and a pop-up would appear saying to
| enter data in teh field. Can anyone recommend a good javascript site?
| thanks in advance.

There are a couple of ways:
(client side) use a onSubmit function to test the contents of the
field before moving onto another page. The downside of this is if the
user has turned off javascripting.
(server side). Submit the form and get the server to validate the
data. Downside: can be lengthy delay (server busy/slow connection) in
the user receiving feedback about the errors on the page.

Which is best? Depends. I prefer to use client-side validation where
possible as this
a) allows immediate response to errors and
b) the client machine is rarely that busy (compared to a web server).

Coding differences:
(Client side)
<Form name="f1" action="next.asp" onSubmit="return CheckInputs();">

--- if CheckInputs returns false then you stay on the current page.
--- if CheckInputs returns true then you move to the designated page.

javascript function
function CheckInputs()
{
var OK = true;
if( [check data on some input field] == "" )
{
OK = false;
alert( "Error");
}
return OK;
}

Server side
<Form name="f1" action="next.asp" method="post">

next.asp (JSCRIPT) code
<%
var eNbr = 0;
var v1 = new String(Request.Form("myInput")) + "";
if( v1 == "" )
eNbr++;
..
..
..
if( eNbr )
Response.redirect("nextErrorPage.asp");
%>

 

[Lasse Reichstein Nielsen]

[client-side vs server-side validation]

Which is best? Depends. I prefer to use client-side validation where
possible as this
a) allows immediate response to errors and
b) the client machine is rarely that busy (compared to a web server).

The optimal solution will do both.

As you point out, if Javascript is not available, the field can not be
validated on the client. In that case, the server *must* check that the
mandatory field has been filled, or it will be processing invalid data.

On the internet, you cannot assume anything about the client. A
malicious user, even with Javascript active, can turn it off or alter
it to avoid your client-side validation.

Client-side validation should never be anything but a service to the
user, preventing a lengthy round trip to the server by warning about
errors before submitting. If the user don't want that service, he can
turn it off. The real validation should happen on the server in any
case.

/L

 

[Richard Hockey]

Give something like this a try:

<script type="text/javascript">

// regular expression to detect one or more spaces
var blankRE=/^[\s]+$/;

// 1-16 letters only
var textRE=/^[a-zA-Z]{1,16}$/;

function ValidateForm(FormObject)
{
// pass form object reference to function
// 'this' or document.forms['myform']

// check to see if required field 'textfield 1' has been completed,check
for empty field and spaces entered into field
if(FormObject.elements['textfield1'].value=="" ||
blankRE.test(FormObject.elements['textfield1'].value))
{
alert(' You have not completed a required field "textfield 1".
Please complete it now.');
FormObject.elements['textfield1'].focus();
return false;
}

// check format of string in textfield 1, allows only 16 upper/lower
case letters
if(!textRE.test(FormObject.elements['textfield1'].value))
{
alert('The contents of "textfield 1" are invalid. Only 16 letters
are allowed.');
FormObject.elements['textfield1'].focus();
return false;
}
return true;
}
</script>

<form name="myform" method="post" action="reqform.php" onsubmit="return
ValidateForm(this);">
<label for="textfield1">textfield 1</label>
<input type="text" name="textfield1" id="textfield1" size="16">
<input type="submit" value="submit form">
</form>

 

[MT]

thanks for everyone's help.

Give something like this a try:

<script type="text/javascript">

// regular expression to detect one or more spaces
var blankRE=/^[\s]+$/;

// 1-16 letters only
var textRE=/^[a-zA-Z]{1,16}$/;

function ValidateForm(FormObject)
{
// pass form object reference to function
// 'this' or document.forms['myform']

// check to see if required field 'textfield 1' has been completed,check
for empty field and spaces entered into field
if(FormObject.elements['textfield1'].value=="" ||
blankRE.test(FormObject.elements['textfield1'].value))
{
alert(' You have not completed a required field "textfield 1".
Please complete it now.');
FormObject.elements['textfield1'].focus();
return false;
}

// check format of string in textfield 1, allows only 16 upper/lower
case letters
if(!textRE.test(FormObject.elements['textfield1'].value))
{
alert('The contents of "textfield 1" are invalid. Only 16 letters
are allowed.');
FormObject.elements['textfield1'].focus();
return false;
}
return true;
}
</script>

<form name="myform" method="post" action="reqform.php" onsubmit="return
ValidateForm(this);">
<label for="textfield1">textfield 1</label>
<input type="text" name="textfield1" id="textfield1" size="16">
<input type="submit" value="submit form">
</form>

Hi all, this sounds like an easy enough thing to do, but after
spending 45 minutes searching google and various javascript sites I
can't find out how to make a textfield (textbox or whatever you want
to call it) in an html form be a mandatory field. I'm guessing it
would be on the "submit" click, and a pop-up would appear saying to
enter data in teh field. Can anyone recommend a good javascript site?
thanks in advance.