PDA

Click to See Complete Forum and Search --> : required fields

tarotman
08-04-2004, 02:23 PM
Hi I have a basic form with about 20 fields and a submit button.
Can I use a java script in there to block the submit button if required fields are filled out?:)
sneakyimp
08-04-2004, 02:42 PM
absolutely.

you should try searching this forum for "form validation" and you will probably find it.

heck, i will explain...try something like this:

<SCRIPT LANGUAGE="Javascript">
// this function checks a checkbox
// with name "cb1"
function checkCheckBox(myForm){
if (myForm.cb1.checked == false ) {
alert('Please check the checkbox you dodohead. It is required.');
return false;
} else {
return true;
}
}

function validate_form(myForm) {
if (!checkCheckBox(myForm)) {
return false;
}

// this line make sure they've entered something
// in the "my_name" field
if (myForm.my_name.value.length < 1) {
alert("you must enter your name which is probably dodohead");
return false;
}

// if all those check succeed, return true
return true;
}


</SCRIPT>

<FORM NAME="my_form" ACTION="yourpage.php" METHOD="POST" onsubmit="return validate_form(this);">
Your name:<input type=text name="my_name"><BR>
<input type=checkbox name="cb1">Tha checkbox</p>
<INPUT TYPE=submit value="submit" name="submit">

</form>
tarotman
08-04-2004, 02:50 PM
Thank you. I will try this
steelersfan88
08-04-2004, 02:52 PM
To disable the submit button, add the disabled attribute. Validate the onchange method of every element, which you can add more easily thru:<script type="text/javascript">

window.onload = function() {
var elems = document.forms['form_name'].elements
for(var i=0,a;a=elems[i];i++) {
a.onclick = function() {
// validation stuff here
// if all valid, then set submit button disabled property to false
}
}
}

</script>Dr. Script
tarotman
08-04-2004, 02:55 PM
:confused: So do I add this to the button and that's it? I don't understand:(
steelersfan88
08-04-2004, 03:08 PM
That would go to the head section of the page. Change the name of the form in there. Also, I have .onclick = function(). Itshould be onchange = function(). Sorry 'bout that.

I will post an example later.
tarotman
08-04-2004, 03:30 PM
I put the script in, changed the name but nothing. don't I have to assign the fields that needs to be *required? :confused:
steelersfan88
08-04-2004, 04:33 PM
OK, so here is how we'll do it. The following will work in MSIE and Mozilla. Just make sure the submit button is the last element in the form and it'll work well.<html>
<head>
<style type="text/css">

.fld {
padding:px;
width:285px;
text-align:center;
}

</style>

<script type="text/javascript">

var required = new Array();
var form_nm = "myForm"

window.onload = function() {
var elems = document.forms[form_nm].elements;
for(var i=0,a;a=elems[i];i++) {
if(a.getAttribute('set') == "required") {
required[required.length] = i;
a.onchange = function() {
return isOk(this.form);
}
}
}
return isOk(document.forms[form_nm])
}

function isOk(frm) {
var error = new Array();
for(var i=0,a;i<required.length;i++) {
a=required[i]
if(!eval(frm.elements[a].getAttribute('regexp')).test(frm.elements[a].value)) {
error[error.length] = "Field "+ frm.elements[a].getAttribute('id') +" is not correctly filled.";
}
}

frm.elements[frm.elements.length-1].disabled = error.length;
document.getElementById('errors').innerHTML = "Good to Go!";

if(error.length) {
document.getElementById('errors').innerHTML = error.join('<BR>');
}
}

</script>
</head>

<body>
<form name="myForm" action="someScript.pl" method="post">
<fieldset class="fld"><legend>myForm</legend>
Numbers: <input type="text" id="numbers" set="required" name="txt1" regexp="/^\d+$/"><BR>
Text2: <input type="text" id="txt2" set="optional" name="txt2"><BR>
Text3: <input type="text" id="txt3" set="optional" name="txt3"><BR>
Letters: <input type="text" id="letters" set="required" name="txt4" regexp="/^[A-Za-z]{5,}$/"><BR>
<button type="submit" name="sbmt" id="sbmt" disabled="true">Submit!</button>
</fieldset>
</form>

<fieldset class="fld"><legend>Errors</legend>
<div id="errors" style="color:red;font-weight:bold;">
Any errors will be posted here.
</div>
</fieldset>
</body>
</html>The added attribute, set, should have a value of required if it is necessary. Otherwise, it need not a value. The redexp attribute is the regular expression that will test the value. Anything returning flse will show an error. The errors are listed onload and removed/added when corrected/invoked.

When no errors occur, the submit button will be enabled. Will work for JS only browser, so that eliminates about 13% of INet users. Not much you can do about that, unless you use server side validation.

Dr. Script
Vladdy
08-04-2004, 05:13 PM
Originally posted by steelersfan88
<snip content="crap"/> Will work for JS only browser, so that eliminates about 13% of INet users. Not much you can do about that, unless you use server side validation.

Dr. Script
.. And that is why you should ignore this so called "advice"...
Sneaky offered correct approach to the problem.
Server side validation should be done regardless of client side scripting availability.
steelersfan88
08-04-2004, 05:22 PM
I said that :)
steelersfan88
08-04-2004, 05:26 PM
... and the solution would be what if server side was not an option?
steelersfan88
08-04-2004, 05:42 PM
tarotman ... I highly suggest you take a look at this code and see if this could work for you. Its possibilities are endless to those who have a compatible browser. The only problem you may have is the regular expresion part, which could be a problem on certain validation.

