Master-X
Форум | Новости | Статьи
Главная » Форум » Программинг, Скрипты, Софт, Сервисы » 
Тема: JavaScript проверка заполнения полей формы
цитата
12/01/12 в 00:39
 Vyacheslav
Есть форма всего из 2х полей. Код:
<form method="POST" id="myform" action="http://bla.bla">

<input type="text" name="username" />
<input type="text" name="password" />

<input type="submit" value="Click Here" />
</form>
Всего-то нужно проверить заполнены ли они более чем 6тью символами каждый при нажатии кнопки сабмит.
Использовать ли под это дело jQuery Validation, jQuery Form или можно обойтись более простым методом?
Если можно обойтись без jQuery, то подскажите плз направление или кусок кода. Как реакцию на пустые поля (или<6) достаточно диалога alert и не пропустить форму на action.
цитата
12/01/12 в 01:43
 shar
Код:
<script type="text/javascript">
function check () {

   if ( document.forms[0].username.value.length < 6 ) {
      
      alert('Username must be at least 6 symbols in length.');
      return false;
      
   }
   else if ( document.forms[0].password.value.length < 6 ) {
      
      alert('Password must be at least 6 symbols in length.');
      return false;
      
   }
   
   return true;
   
}
</script>

<form method="POST" id="myform" action="http://bla.bla" onSubmit="return check();">

<input type="text" name="username" />
<input type="text" name="password" />

<input type="submit" value="Click Here" />
</form>
цитата
12/01/12 в 01:46
 Mika
Код:

function check() {
if ((document.getElementById('username').value.length < 6) || (document.getElementById('password').value.length < 6)) {
   alert('username and password must be at least 6 chars long');
   return false;
   }
}
</script>

<form method="POST" id="myform" action="http://bla.bla" onSubmit="return check()">
<input type="text" name="username" id="username" />
<input type="text" name="password" id="password" />
<input type="submit" value="Click Here" />
</form>
цитата
12/01/12 в 03:55
 Vyacheslav
А можно так (вместо forms[0] - getElementById('myform'))?
Оно то работает но насколько это корректный\кроссбраузерный код:
Код:

<script type="text/javascript">
function check () {

   if ( document.getElementById('myform').username.value.length < 6 ) {
      alert('Username must be at least 6 symbols in length.');
      return false;
   }
   else if ( document.getElementById('myform').password.value.length < 6 ) {
      alert('Password must be at least 6 symbols in length.');
      return false;
   }

   return true;

}
</script>

<form method="POST" id="myform" action="http://bla.bla" onSubmit="return check();">

<input type="text" name="username" />
<input type="text" name="password" />

<input type="submit" value="Click Here" />
</form>


Первый вариант более подошёл, так как он конкретно указывает какое из полей заполнено не верно и не вынуждает добалять в форму дополнительных надстроек в виде id для полей input.. Хотя воторой вариант заметно короче.
Вот только form[0] не понравилось при наличии уже готового id="myform" у формы.
цитата
12/01/12 в 05:57
 Yacc
Код:
<html>
   <head>
      <script>
      function ValidateMyForm() {
         var name = document.MyForm.Name;
         var password = document.MyForm.Password
         if (name.value.length < 6) {
            window.alert("name.value.length < 6");
            name.focus();
            return false;
         }
         if (password.value.length < 6) {
            window.alert("password.value.length < 6");
            password.focus();
            return false;
         }
         return true;
      }
      </script>
   </head>
<body>
   <form method="post" action="" name="MyForm" onsubmit="return ValidateMyForm();">
      <p>Name: <input type="text" name="Name"></p>
      <p>Password:  <input type="password" name="Password"></p>
      <p><input type="submit" value="Send" name="submit"></p>
   </form>
</body>
</html>
цитата
12/01/12 в 06:02
 webboxxx
Vyacheslav писал:
А можно так (вместо forms[0] - getElementById('myform'))?
Оно то работает но насколько это корректный\кроссбраузерный код


кроссбраузернее некуда icon_wink.gif пользуй
цитата
12/01/12 в 08:37
 freeek
К текстовым полям можно и по имени обращаться, а функцию изолировать, передавая туда форму.
Код:
<html>
    <head><title>Form</title></head>
    <body>

        <script type="text/javascript">
            function isValid(myForm){
                if(myForm.elements["username"].value.length < 6 || myForm.elements["password"].value.length < 6){
                    alert('username and password must be at least 6 chars long');
                    return false;
                }
                return true;
            }
        </script>

        <form method="post" id="myform" action="http://google.com/">
            <input type="text" name="username" id="username" value=""/>
            <input type="text" name="password" id="password" value="" />
            <input type="submit" value="Click Here" onclick="return isValid(this.form)" />
        </form>
    </body>
</html>


Эта страница в полной версии