JavaScript - 表單驗證

我正在嘗試爲文本輸入驗證及其不工作的功能。JavaScript - 表單驗證

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

誰能幫助我在這裏？

來源

2013-08-26 1ftw1

是'onBlur =「validateText（familyName）」'應該是'onBlur =「validateText（'familyName'）」'？ – kevmo314

是的，這是很好的眼睛:)非常感謝。 – 1ftw1

JS控制檯是你的朋友。 –

由於Kevmo提到了一個庫，這裏是一個快速和骯髒的例子，使用jquery。一旦你掌握了jQuery的基本知識，它會讓你的生活變得更輕鬆。

HTML並不是沒有到JavaScript函數和我們所需的字段的任何調用具有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 我我從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/

來源

2013-08-27 01:38:30

JavaScript - 表單驗證

回答

相關問題