CODEWITHSUNDEEP
javascripthtmltextarea
KingDave212
KingDave212

Reputation: 163

text validation doesn't work if textbox has something in it

I set up some javascript to make sure all fields in a form work filled. For the most part it worked, empty field, error message. My problem comes when the textarea has something in it, my form is submitted, even though other fields may be empty. here is my code so far:

<!doctype html>
<html>
    <head>
        <title>Employment</title>
        <link href="../printstyles.css" rel="stylesheet" type="text/css" media="print" />
        <link href="../morlanslayout.css" rel="stylesheet" type="text/css" media="screen" />

            <script type="text/javascript">

                function validateForm()
                {
                    var x=document.forms["jobapp"]["firstname"].value;
                    var x=document.forms["jobapp"]["lastname"].value;
                    var x=document.forms["jobapp"]["address"].value;
                    var x=document.forms["jobapp"]["city"].value;
                    var x=document.forms["jobapp"]["planet"].value;
                    var x=document.forms["jobapp"]["system"].value;
                    var x=document.forms["jobapp"]["cluster"].value;
                    var x=document.forms["jobapp"]["phone"].value;
                    var x=document.forms["jobapp"]["email"].value;
                    var x=document.forms["jobapp"]["resume"].value;

                    if (x==null || x=="")
                    {
                        alert("All fields must be filled in");
                        return false;
                    }
                }

            </script>

    </head>
    <body class="container">

        <div class="container">

        <header> 
            <a href="#"><img src="../images/small-4128-598652.png" alt="Insert Logo Here" width="180" height="90" id="Insert_logo" /></a>
        </header>

        <div class="sidebar1">

        <aside>

            <a href="../morlansfamousshop.html" title="Homepage">Homepage</a><br />
            <a href="../wares/morlansfamouswares.html" title="Wares">Wares</a><br />
            <a href="../history/morlansfamoushistroy.html" title="Company History">Company History</a><br />
            <a href="../support/morlansfamoussupport.html" title="Support">Support</a><br />
            <a href="../employment/morlansfamousjobs.html" title="Employment">Employment</a><br />
            <a href="../contact/morlansfamouscontactinfo.html" title="Contact Page">Contact Us</a><br />


        </aside>

        </div><!--end sidebar1-->

        <article class="content">
            <section>           
                <h1>Employment</h1>
                <p>Are you interested in employment at Morlans Famous Shop?, if you answered yes, just fill out the following form and Morlan will check out your qualifications.</p>
            </section>
            <section>
                <form name="jobapp" action="../support/thankyou.html" onsubmit="return validateForm()" method="post">
                    <fieldset>
                        <legend>Mailing Address</legend>
                            <label class="label" for="firstname">First Name:</label>
                                <input class="input" type="text" name="firstname" id="firstname"  size="25" maxlength="25" />
                                <br />
                            <label class="label" for="lastname">Last Name:</label>
                                <input class="input" type="text" name="lastname" id="lastname"  size="25" maxlength="25" />
                                <br />
                            <label class="label" for="address">Address:</label>
                                <input class="input" type="text" name="address" id="address"  size="100" maxlength="100" />
                                <br />
                            <label class="label" for="city">City/Station:</label>
                                <input class="input" type="text" name="city" id="city"  size="50" maxlength="50" />
                                <br />
                            <label class="label" for="planet">Planet:</label>
                                <input class="input" type="text" name="planet" id="planet"  size="50" maxlength="50" />
                                <br />
                            <label class="label" for="system">System:</label>
                                <input class="input" type="text" name="system" id="system"  size="50" maxlength="50" />
                                <br />
                            <label class="label" for="cluster">Cluster:</label>
                                <input class="input" type="text" name="cluster" id="cluster"  size="50" maxlength="50" />
                                <br />
                            <label class="label" for="phone">Phone Number:</label>
                                <input class="input" type="text" name="phone" id="phone"  size="50" maxlength="50" />
                                <br />
                            <label class="label" for="email">E-mail:</label>
                                <input class="input" type="email" name="email" id="email" maxlength="35" placeholder="[email protected]"/>
                    </fieldset>

                    <fieldset>
                        <legend>Job Applies To (check all that apply)</legend>

                            <input type="checkbox" name="job" id="shipping" value="shipping" checked="checked"/>
                                <label for="shipping">Shipping</label>
                                <br />
                            <input type="checkbox" name="job" id="cashier" value="cashier" />
                                <label for="cashier">Cashier</label>
                                <br />
                            <input type="checkbox" name="job" id="security" value="security" />
                                <label for="security">Security</label>
                                <br />  
                    </fieldset>

                    <label for="resume">Paste Resume Here</label>
                        <br />
                        <textarea name="resume" id="resume" rows="10" cols="60" placeholder="Please enter your resume here."></textarea><!--end textareas on the same line that they start-->
                        <br />


                    <input type="submit" value="Submit" />
                    <input type="reset" value="Reset" />




            </section>

        </article>

        <footer>
          <p>This is an <a href="http://www.luzerne.edu" title="LCCC website" target="_blank">LCCC</a> project for <a href="http://cis.luzerne.edu/~ds0002/cis146/index" title="My website for CIS 146" target="_blank">CIS146</a></a></p>
        </footer>

        </div><!--end container-->

    </body>
