Событие onblur, итерация по всем полям формы, не давая пользователю возможность вводить данные.

Я нахожусь в процессе написания контактной формы. У меня есть две функции JavaScript в голове (я буду перемещать их позже, но это другой вопрос).Событие onblur, итерация по всем полям формы, не давая пользователю возможность вводить данные.

Первая функция, Validate(), для события onblur, но не так, как хотелось бы. Вторая функция, formValidate(), для события onsubmit.

У меня есть оператор switch в функции JavaScript для использования в событии onblur HTML.

Код JavaScript:

<head> 
    <script type="text/javascript"> 
     function Validate() 
     { 
      // Create array containing textbox elements 
      var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')]; 

      // Loop through each element to see if value is empty 
      for (var i = 0; i<input.length; i++) 
      { 
       if (input[i].value == '') 
       { 
        switch(input[i].id){ 
         case 'fname': 
         alert ('enter you first name'); 
         break; 

         case 'lname' : 
         alert ('enter your last name'); 
         break; 

         case 'email1': 
         alert ('enter your email address'); 
         break; 

         case 'email2': 
         alert ('enter your email address'); 
         break; 

         case 'message': 
         alert ('write your message'); 
         break; 
        } 
       } 
      } 
     } 

     function formValidate() 
     { 
      // Create array containing textbox elements 
      var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')]; 
      var error; 

      // Loop through each element to see if value is empty. 
      for(var i = 0; i<inputs.length; i++) 
      { 
       if(inputs[i].value == '') 
       { 
        error = 'Please complete all fields.'; 
        alert(error); 
        return false; 
       } 
      } 
     } 
    </script> 
</head>

HTML-:

<form onsubmit="return formValidate()" action="mailto:[email protected]" method="post" id="contactForm" > 
    <fieldset> 
     <dl> 
      <dt> First Name:</dt> 
      <dd> 
       <input class="input" type="text" name="fname" id="fname" onblur="Validate()" /> 
      </dd> 
      <dt> Last Name:</dt> 
      <dd> 
       <input class="input" type="text" name="lname" id="lname" onblur="Validate()"/> 
      </dd> 
      <dt> Email Address:</dt> 
      <dd> 
       <input class="input" type="text" name="email1" id="email1" onblur="Validate()"/> 
      </dd> 
      <dt> Email Address:</dt> 
      <dd> 
       <input class="input" type="text" name="email2" id="email2" onblur="Validate()"/> 
      </dd> 
      <dt> Message:</dt> 
      <dd> 
       <textarea name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea> 
      </dd> 
      <dd> 
       <input type="submit" value="submit" name="submit" /> 
      </dd> 
     </dl> 
    </fieldset> 
</form>

Код работает, кроме этого: Когда я нажимаю на поле, я получаю следующее предупреждение:

JavaScript alert

Если я нажму, предотвратите всплывающие окна, предупреждения полностью прекратятся. Если я нажму «ОК», он перейдет к следующему полю, например, от имени fname до lname, и продолжится через поля, не позволяя пользователю вводить какие-либо данные.

Как исправить эту проблему?

источник

2013-06-13 Yvette Colomb

Я думаю, что это то, что вы хотите:

Demo

Вместо проверки всех входов ONBLUR, только подтверждение тот, который оставил фокус.Для этого я передал элемент в Validate(this) в встроенный код HTML. У вас также были проблемы с идентификатором элемента (например, ни одно поле сообщения). Я также добавил вызов .focus(), чтобы сохранить ввод в фокусе, если он недействителен.

function Validate(elem) { 
    // create array containing textbox elements 
    var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')]; 

    for (var i = 0; i < input.length; i++) 
    // loop through each element to see if value is empty 
    { 
     if (input[i].value == '' && elem.id == input[i].id) { 
      switch (input[i].id) { 

       case 'fname': 
        alert('enter you first name'); 
        break; 
       case 'lname': 
        alert('enter your last name'); 
        break; 
       case 'email1': 
        alert('enter your email address'); 
        break; 
       case 'email2': 
        alert('enter your email address'); 
        break; 
       case 'message': 
        alert('write your message'); 
        break; 
      } 

      elem.focus(); 
     } 
    } 
}

Я должен сказать, однако, что много alert() «с довольно противным, было бы гораздо лучше, если вы показываете пролет рядом с каждым из текстового поля с сообщением об ошибке вместо.

источник

2013-06-13 15:01:49 MrCode

Нет проблем. Я имел в виду показывать сообщение рядом с каждым текстовым полем, если оно неверно, вместо использования 'alert()'. Что-то вроде этого: http://cdn.tripwiremagazine.com/wp-content/uploads/images/stories/Articles/scripting-toolbox/validate.jpg – MrCode

Да, это была бы идея. – MrCode

Боюсь, вам нужно переосмыслить весь код проверки. Далее происходит:

пользователь вводит "Имя"
итерацию сценария через input массив
Round1: это fname OK -> да, следующий i
round2: это lname OK -> нет, показать предупреждение
round3: это email1 OK -> нет, показать предупреждение ...

Когда это повторится, и пользователь, наконец, может ввести следующее поле, вышеуказанный цикл будет выполнен снова, хотя на каждый новый цикл будет меньше одного предупреждения.

Простое исправление было бы что-то вроде этого:

function Validate(id) { 
    var errors = { 
     fname: 'enter you first name', 
     lname: 'enter your last name', 
     email1: 'enter your email address', 
     email2: 'enter your email address', 
     message: 'write your message' 
    }; 
    if (document.getElementById(id).value === '') { 
     if (id in errors) { 
      alert(errors[id]); 
     } 
    } 
    return; 
}

В HTML просто передать соответствующий id к Validate():

<input class="input" type="text" name="fname" id="fname" onblur="Validate('fname')" />

Однако, я нашел бы это некорректное поведение. Было бы более удобно, если бы вы сделали проверку на отправке и отмените отправку, если есть пустые поля.

источник

2013-06-13 14:52:15 Teemu

@Yvette Все в порядке. Обычно вы принимаете ответ, который собираетесь использовать в своем коде ... Хотя вы можете даже объединить эти два, используйте систему сообщений 'span' MrCode и мой объект' errors'. Кроме того, переключение или отсутствие принятия полностью является вашим собственным решением, вам не нужно извиняться за ваши выборы. Урок состоит в том, что вы не должны принимать ответы слишком рано:). – Teemu

Событие onblur, итерация по всем полям формы, не давая пользователю возможность вводить данные.

ответ

Смежные вопросы