用div验证

时间:2017-02-14 10:26:48

标签: javascript jquery html css

如何使用div类名(class_valid)而不是id(id_valid)来做同样的事情

  

我想使用类名验证这一点   验证

function RequireValidator() {
  var name = document.getElementById('Name').value;
  if (name == "") {

    //here i want to use class name 
    id_valid.textContent = "Not valid";

    document.getElementById('id_valid').style.width = "100%";
    document.getElementById('id_valid').style.background = "#fff3c9";
    document.getElementById('id_valid').style.padding = "10px";

    Name.focus();
    return false;
  }
}
#container {
  margin: 100px auto 0px auto;
  width: 500px;
  display: block;
  position: relative;
}
body {
  background-color: #37474F;
}
#form-container {
  background: #fff;
  padding: 37px;
  border-radius: 5px;
}
.input_controls {
  padding: 10px;
  font-size: 1em;
  width: 200px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.label {
  font-size: 1em;
}
table {
  width: 100%;
}
.class_valid {
  font-size: 20px;
}
<form id="form1" runat="server">
  <div id="container">
    <div id="form-container">
      <table>
        <tr>
          <td>
            <asp:Label runat="server" CssClass="label" Text="Name : "></asp:Label>
          </td>
          <td colspan="2">
            <input type="text" class="input_controls" id="TextBox1" placeholder="Enter Name" onblur="RequireValidator()" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div id="id_valid" class="class_valid"></div>
          </td>
        </tr>
        <tr>
          <td>
            <asp:Label runat="server" class="label" Text="Name Name : "></asp:Label>
          </td>
          <td>
            <input type="text" class="input_controls" id="TextBox1" placeholder="Enter Name" onblur="RequireValidator()" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </div>
  </div>

</form>

如何使用div类名(class_valid)而不是id(id_valid)

来做同样的事情

1 个答案:

答案 0 :(得分:0)

你的意思是通过类名获得一个元素?如果是这样,这应该对你有用:

var yourclass = document.getElementsByClassName('class_valid');

修改 尝试在if语句中检查变量是否为null:

var name = document.getElementsByClassName('.input_controls').value;

if ((name == "") || (name == null)) {
  // Your validation
}

以上对我有用