jQuery Mobile Form Validation

Question

我有一个移动网站,除验证外,一切正常.基本上我想从用户那里获取值,然后在单独的页面上处理它们(process.php).但是,在这样做之前,我需要检查以确保已填充字段.我已经看过几种方法来做到这一点,但似乎没有一种方法可行.我现在有以下代码.当我按下进程按钮时,它会将我带到process.php启动画面,即使item字段为空.它不会写入数据库,但我宁愿它没有将用户带到process.php屏幕,直到填写了所有必填字段.任何想法？

<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<script>
  $(document).ready(function(){
  $("#formL").validate(); });
</script>



<div data-role="content">

      <form id="formL" action="/website/process.php" method="post">
      <div data-role="fieldcontain">
        <label for="item">
        <em>* </em> <b>Item:</b> </label>
        <input type="text" id="item" name="item" class="required" />
      </div>

      <div class="ui-body ui-body-b">
        <button class="buttonL" type="submit" data-theme="a">Process</button>
      </div>
    </form>

</div>

Answer 1

对于像这样的小形式,我不打算使用插件 - 它甚至与jQuery Mobile兼容吗？无论如何,为了让你开始,这里有一个简单的方法来防止在有空字段时提交:

$("#formL").submit(function() {

    // get a collection of all empty fields
    var emptyFields = $(":input.required").filter(function() {

        // $.trim to prevent whitespace-only values being counted as 'filled'
        return !$.trim(this.value).length;
    });

    // if there are one or more empty fields
    if(emptyFields.length) {

        // do stuff; return false prevents submission
        emptyFields.css("border", "1px solid red");   
        alert("You must fill all fields!");
        return false;
    }
});

你可以在这里尝试/搞乱它.