jQuery Mobile表单验证 [英] jQuery Mobile Form Validation

问题描述

我有一个移动网站，除验证外，其他一切工作正常.基本上，我希望从用户那里获取值，然后在单独的页面(process.php)上对其进行处理.但是，在执行此操作之前，我需要检查以确保已填充字段.我研究了几种方法来执行此操作，但是似乎没有一种方法有效.我现在有下面的代码.当我按下处理"按钮时，即使项目字段为空，它也带我进入process.php初始屏幕.它不会写入数据库，但我希望它不会将用户带到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>

解决方案

对于这样的小表格，我不会打扰使用插件-它甚至与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;
    }
});

> 您可以在此处尝试使用它.

I have a mobile website and everything is working fine except for the validation. Basically I'm looking to take values from the user and then process them on a separate page (process.php). However, before doing so I need to check to make sure the fields have been populated. I have looked at several ways to do this but none seem to be working. I have the below code at the moment. When I press the process button it brings me through to the process.php splash screen even though the item field is empty. It doesn't write to the database but I would rather it didn't bring the user to the process.php screen until all mandatory fields have been filled in. Any ideas?

<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>

解决方案

For a small form like that, I wouldn't bother using a plugin - is it even compatible with jQuery Mobile? Anyway, to get you started, here's a simple way to prevent submission when there are empty fields:

$("#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;
    }
});

You can try it/mess with it here.

这篇关于jQuery Mobile表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！