Feel free to post, and feel free to ignore those who try and lead you in directions which result in brick walls (ala above)
tarotman
08-04-2004, 06:30 PM
Thank you so much for all this quick help! Do you think you can take a look at my whole page and see what's wrong, because I can not make it work.


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="/icon/logo.ico">
<title>Request Information</title>
<link href="/flash/global.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

var required = new Array();
var form_nm = "request"

window.onload = function() {
var elems = document.forms[form_nm].elements;
for(var i=0,a;a=elems[i];i++) {
if(a.getAttribute('set') == "required") {
required[required.length] = i;
a.onchange = function() {
return isOk(this.form);
}
}
}
return isOk(document.forms[form_nm])
}

function isOk(frm) {
var error = new Array();
for(var i=0,a;i<required.length;i++) {
a=required[i]
if(!eval(frm.elements[a].getAttribute('regexp')).test(frm.elements[a].value)) {
error[error.length] = "Field "+ frm.elements[a].getAttribute('id') +" is not correctly filled.";
}
}

frm.elements[frm.elements.length-1].disabled = error.length;
document.getElementById('errors').innerHTML = "Good to Go!";

if(error.length) {
document.getElementById('errors').innerHTML = error.join('<BR>');
}
}

</script>
</head>
<body>
<body bgcolor="#52819C" leftmargin="0" topmargin="0">
<div align="center">
<table width="800">
<tr>
<td colspan="3"><div align="right"><span class="global"><img src="/flash/images/formhead.gif" width="700" height="125"><br>
</span></div></td>
</tr>
<tr>
<td colspan="3"><div align="center" class="smalltype">PLEASE REVIEW THE
“QUESTIONS AND ANSWERS” BEFORE FILLING OUT THIS FORM</div></td>
</tr>
</table>
</div>

