jQuery Mobile 表单验证

Question

我有一个移动网站，除了验证之外一切正常。基本上我希望从用户那里获取值，然后在单独的页面（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>

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;
    }
});

You can try it/mess with it here.

Answer 2

我遇到了同样的问题，我的表单现在可以正确验证。

以下是我使用 Jquery Mobile 所做的 -->

<link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/list.css">
<!--For Icon to bookmark on phones-->
<link rel="apple-touch-icon-precomposed" href=""/>

<script>     

var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
var stateLabelVar = null;
var whatLabelVar = null;
var stateVar = null;
var whatVar = null;
var form1var = null;
var confirmationVar = null;
var contentDialogVar = null;
var hdrConfirmationVar = null; 
var contentConfirmationVar = null;
var ftrConfirmationVar = null;
var inputMapVar = null;

// Constants
var MISSING = "missing";
var EMPTY = "";
var NO_STATE = "ZZ";
</script>

<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">

</div>

<div  data-role="content" id="logo" align="center">
<img src="img/sam_mobile.png">
</div>

<div data-role="content" id="contentMain" name="contentMain">   

<form id="form1">

<div id="userDiv" data-role="fieldcontain">
    <label for="userName">User Name*</label>        
    <input id="userName" name="userName_r" type="text" />
</div>

<div id="passwordDiv" data-role="fieldcontain">
    <label for="password" id="passwordLabel" name="passwordLabel">Password*</label>     
    <input id="password" name="password_r" type="password" />
</div>

<div id="submitDiv" data-role="fieldcontain">    
 <input type="submit" value="Login" data-inline="true"/>
</div>
</form>
</div><!-- contentMain -->

<div data-role="footer" id="ftrMain" name="ftrMain"></div>

<div align="CENTER" data-role="content" id="contentDialog" name="contentDialog">    

    <div>You must fill in both a user name and password to be granted access.</div>
         <a id="buttonOK" name="buttonOK" href="#page1" data-role="button" data-inline="true">OK</a>
</div>  <!-- contentDialog -->

         <!-- contentTransition is displayed after the form is submitted until a response is received back. -->
<div data-role="content" id="contentTransition" name="contentTransition">   
    <div align="CENTER"><h4>Login information has been sent. Please wait.</h4></div>
    <div align="CENTER"><img id="spin" name="spin" src="img/wait.gif"/></div>
</div>  <!-- contentTransition -->

<div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div> 


<script>

$(document).ready(function() {
//Assign global variables from top of page
  hdrMainVar = $('#hdrMain');
  contentMainVar = $('#contentMain');
  ftrMainVar = $('#ftrMain');
  contentTransitionVar = $('#contentTransition');
  stateLabelVar = $('#stateLabel');
  whatLabelVar = $('#whatLabel');
  stateVar = $('#state');
  whatVar = $('#what');
  form1Var = $('#form1');
  confirmationVar = $('#confirmation');
  contentDialogVar = $('#contentDialog');
  hdrConfirmationVar = $('#hdrConfirmation');
  contentConfirmationVar = $('#contentConfirmation');
  ftrConfirmationVar = $('#ftrConfirmation'); 
  inputMapVar = $('input[name*="_r"]');

  hideContentDialog();
  hideContentTransition();
  hideConfirmation();



}); 

  $('#buttonOK').click(function() {
  hideContentDialog();
  showMain();
  return false;      
});


$('#form1').submit(function() {
    //Start with false to hide specific div tags
    var err = false;
    // Hide the Main content
    hideMain();

    // Reset the previously highlighted form elements
    stateLabelVar.removeClass(MISSING); 
    whatLabelVar.removeClass(MISSING);              
    inputMapVar.each(function(index){              
      $(this).prev().removeClass(MISSING); 
    });

    // Perform form validation
    inputMapVar.each(function(index){  
    if($(this).val()==null || $(this).val()==EMPTY){  
        $(this).prev().addClass(MISSING);            
        err = true;
      }          
    });   
    if(stateVar.val()==NO_STATE){           
      stateLabelVar.addClass(MISSING);                     
      err = true;
    }                    
    // If validation fails, show Dialog content
    if(err == true){            
      showContentDialog();
      return false;
    }        

    // If validation passes, show Transition content
    showContentTransition();

    // Submit the form
    $.post("requestProcessor.php", form1Var.serialize(), function(data){
        //DB Validation goes here when we link to the Db
      confirmationVar.text(data);
      hideContentTransition();
      window.location="access.php";
    });        
    return false;      
});    



 function hideMain(){
    hdrMainVar.hide();
    contentMainVar.hide();
    ftrMainVar.hide();   
   }

  function showMain(){
    hdrMainVar.show();
    contentMainVar.show();
    ftrMainVar.show();
   }

   function hideContentTransition(){
    contentTransitionVar.hide();
   }      

   function showContentTransition(){
    contentTransitionVar.show();
   }  

  function hideContentDialog(){
    contentDialogVar.hide();
   }   

   function showContentDialog(){
    contentDialogVar.show();
   }

   function hideConfirmation(){
    hdrConfirmationVar.hide();
    contentConfirmationVar.hide();
    ftrConfirmationVar.hide();
   }  

   function showConfirmation(){
    hdrConfirmationVar.show();
    contentConfirmationVar.show();
    ftrConfirmationVar.show();
   } 


  </script>

如果有空字段，这将不允许提交表单。随意使用此代码并随心所欲地操作和使用它。正如你所看到的，我使用了一个 .php 文件，就像你一样，来处理用户的验证。