</html>

any help would be much appreciated

Upvotes: 0

Views: 135

Answers (4)

skos
skos

Reputation: 4212

You can also modify below code to suit your needs

function validateForm()
{
    var allFormElements = Array.prototype.slice.call( document.getElementsByTagName('input') ).concat (Array.prototype.slice.call( document.getElementsByTagName('textarea') ) );

    for (var i = 0; i < allFormElements.length; i++)
    {
        if (allFormElements[i].value == "")
        {
           alert("You must fill in all fields");
           return false;
        }
    }
}

Upvotes: 0

DutGRIFF
DutGRIFF

Reputation: 5223

You are replacing x every time you say var x=someField. What you want to do is assign each to a new variable then check all of them. You can do this with an array. Try something like this. 

function validateForm(){
  var x = new Array();
  x.push(document.forms["jobapp"]["lastname"].value);
  x.push(document.forms["jobapp"]["address"].value);
  x.push(document.forms["jobapp"]["city"].value);
  x.push(document.forms["jobapp"]["planet"].value);
  x.push(document.forms["jobapp"]["system"].value);
  x.push(document.forms["jobapp"]["cluster"].value);
  x.push(document.forms["jobapp"]["phone"].value);
  x.push(document.forms["jobapp"]["email"].value);
  x.push(document.forms["jobapp"]["resume"].value);

  for(var i = 0; i < x.length; i++){
    if (x[i]==null || x[i]==""){
      alert("All fields must be filled in");
      return false;
    }
  }
}

The above code will alert once for every field that you left empty so it isn't the best but it fixes your issue.

You may want to set a bool if a field is empty and alert once we have tested every field:

var fieldIsEmpty = false;
for(var i = 0; i < x.length; i++){
  if (x[i]==null || x[i]==""){
    fieldIsEmpty = true;
  }
}
if(fieldIsEmpty) {
  alert("All fields must be filled in");
  return false;
}

Also, alert can get really annoying. For instance if you left every field empty with the first code above. console.log("All fields must be filled in") would be nice for testing.

Upvotes: 0

Sunil Gudivada
Sunil Gudivada

Reputation: 184

you are using same variable for all the fields, so eventough firstname or lastname empty and next field is not empty the variable will not be null, so you are supressing the validation

use if condition for every field instead of once in end of the loop

like below

<script type="text/javascript">

            function validateForm()
            {
                var x=document.forms["jobapp"]["firstname"].value;
                if (x==null || x=="")
                {
                    alert("firstname must be filled in");
                    return false;
                }
                x=document.forms["jobapp"]["lastname"].value;
               if (x==null || x=="")
                {
                    alert("lastname must be filled in");
                    return false;
                }
                ......
                ......
            }

        </script>

Upvotes: 1

Innovation
Innovation

Reputation: 1534

First create array of values:

var x = {};

Now get all the values of forms and push it in x.

x.push(document.forms["jobapp"]["firstname"].value);

Now use loop to validate

for(i in x){

    if(x[i] == null||x[i] ==""){

     alert("whatever you want to alert");
     return false;
}}

also I want to tell you that x[i] == "" will not work if user provide any space.So use x[i].trim() == "".

Upvotes: 1

Related Questions