<form action="http://jonbutcher.com/v-cgi/forms.cgi"
method="post"
enctype="application/x-www-form-urlencoded" name="request" id="request">
<table width="800" align="center">
<tr>
<td width="334" class="global"><div align="right"> </div></td>
<td width="334" class="global">&nbsp;</td>
<td width="30" class="red">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"> Date of Application:
<input name="Date_of_Application" type="text" id="Date_of_Application" size="30" />
</th>
<td width="334" class="global"><div align="right"><strong><font color="#990000">*</font>
required</strong> <strong>fields</strong> </div></td>
<td width="30" class="red">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"> <font color="#990000">*</font>Last Name:
<input type="text" name="Last_Name" size="30" /> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>First
Name: </strong>
<input type="text" name="First_Name" size="30" />
</div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"><font color="#990000">*</font>Street address
or PO box:
<input type="text" name="Street" size="30" /> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>City:</strong>
<input type="text" name="City" size="30" />
</div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"><font color="#990000">*</font>State:
<input type="text" name="State" size="30" /> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>Zipcode:</strong>
<input type="text" name="Zipcode" size="30" />
</div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"> <font color="#990000">*</font>Home Telephone:
<input type="text" name="Home_Telephone" size="30" /> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>Email:</strong>
<input type="text" name="Email" size="30" />
</div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global">Business or Cellphone:
<input type="text" name="Business_or_Cell_Telephone" size="30" /> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>Have
you ever owned a business:</strong> </div></td>
<td class="red">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"><div align="right">Best Time for Contact:
<input type="radio" name="Best_Time_for_Contact" value="Morning" checked="checked" class="checkbox" />
Morning
<input type="radio" name="Best_Time_for_Contact" value="Lunch" class="checkbox" />
Lunch
<input type="radio" name="Best_Time_for_Contact" value="Evening" class="checkbox" />
Evening </div></th>
<th align="right" class="global"> <div align="right">
<input type="radio" name="Have_you_ever_owned_a_business" value="yes" class="checkbox" />
<strong> yes</strong>
<input name="Have_you_ever_owned_a_business" type="radio" class="checkbox" value="no" checked />
<strong>no </strong></div></th>
<th align="right" class="global">&nbsp;</th>
</tr>
<tr>
<th align="right" class="global"><font color="#990000">*</font>Current Occupation:
<input type="text" name="Current_Occupation" size="30" /></th>
<td class="global"><div align="right"><strong>If yes what type of business:
</strong></div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th height="25" align="right" class="global"><font color="#990000">*</font>Have
you owned a boat:
<input type="radio" name="Have_you_owned_a_boat" value="yes" class="checkbox" />
yes
<input name="Have_you_owned_a_boat" type="radio" class="checkbox" value="no" checked />
no </th>
<td class="global"><div align="right"><strong>
<input type="text" name="If_yes_what__type_of_business" size="20" />
</strong></div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global"><strong>If yes what kind:
<input type="radio" name="If_yes_what_kind" value="Power" class="checkbox" />
Power
<input type="radio" name="If_yes_what_kind" value="Sail" class="checkbox" />
Sail
<input name="If_yes_what_kind" type="radio" class="checkbox" value="None" checked />
None </strong></th>
<td class="global"><div align="right"><strong>Area where you would locate
a Club:</strong> </div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global">Number of years boating:
<input type="text" name="Number_of_years_boating" size="15" /> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>City:</strong>
<input name="Boat_Club_City" type="text" id="Boat_Club_City2" size="30" />
</div></td>
<td class="global">&nbsp;</td>
</tr>
<tr>
<th height="45" rowspan="4" align="right" class="global">What interests
you most our boat club:
<textarea name="What_interests_you_most_about" rows="6" cols="41"></textarea>
</th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>State:</strong>
<input name="Boat_Club_State" type="text" id="Boat_Club_State2" size="30" />
</div></td>
<td rowspan="4" class="red">&nbsp;</td>
</tr>
<tr>
<td class="global"><div align="right"><strong><font color="#990000">*</font>County:</strong>
<input type="text" name="County" size="30" />
</div></td>
</tr>
<tr>
<td class="global"><div align="right"><strong><font color="#990000">*</font>Amount
of Unborrowed Capital Available: $
<input type="text" name="Amount_of_Unborrowed_Capital_A" size="30" />
</strong></div></td>
</tr>
<tr>
<td><div align="right"> </div></td>
</tr>
<tr>
<th align="right" class="global">Education: </th>
<td class="global"> <div align="right"> </div></td>
<td class="red">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global">Highest grade completed:
<input type="text" name="Education_completed" size="20" /> </th>
<td class="global"><div align="right">
<input name="Form_Submit" type="submit" value="Submit Form" />
</div></td>
<td class="red">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global">If College: Highest Degree
<input type="text" name="College_degree" size="20" /> </th>
<td class="global">&nbsp; </td>
<td class="red">&nbsp;</td>
</tr>
<tr>
<th align="right" class="global">Major:
<input type="text" name="Major" size="20" /> </th>
<td class="global"><div align="right">
<input type="reset" name="Form_Submit2" value="Reset Form" />
</div></td>
<td class="red">&nbsp;</td>
</tr>
<tr>
<th colspan="3" align="right" class="global">&nbsp; </th>

