Steven

asked on 11/10/2010

javascript - making html form fields required

this is the beginning of my form:

<FORM NAME="myForm" ACTION="[LL_CGIPATH /]" ENCTYPE="multipart/form-data" METHOD="POST">
<INPUT TYPE="HIDDEN" NAME="func" VALUE="[LL_FUNC /]">
<INPUT TYPE="HIDDEN" NAME="LL_FUNC_VALUES" VALUE="[LL_FUNC_VALUES /]">
<INPUT TYPE="HIDDEN" NAME="LL_AttrFieldName" VALUE="">
<INPUT TYPE="HIDDEN" NAME="LL_AttrFieldIndex" VALUE="">
<INPUT TYPE="HIDDEN" NAME="LL_WFATTURL" VALUE="[LL_WFATTURL /]">

this is my button to submit the form:

<INPUT CLASS="applyButton" TYPE="BUTTON" VALUE="Apply" NAME="IgnoreMe" ONCLICK="doFormSubmit( document.myForm );">

this is a selection box that i need to require:
[i]options APPROVE or REJECT must be selected, alert user if not selected[/i]

<SELECT CLASS="selectMenu" ID="_1_1_68_1" NAME="_1_1_68_1" ONCHANGE="setDate(this.value);">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="Approve" >Approve</OPTION>
<OPTION VALUE="Reject" >Reject</OPTION>
</SELECT>

this is a text box that i need to require:
[i]if the value of this text box is null, then alert user[/i]

<INPUT CLASS="valueEditable" TYPE="TEXT" NAME="_1_1_8_1_Name" ID="_1_1_8_1_Name" VALUE="" ALT="Select User" SIZE="23" ONCHANGE="KeepFieldSet_1_1_8_1( this, this.form._1_1_8_1_SavedName.value )">

so i have a text box and a selection box that i must validate onSubmit of my form. this form was exported from an application so i'm stuck with the fields listed above. i'm not too savvy with javascript - please help me require these fields!

thanks!!!

JavaScriptHTML

Last Comment

Steven

8/22/2022 - Mon

Tyler Laczko

11/10/2010

you need to add to your <form> tag
onSubmit='return checkForm()'

then write the js code for checkForm()

EG

<script type="text/javascript">
function checkForm()
{
if(document.myForm._1_1_68_1.value == "")
{
return false;
}
return true;
}
</script>

Tyler Laczko

11/10/2010

with the <select> tag you may need to do document.myForm._1_1_68_1.selected.value or something simular. But i think you get the idea.

wellhole

11/10/2010

You really should check for valid values on the server side in addition to this client side check. Otherwise you may end up with sql injection and other kinds of hacks.

Your help has saved me hundreds of hours of internet surfing.

fblack61

Steven

11/10/2010

ASKER

i'm not worried about security - this is in a very controlled environment.

can i safely add onSubmit='return checkForm()' since my button already has:
ONCLICK="doFormSubmit( document.myForm );

i have to maintain the existing code listed above PLUS bring in this required fields function

Tyler Laczko

11/10/2010

yes you can.

Tyler Laczko

11/10/2010

actually depending on what is in your doFormSubmit code... you may have to move code around.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

Steven

11/10/2010

ASKER

okay, i think i found the doFormSubmit part of this site:

      // This function is used by forms to submit
      //
      //      theForm            the form object on the html page
      //

      function doFormSubmit ( theForm )
      {
            var            tempObj;


            for ( i = 0; i < theForm.length; i++ )
            {
                  tempobj = theForm.elements[ i ];

                  if ( tempobj.type.toLowerCase() == "button" )
                  {
                        tempobj.disabled = true;
                  }
            }

            theForm.submit();
      }

does it look like i can bring this required fields thing into my code? sorry i know nothing about javascript - and i know you want me to learn but for what i'm working on i just don't have time to begin educating myself. i'm just looking for a quick solution.

thanks.

CCSOFlag

11/15/2010

What do you want to happen? There are many options?

Here are some option:
do you want to disable the button until required fields are filled out?

Do you want a basic error to pop up if they click the button and all required fields aren't filled out?

Do you want a specific error saying which required field was not filled out when they click the button?

Steven

11/15/2010

ASKER

@ccsoflag, thanks for joining this question! this is the last requirement of my project and i planned on implementing today - you came in at the right moment.

i have one selection box that i must require before onSubmit. this selection box contains two options, Approve and Reject. i need to make sure ONE of the options is selected (make required)

this is my drop down:
<SELECT CLASS="selectMenu" ID="_1_1_100_1" NAME="_1_1_100_1" ONCHANGE="setDate(this.options[this.selectedIndex].value); IsReject(this.options[this.selectedIndex].value);">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="Approve" >Approve</OPTION>
<OPTION VALUE="Reject" >Reject</OPTION>
</SELECT>

