IBM Worklight - 使用 jQuery 进行表单验证

Question

如何使用 jQuery 验证来验证表单元素，即 .validate().
我有以下代码：

$('#form1').validate({

});

我要检查用户名和密码不能为空，
新密码和重新输入的密码要匹配，等等

Answer 1

你问错问题了。简单地说（根据问题提供的上下文）你没有阅读 and/or 理解文档。 jQuery Validation Plugin 使用您为表单元素提供的 HTML 属性来执行它自己的验证。因此，如果您的标记正确，那么您的 .validate() 应该可以工作。

$(function() {
  $('#commentForm').validate({
    submitHandler: function() {
      alert('Fake Submit');
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name.</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

见jQuery Validation Plugin Documentation for more examples。

Answer 2

使用 MobileFirst Platform 6.3，Sukima 的答案中的代码对我来说工作得很好，有以下 setup-related 更改：

已下载 jQuery Validation plug-in
已将 plug-in-folder\dist\jquery.validate.js 复制到 my-project\apps\my-app\common\js

添加到 common\index.html 的头部：

...
...
<script src="js/jquery.validate.js"></script>

在common\index.html的BODY中：

<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <legend>Please provide your name.</legend>
       <p>
           <label for="cname">Name (required, at least 2 characters)</label>
           <input id="cname" name="name" minlength="2" type="text" required>
       </p>
       <p>
           <input class="submit" type="submit" value="Submit">
       </p>
    </fieldset>
 </form>

在common\js\main.js中：

function wlCommonInit(){
    $('#commentForm').validate({
        submitHandler: function() {
            alert('Fake Submit');
        }
    });
}

运行作为 > 运行 on MobileFirst Development Server
已打开 MobileFirst Console > 预览常用 Web 资源

尝试使用 1 或 3 个字符；验证有效。

IBM Worklight - 使用 jQuery 进行表单验证

IBM Worklight - Form validation using jQuery

javascript

validation

jquery

ibm-mobilefirst