0

I've tried everything and the form validation javascript still is not working inside my html document. Can anyone one tell me what is wrong here because i can not find it.

Here is the javascript and html code shown below to show that i am doing it correctly but it still is not working.

<script type="text/javascript" language="javascript">

function validateForm() {

    var fname = document.getElementById("firstname").value;
    var lname = document.getElementById("lastname").value;
    var month = document.getElementById("month").value;
    var day = document.getElementById("day").value;
    var year = document.getElementById("year").value;
    var bio = document.getElementById("bio").value



    if (fname == null || fname == ""){
        alert("Firstname not filled out.");
        return false;
    }

    if (lname == null || lname == ""){
        alert("Lastname not filled out");
        return false;

    }

    if (month == null || month == ""){
        alert("Birthday not filled out");
        return false;
    }

    if (day == null || day == ""){
        alert("Birthday not filled out");
        return false;
    }

    if (year == null || year == ""){
        alert("Birthday not filled out");
        return false;
    }

    if (bio == null || bio == ""){
        alert("About me not filled out");
        return false;
    }

}


</script>

<form class="form-horizontal" method="POST" action="userinfo" name="update" onsubmit="return validateForm()">
                <div class="form-group">
                <label class="control-label col-sm-3">First Name:</label>
                <div class="col-xs-5">
                    <input type="text" class="form-control" name="firstname" id="firstname"></input>
                </div>
                </div>
                <div class="form-group">
                <label class="control-label col-sm-3">Last Name:</label>
                <div class="col-xs-5">
                    <input type="text" class="form-control" name="lastname" id="lastname"></input>
                </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">Email:</label>
                    <div class="col-xs-5">
                        <input type="email" class="form-control" name="email" id="email"></input>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">Sex:</label>
                    <label class="radio-inline"><input type="radio" name="optradio">Male</label>
                    <label class="radio-inline"><input type="radio" name="optradio">Female</label>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">Status:</label>
                    <div class="col-xs-4">
                        <select class="form-control" name="stat">
                            <option></option>
                            <option>Single</option>
                            <option>In a relationship</option>
                            <option>Married</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                <label class="control-label col-sm-3">Birthday:</label>
                <div class="col-xs-3">
                <select class="form-control" name="month">
                    <option></option>
                    <option>January</option>
                    <option>Febuary</option>
                    <option>March</option>
                    <option>April</option>
                    <option>May</option>
                    <option>June</option>
                    <option>July</option>
                    <option>August</option>
                    <option>September</option>
                    <option>October</option>
                    <option>November</option>
                    <option>December</option>
                </select>
                </div>
                <div class="col-xs-2">
                <select class="form-control" name="day">
                    <option></option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
                </div>
                <div class="col-xs-2">
                <select class="form-control" name="year">
                    <option></option>
                    <option>2015</option>
                    <option>2014</option>
                    <option>2013</option>
                    <option>2012</option>
                    <option>2011</option>
                    <option>2010</option>
                    <option>2009</option>
                    <option>2008</option>
                    <option>2007</option>
                    <option>2006</option>
                    <option>2005</option>
                    <option>2004</option>
                    <option>2003</option>
                    <option>2002</option>
                    <option>2001</option>
                    <option>2000</option>
                    <option>1999</option>
                    <option>1998</option>
                    <option>1997</option>
                    <option>1996</option>
                    <option>1995</option>
                    <option>1994</option>
                    <option>1993</option>
                    <option>1992</option>
                    <option>1991</option>
                    <option>1990</option>
                    <option>1989</option>
                    <option>1988</option>
                    <option>1987</option>
                    <option>1986</option>
                    <option>1985</option>
                    <option>1984</option>
                    <option>1983</option>
                    <option>1982</option>
                    <option>1981</option>
                    <option>1980</option>
                </select>
                </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">About Me:</label>
                <div class="col-xs-5">
                    <textarea class="form-control" rows="3" name="bio" id="bio"></textarea><br>
                </div>
                </div>
                <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
Improve this question
3
  • Is this really the smallest repro you can do to demonstrate the problem? Reduce it to only include one field and one validation if that also causes problems, because then it is much simpler to check your code. Commented Dec 11, 2015 at 7:30
  • I decided to show the who thing for some reason, but what could cause the javascript to not work? Commented Dec 11, 2015 at 7:45
  • the problem is more of the submit button you need to add the id to the <select> because in your scripts you recovered the values of <select> with getElementById Commented Dec 11, 2015 at 7:52

2 Answers 2

Reset to default
2

hi your script is very good, but your html should be something like this worked demo: more of the submit button you need to add the id to the <select> because in your scripts you recovered the values of <select> with getElementById

   <form class="form-horizontal" method="POST" action="userinfo" name="update" onsubmit="return validateForm()">
            <div class="form-group">
            <label class="control-label col-sm-3">First Name:</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" name="firstname" id="firstname"/>
            </div>
            </div>
            <div class="form-group">
            <label class="control-label col-sm-3">Last Name:</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" name="lastname" id="lastname"/>
            </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">Email:</label>
                <div class="col-xs-5">
                    <input type="email" class="form-control" name="email" id="email"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">Sex:</label>
                <label class="radio-inline"><input type="radio" name="optradio">Male</label>
                <label class="radio-inline"><input type="radio" name="optradio">Female</label>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">Status:</label>
                <div class="col-xs-4">
                    <select class="form-control" id="stat" name="stat">
                        <option></option>
                        <option>Single</option>
                        <option>In a relationship</option>
                        <option>Married</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
            <label class="control-label col-sm-3">Birthday:</label>
            <div class="col-xs-3">
            <select class="form-control" id="month" name="month">
                <option></option>
                <option>January</option>
                <option>Febuary</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
            </div>
            <div class="col-xs-2">
            <select class="form-control" id="day" name="day">
                <option></option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
                <option>13</option>
                <option>14</option>
                <option>15</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
                <option>19</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
                <option>24</option>
                <option>25</option>
                <option>26</option>
                <option>27</option>
                <option>28</option>
                <option>29</option>
                <option>30</option>
                <option>31</option>
            </select>
            </div>
            <div class="col-xs-2">
            <select class="form-control" id="year" name="year">
                <option></option>
                <option>2015</option>
                <option>2014</option>
                <option>2013</option>
                <option>2012</option>
                <option>2011</option>
                <option>2010</option>
                <option>2009</option>
                <option>2008</option>
                <option>2007</option>
                <option>2006</option>
                <option>2005</option>
                <option>2004</option>
                <option>2003</option>
                <option>2002</option>
                <option>2001</option>
                <option>2000</option>
                <option>1999</option>
                <option>1998</option>
                <option>1997</option>
                <option>1996</option>
                <option>1995</option>
                <option>1994</option>
                <option>1993</option>
                <option>1992</option>
                <option>1991</option>
                <option>1990</option>
                <option>1989</option>
                <option>1988</option>
                <option>1987</option>
                <option>1986</option>
                <option>1985</option>
                <option>1984</option>
                <option>1983</option>
                <option>1982</option>
                <option>1981</option>
                <option>1980</option>
            </select>
            </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-3">About Me:</label>
            <div class="col-xs-5">
                <textarea class="form-control" rows="3" name="bio" id="bio"></textarea><br>
            </div>
            </div>
            <div class="form-group"></div>
            <div class="col-sm-offset-2 col-sm-10"></div>
             <div class="col-sm-offset-2 col-sm-10"><input type="submit"/></div>
        </form>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I would add this info to the beginning of your answer
thanks but i already had the submit button at the end i just accidentally didn't show it on here
the problem is more of the submit button you need to add the id to the <select> because in your scripts you recovered the values of <select> with getElementById
1

All your html select set the wrong property Try:

<select class="form-control" name="month">

set to :

<select class="form-control" id="month">
Improve this answer

2 Comments

I have both name= and id on there
I didn't see it in your code(select component), if you call getElementById() you must set a id property. @aitnasser has marked for you

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.