this is my submit button:
<INPUT CLASS="applyButton" TYPE="BUTTON" VALUE="Submit" NAME="IgnoreMe" ONCLICK="doFormSubmit( document.myForm );">

ideas? thanks!

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes

CCSOFlag

11/15/2010

Yea, no problem.

I need to know what you want to happen, please reply to the above post and choose an option. The code is different depending on HOW you want to make the field required. Know what I mean? Personally, I like to mark fields as required and then disable the submit button until they fill in required fields, but a lot of people like an alert that pops up when they click the submit button. Just depends on what you want. :)

Steven

11/15/2010

ASKER

sorry,

id like a message alerting the user

CCSOFlag

11/15/2010

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

CCSOFlag

11/15/2010

hold up I think I got the value code wrong. drop downs are dumb... just a sec.

CCSOFlag

11/15/2010

var myTextBox = document.getElementById('_1_1_100_1');

if (myTextBox.options[myTextBox.selectedIndex].value)

That should work

Steven

11/15/2010

ASKER

not working, think its because of my button?

<INPUT CLASS="applyButton" TYPE="BUTTON" VALUE="Submit" NAME="IgnoreMe" ONCLICK="doFormSubmit( document.myForm );CheckRequired();">

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

CCSOFlag

11/15/2010

don't put in on your button onclick. Just put it on your form tag onsubmit attribute as per above. What is the doFormSubmit functions doing?

Steven

11/15/2010

ASKER

doFormSubmit:

      function doFormSubmit ( theForm )
      {
            var            tempObj;


            for ( i = 0; i < theForm.length; i++ )
            {
                  tempobj = theForm.elements[ i ];

                  if ( tempobj.type.toLowerCase() == "button" )
                  {
                        tempobj.disabled = true;
                  }
            }

            theForm.submit();
      }

and i really dont have the option to include this function within doFormSubmit

so i'm still having a problem, this is what i've done:
<FORM NAME="myForm" ACTION="[LL_CGIPATH /]" ENCTYPE="multipart/form-data" METHOD="POST" onsubmit="CheckRequired()">

but that doesnt work

my submit button looks like this now:
<INPUT CLASS="applyButton" TYPE="BUTTON" VALUE="Submit" NAME="IgnoreMe" ONCLICK="doFormSubmit( document.myForm );">

CCSOFlag

11/15/2010

So that function is disabling the button before submitting? I don't get it, why?

Why don't you just use a submit button?

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

CCSOFlag

11/15/2010

Make sure your function looks like this (I made another change but it does the same thing):

      function CheckRequired()
      {
            var myTextBox = document.getElementById('_1_1_100_1');

       if (myTextBox.value)
       {
              return true;
             }
            else
             {
                  alert('Dropdown is a required field');
                   return false;
            }
      }

CCSOFlag

11/15/2010

oh, shoot, I'm sorry, I forgot the return command. your onsubmit should be like this:

onsubmit="return CheckRequired();"

Otherwise it'll submit the form after the alert pops up. So ar eyou even getting an alert? What's not working?

Steven

11/15/2010

ASKER

<FORM NAME="myForm" ACTION="[LL_CGIPATH /]" ENCTYPE="multipart/form-data" METHOD="POST" onsubmit="return CheckRequired();">

i'm not getting a popup at all

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

CCSOFlag

11/15/2010

really? That's odd. Do this and let me know if that alert pops up:

function CheckRequired()
{
var myTextBox = document.getElementById('_1_1_100_1');
alert('HELLO');
if (myTextBox.value)
{
return true;
}
else
{
alert('Dropdown is a required field');
return false;
}
}

Steven

11/15/2010

ASKER

hmm that doesnt work either

Steven

11/15/2010

ASKER

wait

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

CCSOFlag

11/15/2010

How about this?

function CheckRequired()
{
alert('HELLO');
var myTextBox = document.getElementById('_1_1_100_1');
if (myTextBox.value)
{
return true;
}
else
{
alert('Dropdown is a required field');
return false;
}
}

Steven

11/15/2010

ASKER

yeah, this is not working

(i changed selection boxes, i'm now using this one:
<SELECT CLASS="selectMenu" ID="_1_1_68_1" NAME="_1_1_68_1" ONCHANGE="setDate(this.options[this.selectedIndex].value); IsReject(this.options[this.selectedIndex].value);">
<OPTION VALUE="" ><None></OPTION>
<OPTION VALUE="Approve" >Approve</OPTION>
<OPTION VALUE="Reject" >Reject</OPTION>
</SELECT>

shouldnt matter, only the ID changed

<script type="text/javascript" language="javascript">
function  CheckRequired()
      {
            var myTextBox = document.getElementById('_1_1_68_1');
        alert('HELLO');
        if (myTextBox.value)            
        {
               return true;
             }
            else
             {
                  alert('Dropdown is a required field');
                   return false;
            }
      }
</script>