проверка текста не работает, если в текстовом поле есть что-то

0

Я создал несколько javascript, чтобы убедиться, что все поля в форме заполнены. По большей части это работало, пустое поле, сообщение об ошибке. Моя проблема возникает, когда в textarea есть что-то в ней, моя форма отправляется, хотя другие поля могут быть пустыми. вот мой код:

<!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>

Любая помощь приветствуется

  • 0
    Почему вы всегда используете одно и то же имя переменной. Это будет переопределять каждый раз. Я думаю, что этот код никогда не будет работать.
  • 3
    Вы тестируете только последнее поле. var x=document.forms["jobapp"]["resume"].value; заменяет каждый предыдущий х.
Теги:
textarea

4 ответа

1
Лучший ответ

Сначала создайте массив значений:

var x = {};

Теперь получите все значения форм и нажмите на x.

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

Теперь используйте цикл для проверки

for(i in x){

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

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

также я хочу сказать вам, что x [i] == "" не будет работать, если пользователь предоставит какое-либо пространство. Используйте x [i].trim() == "".

Поделиться
  • 1
    Вы заслужили галочку. Хорошая trim() наконечник тоже.
  • 0
    Вы должны использовать этот ответ, так как он избегает много дублирования кода.
Показать ещё 1 комментарий
1

вы используете одну и ту же переменную для всех полей, поэтому eventough firstname или lastname empty и следующее поле не пусто, переменная не будет равна null, поэтому вы подавляете проверку

использовать, если условие для каждого поля вместо одного раза в конце цикла

как ниже

<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>
Поделиться
  • 0
    Спасибо, что сделал это.
  • 0
    столько дублирования кода
Показать ещё 1 комментарий
0

Вы также можете изменить код ниже в соответствии с вашими потребностями

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;
        }
    }
}
Поделиться
0

Вы заменяете x каждый раз, когда говорите var x=someField. То, что вы хотите сделать, это назначить каждому новую переменную, а затем проверить все. Вы можете сделать это с помощью массива. Попробуйте что-то вроде этого.

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;
    }
  }
}

Вышеупомянутый код будет предупреждать один раз для каждого поля, которое осталось пустым, поэтому оно не лучшее, но оно устраняет вашу проблему.

Вы можете установить bool, если поле пустое и предупреждение, как только мы проверили каждое поле:

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;
}

Кроме того, предупреждение может стать очень раздражающим. Например, если вы оставили каждое поле пустым с первым кодом выше. console.log("All fields must be filled in") было бы неплохо для тестирования.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню