Hi Guys,
I am trying to create my first web form. I have the code below, but am stuck trying to make sure that all fields have data using onSubmit. Is it better to validate fields on submission or once they are keyed in?
I am also having trouble with the onBlur command. I have created a function that does work for my number field, however, I would like the check to take place using onBlur.
Help Please! I have spent days working on this and I keep getting more confused and more errors the more "tweaking" I do.
The following code is error free, unfortunately, it doesn't do what I want it to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value <= 12 || value >= 27)
{alert(alerttxt);return false}
else {return true}
}
}function validate_form(thisform)
{
with (thisform)
{
if (validate_required(number,"Please enter a number BETWEEN 12 and 27")==false)
{number.focus();return false}
}
}
</script>
</head><body>
<form action="submitpage.htm"
onsubmit="return validate_form(this)"
method="post">
<div id="wmbanner">Karma Form </div>
<h1>May your Zen – Zig Always </h1>
<ul>
</ul>
<p>Please Complete the form below. Refer to the instructions below if necessary. </p>
<ol>
<li>The number field is your <strong>Karma number</strong> and the color field is your <strong>Karma color</strong>. </li>
<li>Press the <strong>Reset button</strong> to clear the form. Press the <strong>Submit button</strong> to submit the form. </li>
</ol>
<HR> <!-- ====================================== -->
<p>
<label>First Name:
<input name="fname" type="text" id="fname" size="27" />
</label>
</p>
<p>
<label>Last Name:
<input name="lname" type="text" id="lname" size="27" />
</label>
</p>
<p>Number:
<input type="text" name="number" size="30">
between 12 and 27
</p>
<p>
<label>Color:
<input name="color" type="text" id="color" size="32" />
</label>
</p>
<p>
<label>
<input name="Reset" type="reset" id="Reset" value="Reset" />
</label>
<input name="submit" type="submit" value="Submit" />
</p>
<p> </p>
</form>
<HR> <!-- ====================================== -->
</body></html>
<body>
</body>
</html>
As you can see, it is pretty simple, just 4 fields and 2 buttons. The Submit button doesn't work as I would like it too, I would like it to tell me when a field is blank, it doesn't have to know which field but that would be cool.
The number field should automatically check to make sure that the number entered is correct once it looses focus. I can't get that to work either.
With your help on those two things, my "Karma Catalog" will be in its highest Chakra and I will have attained zenlike happiness.
Thank You!
I am trying to create my first web form. I have the code below, but am stuck trying to make sure that all fields have data using onSubmit. Is it better to validate fields on submission or once they are keyed in?
I am also having trouble with the onBlur command. I have created a function that does work for my number field, however, I would like the check to take place using onBlur.
Help Please! I have spent days working on this and I keep getting more confused and more errors the more "tweaking" I do.
The following code is error free, unfortunately, it doesn't do what I want it to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value <= 12 || value >= 27)
{alert(alerttxt);return false}
else {return true}
}
}function validate_form(thisform)
{
with (thisform)
{
if (validate_required(number,"Please enter a number BETWEEN 12 and 27")==false)
{number.focus();return false}
}
}
</script>
</head><body>
<form action="submitpage.htm"
onsubmit="return validate_form(this)"
method="post">
<div id="wmbanner">Karma Form </div>
<h1>May your Zen – Zig Always </h1>
<ul>
</ul>
<p>Please Complete the form below. Refer to the instructions below if necessary. </p>
<ol>
<li>The number field is your <strong>Karma number</strong> and the color field is your <strong>Karma color</strong>. </li>
<li>Press the <strong>Reset button</strong> to clear the form. Press the <strong>Submit button</strong> to submit the form. </li>
</ol>
<HR> <!-- ====================================== -->
<p>
<label>First Name:
<input name="fname" type="text" id="fname" size="27" />
</label>
</p>
<p>
<label>Last Name:
<input name="lname" type="text" id="lname" size="27" />
</label>
</p>
<p>Number:
<input type="text" name="number" size="30">
between 12 and 27
</p>
<p>
<label>Color:
<input name="color" type="text" id="color" size="32" />
</label>
</p>
<p>
<label>
<input name="Reset" type="reset" id="Reset" value="Reset" />
</label>
<input name="submit" type="submit" value="Submit" />
</p>
<p> </p>
</form>
<HR> <!-- ====================================== -->
</body></html>
<body>
</body>
</html>
As you can see, it is pretty simple, just 4 fields and 2 buttons. The Submit button doesn't work as I would like it too, I would like it to tell me when a field is blank, it doesn't have to know which field but that would be cool.
The number field should automatically check to make sure that the number entered is correct once it looses focus. I can't get that to work either.
With your help on those two things, my "Karma Catalog" will be in its highest Chakra and I will have attained zenlike happiness.
Thank You!