<input type="hidden" name="_vDeckformid" value="514" />
</div>
</form>


<p>&nbsp;</p>
</body>
</html>
steelersfan88
08-04-2004, 06:33 PM
It does not appear that you have added the, set="required" for all required fields.

Also, for the required fields, you must add: regexp="***" . The ** represents a regular expression. If you want to make sure it has at least y characters, use: regexp="/.{y,}/" . Remove the comma if exactly y characters, and change y to a number.
steelersfan88
08-04-2004, 06:36 PM
Also, the "<input name="Form_Submit" type="submit" value="Submit Form" />" must be the last elements. If not, you will have to edit thefrm.elements[frm.elements.length-1].disabled = error.length;line, into the following:frm.elements[frm.elements.length-(y+1)].disabled = error.length;where y represents the number of elements after the submit button.
tarotman
08-04-2004, 07:00 PM
My head start feeling heavy. I'm back in school!
Did I place the set="required" on the right place (see below) beacuse I can still not get it to work

=====================================================================
<tr>
<th align="right" class="global"><font color="#990000">*</font>State:
<input type="text" name="State" size="30" set="required"/> </th>
<td class="global"><div align="right"><strong><font color="#990000">*</font>Zipcode:</strong>
<input type="text" name="Zipcode" size="30" set="required"/>
</div></td>
<td class="global">&nbsp;</td>
</tr>:confused:
steelersfan88
08-04-2004, 07:04 PM
Yes, it should be in the following form:<input type="text" name="State" id="State" regexp="/.+/" size="30" set="required" />
steelersfan88
08-04-2004, 07:06 PM
Remember, regexp is only require din the ones denoted, set="required". The regexp attribute will be the hardest part. Just reply when you have ?s on this. For example:

At least 1 character: /^.+$/
At least 2 character: /^.{2,}$/
Exactly 2 character: /^.{2}$/
tarotman
08-04-2004, 07:16 PM
So it will not work with just regexp="/.+/"?
steelersfan88
08-04-2004, 07:19 PM
It'd be preferred as /^.+$/
tarotman
08-04-2004, 07:27 PM
It still sends it away with anything written:( in other words it does not work
steelersfan88
08-04-2004, 07:28 PM
Do you have it online anywhere?
tarotman
08-04-2004, 07:29 PM
It still sends it away without anything written:( in other words it does not work.

I wish I could send you the whole page and tell me what's up.:rolleyes:
steelersfan88
08-04-2004, 07:30 PM
Save it as .txt and attach the file.
tarotman
08-04-2004, 07:34 PM
Here it is:D
steelersfan88
08-04-2004, 07:58 PM
It works now ... although you might want to change a few things. Regular expressions for ( ... format, ()s means optional):

Zipcode: /^\d{5}(-[0-9]{4})?$/ || ... #####(-####)
Email: /^[A-z]+[A-z0-9_]*@[A-z]+[A-z0-9_]*.[A-z]{2,4}(.[A-z]{2})?$/ || ... myName@myserver.com
Phone Number: /^(\(?\d{3}\)?)?[ ]?\d{3}-\d{4}$/ || ... ((555)) 555-5555
Money: /^\$?\d+$/

States, Country, City, Name, Occupation: /^[A-Za-z]{y,}$/ ... of course, y = minimum chars, remove comma if exactly.

Dr. Script
tarotman
08-04-2004, 08:22 PM
Mr Script MAster
What can I say.... THANK YOU. It works great!:D
steelersfan88
08-04-2004, 08:30 PM
Glad to help. If you need my help any further, just ask yourself "is there a doctor in the house" ... couldn't resist :D