55 users online (1 members and 54 guests)  


  Results 1 to 11 of 11

Related

  1. required fields in a form    Forum: HTML Forum
    Replies: 17
  2. Required Form Fields    Forum: Javascript Forum
    Replies: 1
  3. Replies: 1
  4. Replies: 3
  1. #1
    FFSAT's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    2

    HTML Form with required fields

    I seen a post like this already but I am still lost when it comes to trying to put in a required field into one of my forms. Could someone please help. I am so lost.

    Here is a type of form I use and would like to learn how to add required fields to my coding.

    <form method=post action="http://geocities.yahoo.com/forms?login=el.diablo2004">

    <body>

    <table width=600 border=0 cellspacing=10 cellpadding=0>
    <tr><td valign=top align=right>
    </table>

    <p align="center"><b><u><font size="6" face="Britannic Bold">Web Suggestion Form</font></u></b></p>
    <p align="left">&nbsp;</p>

    <p align="left"><b><font face="Arial Black" size="4">First Name: </font></b><font face="Arial Black" size="4"><input type="text" name="First Name" MAXLENGTH="15" size="20"><b>&nbsp;&nbsp;<font face="Arial Black" size="4">Last Name: </font></b><font face="Arial Black" size="4"><input type="text" name="Last Name" MAXLENGTH="15" size="20"></font>

    <p align="left"><b><font face="Arial Black" size="5">Member Name:</font></b><font face="Arial Black" size="5"><b>
    </b><input type="text" name="Member Name" size="40"></font></p>
    <p align="left"><font face="Arial Black" size="5">Email Address: <input type="text" requiredname="Email address" size="40"></font></p>
    <p align="left"><font face="Arial Black" size="5">Gender: <select size="1" name="Gender">
    <option>Select Below:</option>
    <option>Male</option>
    <option>Female</option>
    </select></font></p>
    <p align="left"><font face="Arial Black" size="5">Tell us some suggestions:</font></p>
    <p align="left"><textarea rows="7" name="Suggestions" cols="42"></textarea></p>
    <p align="left"><tr valign="top">
    <td colspan=1 height=30></td>
    <p>
    <input type="submit" value="Send">
    <input type="reset" value="Clear the form">
    </td>
    </tr>
    </table>


    <input type="hidden" name="subject" value="Clan Web Site">


    <input type="hidden" name="next_url" value="http://www.geocities.com/el.diablo2004/thanks.htm">


    </form>

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: HTML Form with required fields

    Try to add this script:
    Code:
    <script type="text/javascript">
    window.onload=function(){
    var elForm=document.getElementsByTagName('form')[0]; // Get the first form in the document
    elForm.onsubmit=function()
    	{
    	var required=['First Name','Last Name','Member Name'];
    	// Place in this array the name of the form that you think should be mandatory
    	var bool=true; // Create bool variable and set its value to true
    	for(var i=0;i<required.length;i++)
    		{
    		if(document.getElementsByName(required[i])[0].value=='')
    			{
    			alert(required[i]+' textbox is mandatory to fill in.');
    			bool=false;
    			}
    		}
    	return bool;
    	}
    }
    </script>
    P.S, highlighted is erroneous
    Code:
    <input type="text" requiredname="Email address" size="40">
    ...the fix is by removing it.

    Also, you have good numbers of deprecated elements and attributes, find time to fix those.

    Hope this helps.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    FFSAT's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2008
    Posts
    2

    Re: HTML Form with required fields

    rangana thank you very much for your quick response and help. It worked. I'm going to have to read up on the site you gave me and learn how to do javascript. Again I thank you...

  4. #4
    vkareh's Avatar
    New User

    Status
    Offline
    Join Date
    May 2010
    Posts
    4

    Question Re: HTML Form with required fields

    Hi.
    I try to use that script and I think i'm doing something wrong because is not working.

    My html form is:

    <div id="contact_form" style="padding-left: 7px; padding-right: 7px;">

    <form id="form1" class="form-1" method="post" action="../sendmail_careers.php">
    <h1> </h1>

    <table>
    <tr>
    <td valign="top">First Name</td><td valign="top"><input type="text" name="firstname" id="firstname" /></td>
    </tr>
    <tr>
    <td valign="top">Last Name</td><td valign="top"><input type="text" name="lastname" id="lastname" /></td>
    </tr>
    <tr>
    <td valign="top">Email</td><td valign="top"><input type="text" name="email" id="email" /></td>
    </tr>
    <tr>
    <td valign="top">Phone</td><td valign="top"><input type="text" name="phone" id="phone" /></td>
    </tr>
    <tr>
    <td valign="top">Address Line 1</td><td valign="top"><input type="text" name="address1" id="address1" /></td>
    </tr>
    <tr>
    <td valign="top">Address Line 2</td><td valign="top"><input type="text" name="address2" id="address2" /></td>
    </tr>
    <tr>
    <td valign="top">City</td><td valign="top"><input type="text" name="city" id="city" /></td>
    </tr>
    <tr>
    <td valign="top">State</td><td valign="top"><select name="state" id="state">
    <option value="#" selected="selected">Choose state...</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="WY">Wyoming</option>

    </select></td>
    </tr>
    <tr>
    <td valign="top">Zip</td><td valign="top"><input type="text" style="width: 100px;" name="zip" id="zip" /></td>
    </tr>
    <tr>
    <td valign="top">Comments</td><td valign="top"><textarea name="comments" id="comments" cols="45" rows="5"></textarea></td>
    </tr>
    <tr>
    <td valign="top">How did you<br />
    hear about us?</td><td valign="top"><textarea name="referral" id="referral" cols="45" rows="5"></textarea></td>
    </tr>
    <tr>
    <td>&nbsp;</td><td><input type="submit" style="width: 60px;" name="submit" id="submit" value="Send &raquo;" /></td>
    </tr>
    </table>


    </form>

    I add the script on the header.

    <script type="text/javascript">
    window.onload=function(){
    var elForm=document.getElementsByTagName('form')[0]; // Get the first form in the document
    elForm.onsubmit=function()
    {
    var required=['firstname','lastname','email'];
    // Place in this array the name of the form that you think should be mandatory
    var bool=true; // Create bool variable and set its value to true
    for(var i=0;i<required.length;i++)
    {
    if(document.getElementsByName(required[i])[0].value=='')
    {
    alert(required[i]+' textbox is mandatory to fill in.');
    bool=false;
    }
    }
    return bool;
    }
    }
    </script>

    I'm new on forms so can some one help me to make this work?

  5. #5
    vkareh's Avatar
    New User

    Status
    Offline
    Join Date
    May 2010
    Posts
    4

    Wink Re: HTML Form with required fields

    I just need some of the fields to be requierd.

    Thanks

  6. #6
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: HTML Form with required fields

    I just tried it, and it seemed to work. Can you please elaborate a little further on what's not working?


    Thanks.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  7. #7
    vkareh's Avatar
    New User

    Status
    Offline
    Join Date
    May 2010
    Posts
    4

    Red face Re: HTML Form with required fields

    Thanks for your quick response

    if you try to send the form emply it will no generate an error.

    Is there a way i can send you a personal email with the link?
    Last edited by vkareh; 05-19-2010 at 03:26 PM. Reason: more complite answer

  8. #8
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: HTML Form with required fields

    If you want that the form should check for values on the "comment" and "referral" textarea, you simply have to add the name of those form-elements on the required array:
    Code:
    var required=['firstname','lastname','email','comments',''referral'];
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  9. #9
    vkareh's Avatar
    New User

    Status
    Offline
    Join Date
    May 2010
    Posts
    4

    Wink Re: HTML Form with required fields

    But i just want some of the files on the form to be requierd.

  10. #10
    joshthegeek's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    1

    Question Re: HTML Form with required fields

    I realize this thread is somewhat dated, but hopefully someone is still watching it and can assist me.

    I am using a slightly modified version of the required field validation script rangana posted.

    If more than one field is required and the user leaves required fields blank, the user will receive alerts for fields that are required until the script reaches the first required field that has been populated, then the script ends and no more alerts are given.

    Examples using my code below.

    Scenario: User leaves all three fields blank.
    Result: User receives three alerts, one for each required field. The page does not print.

    Scenario: User populates the SenderName field but not the other two required fields
    Result: The user receives no alerts. The page is printed.

    Scenario: The user populates the SenderEmail field, but not the other two fields.
    Result: The user receives an alert that SenderName is required, but does not receive an alert that Dept is required. The page does not print.

    Code:
    <script type="text/javascript">
        window.onload = function() {
            var elForm = document.getElementsByTagName('form')[0]; // Get the first form in the document
            elForm.onsubmit = function() {
                var required = ['SenderName','SenderEmail','Dept'];
                // Place in this array the name of the form that you think should be mandatory
                var bool = true; // Create bool variable and set its value to true
                for (var i = 0; i < required.length; i++) {
                    if (document.getElementsByName(required[i])[0].value == '') {
                        alert(required[i] + ' is a required field.');
                        bool = false;
                    }
                    else {
                        window.print();
                        return false;
                    }
                }
                return bool;
            }
        }
    </script>

  11. #11
    hairtreatment's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2011
    Posts
    8

    Re: HTML Form with required fields

    you need a JavaScript validation like this one.

    HTML Code:
    <script>
    function ReqFields()
    {
      if(document.formname.fieldname=="")
      {
        alert('Pls input blahblah');
        return false;
      }
      else if(document.formname.fieldname2=="")
      {
        alert('Pls input blahblah');
        return false;
      }
        return true;
    }
    </script>
    
    <form method.....>
    ...
    ...
    <input type="submit" onsubmit="javascript:ReqFields()">
    </form>
    Last edited by HTML; 04-29-2011 at 06:07 AM.