Php jQuery移动表单验证

我有一个移动网站，除了验证，一切都很好。基本上，我希望从用户那里获取值，然后在单独的页面（process.php）上处理它们。但是，在执行此操作之前，我需要检查以确保字段已填充。我已经研究了几种方法来实现这一点，但似乎没有一种有效。我现在有下面的代码。当我按下process按钮时，它会显示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>

$（文档）.ready（函数（）{
$（“#formL”）.validate（）；}）；
*项目：
过程

对于这样的小表单，我不想麻烦使用插件——它甚至与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;
    }
});

---

我遇到了与您相同的问题，我的表单现在已正确验证

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

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确认var=null；
var contentDialogVar=null；
var hdrconfimationvar=null；
var contentConfirmationVar=null；
var ftrconfimationvar=null；
var inputMapVar=null；
//常数
var MISSING=“MISSING”；
var-EMPTY=“”；
var NO_STATE=“ZZ”；

用户名*
密码*
必须同时填写用户名和密码才能授予访问权限。
已发送登录信息。请稍等。
$（文档）.ready（函数（）{
//从页面顶部分配全局变量
hdrMainVar=$（'hdrMain'）；
contentMainVar=$（“#contentMain”）；
ftrMain=$（“#ftrMain”）；
contentTransitionVar=$（“#contentTransition”）；
stateLabelVar=$（“#stateLabel”）；
whatLabelVar=$（“#whatLabel”）；
stateVar=$（“#state”）；
whatVar=$（'what'）；
form1Var=$（“#form1”）；
确认变量=$（“#确认”）；
contentDialogVar=$（“#contentDialog”）；
hdrconfimationvar=$（“#hdrconfimation”）；
contentConfirmationVar=$（“#contentConfirmation”）；
FTRConfimationvar=$（“#FTRConfimation”）；
inputMapVar=$（'input[name*=“\u r”]”）；
hideContentDialog（）；
hideContentTransition（）；
hideConfirmation（）；
}); 
$（'#按钮OK'）。单击（函数（）{
hideContentDialog（）；
showMain（）；
返回false；
});
$（'#form1'）。提交（函数（）{
//以false开头以隐藏特定的div标记
var-err=false；
//隐藏主要内容
hideMain（）；
//重置先前高亮显示的表单元素
stateLabelVar.removeClass（缺少）；
whatLabelVar.removeClass（缺失）；
inputMapVar.each（函数（索引）{
$（this.prev（）.removeClass（缺少）；
});
//执行表单验证
inputMapVar.each（函数（索引）{
如果（$（this.val（）==null | |$（this.val（）==EMPTY）{
$（this.prev（）.addClass）（缺少）；
错误=正确；
}          
});   
如果（stateVar.val（）=无状态）{
stateLabelVar.addClass（缺少）；
错误=正确；
}                    
//如果验证失败，则显示对话框内容
如果（err==true）{
showContentDialog（）；
返回false；
}        
//如果验证通过，则显示转换内容
showContentTransition（）；
//提交表格
$.post（“requestProcessor.php”，form1Var.serialize（），函数（数据）{
//当我们链接到数据库时，数据库验证在这里进行
确认变量文本（数据）；
hideContentTransition（）；
window.location=“access.php”；
});        
返回false；
});    
函数hideMain（）{
hdrMainVar.hide（）；
contentMainVar.hide（）；
ftrMainVar.hide（）；
}
函数showMain（）{
hdrMainVar.show（）；
contentMainVar.show（）；
ftrMainVar.show（）；
}
函数hideContentTransition（）{
contentTransitionVar.hide（）；
}      
函数showContentTransition（）{
contentTransitionVar.show（）；
}  
函数hideContentDialog（）{
contentDialogVar.hide（）；
}   
函数showContentDialog（）{
contentDialogVar.show（）；
}
函数hideConfirmation（）{
hdrconfimationvar.hide（）；
contentConfirmationVar.hide（）；
ftrconfimationvar.hide（）；
}  
函数showConfirmation（）{
hdrconfimationvar.show（）；
contentConfirmationVar.show（）；
ftrconfimationvar.show（）；
} 

---

如果存在空字段，则不允许提交表单。您可以随意使用这段代码，随心所欲地操作和使用它。正如您所见，我和您一样使用了一个.php文件来处理用户的验证。

谢谢您的回复。似乎无法使上述各项发挥作用。我应该把这个代码放在哪里？我有一个index.php文件，其中包含指向#first（page）、#second和#third的内部链接。我要验证的表单在第三页。然后从外部链接到process.php，后者将值写入数据库。谢谢。+1简单干净！比jquery.validate.js好得多，因为它不适用于

data role=“dialog”

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