博客

jQWidgets jqxValidator validationSuccess事件

  • Post category:jquery

当使用jQWidgets的jqxValidator插件进行表单验证时，当表单验证通过后，可以使用validationSuccess事件进行处理。下面是关于“jQWidgets jqxValidator validationSuccess事件”的完整攻略。

前置准备

在开始使用jqxValidator进行表单验证之前，需要在页面中引入以下两个文件：

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

然后我们需要创建一个包含验证规则的表单，并且实例化jqxValidator组件：

<form id="myForm">
  <div>
    <label for="email">Email</label>
    <input type="text" id="email" name="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" />
  </div>
  <div>
    <label for="repassword">Confirm Password</label>
    <input type="password" id="repassword" name="repassword" />
  </div>
  <button type="submit">Submit</button>
</form>

<script>
  $(document).ready(function () {
    $("#myForm").jqxValidator({
      rules: [
        { input: "#email", message: "Email is required!", action: "keyup, blur", rule: "required" },
        { input: "#email", message: "Email is not valid!", action: "keyup", rule: "email" },
        { input: "#password", message: "Password is required!", action: "keyup, blur", rule: "required" },
        { input: "#repassword", message: "Confirm password is required!", action: "keyup, blur", rule: "required" },
        {
          input: "#repassword", message: "Password do not match!", action: "keyup, focusout", rule: function (input) {
            var firstPassword = $("#password").val();
            var secondPassword = $("#repassword").val();
            return firstPassword == secondPassword;
          }
        }
      ]
    });
  });
</script>

这个例子中我们使用了5个验证规则，可以在提交表单之前验证表单中对应的输入框是否符合要求，如果不符合，则无法提交，并在相应位置显示验证失败的消息。

validationSuccess事件

当表单中的所有验证规则通过后，可以使用validationSuccess事件进行处理。以下是使用validationSuccess事件的示例：

$("#myForm").on("validationSuccess", function (event) {
  alert("Validation successful!");
});

这个例子中我们将在validationSuccess事件中展示一个简单的提示框，提示用户表单验证成功。

下面是另一个例子的使用validationSuccess事件来处理表单验证结果：

$("#myForm").on("validationSuccess", function (event) {
  $("#submitButton").removeAttr("disabled");
});

这个例子中validationSuccess事件被触发后，将启用表单提交按钮，让用户可以提交表单。

总之，使用validationSuccess事件可以很好的处理表单验证通过的情况，用于进一步处理验证成功后的逻辑，例如显示成功提示、启用提交按钮等等。

Tags: