0

我正在尝试为文本输入验证创建一个功能，但它不起作用。

Java脚本：

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>

有人能帮我一下吗？

4

1 回答 1

1

正如 Kevmo 提到的一个库，这里是一个使用jquery的快速而肮脏的例子。一旦你掌握了 javascript 的基础知识，看看 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(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-27T01:38:30.193 回答