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文件，就像你一樣，來處理用戶的驗證。