У меня есть мобильный сайт, и все работает нормально, за исключением проверки. В основном я ищу, чтобы принимать значения от пользователя, а затем обрабатывать их на отдельной странице (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; } });
Вы можете попробовать / беспорядок здесь.
Я столкнулся с той же проблемой, что и у меня, теперь у меня есть правильная форма проверки.
Следующее – это то, что я сделал с 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, как и вы, для обработки проверки пользователя.