动态Javascript表单验证

时间:2014-12-10 14:21:09

标签: javascript

enter image description here请关注我,因为我是JavaScript的初学者!

我有一个从数据库中提取信息的动态表单。对于数据库中的每一行,都有一行新的表单字段,而选择名称包含数据库中的id - 这些都在同一个表单上,例如

<select name="supplier<%=objRst.fields("returnpartid")%>" id="supplier<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">

 <select name="STOCKACTION<%=objRst.fields("returnpartid")%>" id="STOCKACTION<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">

          <select name="stockreason<%=objRst.fields("returnpartid")%>" id="stockreason<%=objRst.fields("returnpartid")%>">


<select name="creditaction<%=objRst.fields("returnpartid")%>" id="creditaction<%=objRst.fields("returnpartid")%>" onchange="validatelink3(<%=objRst.fields("returnpartid")%>)">

    <select name="rejectreason<%=objRst.fields("returnpartid")%>" id="rejectreason<%=objRst.fields("returnpartid")%>">

用户在保存记录时当前缺少数据,我想阻止这一点,保存按钮一次性保存所有记录,因此如果尚未处理,某些行将完全为空。

如果用户已经开始填写该行但未完成该记录的所有信息,那么我需要停止表单提交。

enter image description here

1 个答案:

答案 0 :(得分:0)

看看Parsley。我使用它来验证我的登录并创建我的网站的用户页面。让我知道你对它的看法!

这是一个很棒的javascript工具,它利用jQuery来验证不同的表单。它非常好,因为你可以让它验证几个不同的东西,如最大和/或最小文本长度。它很容易实现,因为您需要做的就是将标识符添加到HTML元素中。

修改

为避免仅链接回答,以下是可能有用的代码。

<form id="demo-form" data-parsley-validate>
  <label for="question">Do you code? *</label>
  <p>
    <input type="radio" name="question" value="true" required /> Yes
    <input type="radio" name="question" value="false" /> No
  </p>

  <label for="languages">If yes, in which language(s)?</label>
  <input type="text" class="form-control" name="languages" data-parsley-conditionalrequired='["    [name=\"question1\"]:checked", "yes"]' data-parsley-validate-if-empty data-parsley-success-class=""     data-parsley-conditionalrequired-message="This value is required since you are a programmer!" />

  <label for="question">Do you eat dog food? *</label>
  <p>
    <input type="radio" name="question2" value="yes" required /> Yes
    <input type="radio" name="question2" value="no" /> No
  </p>

  <label for="why">If no, why?</label>
  <input type="text" class="form-control" name="why" data-parsley-conditionalrequired='["    [name=\"question2\"]:checked", "no"]' data-parsley-validate-if-empty data-parsley-success-class=""     data-parsley-conditionalrequired-message="This value is required since you do not eat dog food!" />

  <input type="submit" class="btn btn-default pull-right" />
</form>

<script type="text/javascript">
  window.ParsleyConfig = {
    validators: {
      conditionalrequired: {
        fn: function (value, requirements) {
          // if requirements[0] value does not meet requirements[1] expectation, field is required
          if (requirements[1] == $(requirements[0]).val() && '' == value)
          return false;

          return true;
        },
        priority: 32
      }
    }
  };
</script>
<script type="text/javascript" src="../../dist/parsley.js"></script>

编辑2:

这也是一个简单的html文件,可以做一些我认为你想要的东西:

<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
    color: red;
}
</style>
</head>
<body>

<h1>Hello World</h1>
<input id="test" type="checkbox" id="chk"/>asdfad
<form>
<textarea></textarea>
<button onclick="myFunction()">asd</button>
<form>

<p>If the check box is check the thing is required and if the box is not check then it is not     required. So tell your form to only save the rows that have the box checked?</p>

<script>
function myFunction() {
if(document.getElementById("test").checked){
    document.getElementsByTagName("textarea")[0].setAttribute("required", "true"); 
}
else{
    document.getElementsByTagName("textarea")[0].removeAttribute("required");
}

}
</script>

</body>
</html>