JavaScript - Проверка формы

Question

Я пытаюсь сделать функцию для проверки ввода текста и ее не работает.

JavaScrip:

function validateText(id) 
    { 

    var x=document.forms["myForm"][id].value; 
if (x==null || x=="") 
    { 
    var text = id+"Text"; 
    document.getElementById(text).style.visibility ="visible"; 

    }else { 
    var text = id+"Text"; 
    document.getElementById(text).style.visibility="hidden"; 


     } 
    } 

Html:

<label for="familyName">Family name</label> 
<input type="text" id="familyName" id="familyName" onBlur="validateText(familyName)"> 
<p id="familyNameText">Test 123</p> 

Может кто-нибудь помочь мне здесь?

Answer 1

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

HTML не отсутствие на любые вызовы яваскрипта функций и наши необходимые поля имеют required класс

<form id="formToValidate"> 
    <label for="familyName">Family name</label> 
    <input type="text" id="familyName" id="familyName" class="required"> 
    <p class="requiredText">Family Name Required</p> 
    <label for="familyName">First name</label> 
    <input type="text" id="firstName" id="firstName" class="required"> 
    <p class="requiredText">First Name required</p> 
    <label for="familyName">Dogs' name</label> 
    <input type="text" id="dogName" id="dogName"> 
</form> 

CSS Просто некоторые основы

.requiredText { 
    display:none; 
    color:#F00; 
} 
label { 
    display:inline-block; 
    width:20%; 
} 
.required { 
    border-color:#F33; 
} 

input { 
    width:60%; 
    border:solid 1px #CCC; 
    margin-top:5px; 
} 

Javascript Я ve использовал следующее из jquery:

• Document ready
• Selectors
• Value
• Blur Event Handler
• Next

• SlideDown/Up

  $(document).ready(function() { /* Execute when DOM is loaded */ 
  /*Assign blur event handler to fields with required class */ 
  /*I have used the id of the form (#formToValidate) to scope the selctor. 
      Not required but a good practice*/ 
      $("#formToValidate .required").blur(function() { 
       if ($(this).val() === "") { /*Check the value of the item being blured"*/ 
        $(this).next(".requiredText").slideDown('fast'); /* Slide down the nearest alert text sibling*/ 
       } else { 
        $(this).next(".requiredText").slideUp('fast'); /* Slide up the nearest alert text sibling*/ 
       } 
      }); 
  }); 
  

Смотрите этот рабочий пример: http://jsfiddle.net/9Mb29/