堆棧內存溢出
  簡體   English   中英

Javascript表單驗證返回false，但表單仍然提交

[英]Javascript form validation returning false, but the form still submits

 原文  2013-06-20 05:04:28  8   5    javascript/ html/ jquery-mobile

問題描述

我正在嘗試使用javascript驗證表單。 正確調用該函數並顯示警報，但在警報單擊“確定”后仍然提交表單。 該函數永遠不會返回false。 我之前看過這個問題，但我沒有看到一個有效的答案。 我在這里使用一些JQuery移動，這可能是問題。 我試圖更改按鈕輸入類型=按鈕，但這甚至不提交表單。

javascript函數是： 

<script>
function validateInventoryform()
{
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
 {
alert("You may only choose one option to check customer inventory");
return false;
 }
}
</script>

表格是： 

<div data-role="popup" id="popupQuery_inventory" data-theme='a' > 
  <div style="padding:10px 20px;">
    <form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >           
     <h3>Enter SKU</h3>
      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend>Choose Input Type:</legend>
          <input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
          <label for="sku_checkbox">SKU</label>
          <input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
         <label for="entire_checkbox">Entire Inventory</label>
         </fieldset>

            <label for="sku" class="ui-hidden-accessible">SKU:</label>
            <input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
            <input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
           <button type="submit" data-theme="b"/>Submit</button>
        </form>    
   </div>
</div>

我正在添加調用表單彈出窗口的href。 我不知道這與這個問題有什么關系。 我一直聽說我的代碼正在復制，它工作得很好。 我無法讓它工作，我想完整地代表這個問題。 

<ul data-role="listview" data-inset="true" data-theme="b">
    <li><a href="#popupCustomer_alert" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Add Customer Alert</a></li>
    <li><a href="#popupQuery_inventory" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Query Inventory</a></li>
    <li><a href="#popupEdit_customer" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Edit Customer</a></li>
    <li><a href="return_qr_code.php" >Get QR Code</a></li>
    <li><a href="#popupDownload_inventory" data-rel="popup" data-position-to="origin" data-inline="true" data-transition="pop" >Download Inventory</a></li>
</ul>

5 個解決方案

解決方案1
 0 已采納  2013-06-20 05:15:17

嘗試在validateInventoryform（）的最后一行添加return true，並在此處刪除額外的“/” 

 <button type="submit" data-theme="b"/>Submit</button>

嘗試Jquery綁定事件 

$(function () {
        $('#form').bind('submit', function (e) {
            var isValid = true;
            if (!isValid) {
                e.preventDefault();
            }
        });
    });

解決方案2
 0  2013-06-20 05:18:56

如果您在提交表單之前驗證表單會更好。 點擊按鈕進行驗證。

或者更好的是，使用單選按鈕而不是復選框，因為您只想選擇一個選項： 

<input type="radio" data-theme="a" name="input_type" id="sku_checkbox" value="SKU" />
<input type="radio" data-theme="a" name="input_type" id="entire_checkbox" value="Entire Inventory" />

解決方案3
 0  2013-06-20 05:32:16

以下編碼工作完美： 

<html>
    <head>
        <title>checkbox</title>
        <script type="text/javascript">
            function validateInventoryform()
 {
var sku=document.getElementById('sku_checkbox');
var entire=document.getElementById('entire_checkbox');
var inv=document.getElementById('inv');
if ((sku.checked==true && entire.checked==true))
 {
alert("You may only choose one option to check customer inventory");
return false;
 }
}
        </script>
    </head>
<body>
    <div data-role="popup" id="popupQuery_inventory" data-theme='a' > 
  <div style="padding:10px 20px;">
    <form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >           
     <h3>Enter SKU</h3>
      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend>Choose Input Type:</legend>
          <input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
          <label for="sku_checkbox">SKU</label>
          <input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
         <label for="entire_checkbox">Entire Inventory</label>
         </fieldset>

            <label for="sku" class="ui-hidden-accessible">SKU:</label>
            <input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
            <input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
           <button type="submit" data-theme="b"/>Submit</button>
        </form>    
   </div>
</div>

</body>


</html>

解決方案4
 0  2013-06-20 06:53:46

嘗試這個，我希望這是你正在尋找的：

HTML： 

<div data-role="popup" id="popupQuery_inventory" data-theme='a' > 
  <div style="padding:10px 20px;">
    <form action="inventory_inquiry.php" method="get" id="inv">           
     <h3>Enter SKU</h3>
      <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
        <legend>Choose Input Type:</legend>
            <input type="radio" data-theme="a" name="input_type" id="sku_checkbox" value="SKU" />SKU
            <input type="radio" data-theme="a" name="input_type" id="entire_checkbox" value="Entire Inventory" />Entire Inventory
         </fieldset>

            <label for="sku" class="ui-hidden-accessible">SKU:</label>
            <input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a" />
            <input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
            <input type="button" data-theme="b" value="Submit" id="submitBtn" />
        </form>    
   </div>
</div>

使用Javascript 

$("#submitBtn").on("click", function(event){
    //Your validation code here
    if($("#sku").val() == ""){
        alert("Item sku is null")
    } else {
        // Submit event if everything is okey
        $("#inv").submit();
    }
});

http://jsfiddle.net/8aapR/

解決方案5
 0  2013-06-20 10:57:10

我正在使用您提供的相同的HTML和腳本代碼，並在所有瀏覽器中進行測試，它工作正常。 

<html>
    <head>
        <script>
    function validateInventoryform()
    {
    var sku=document.getElementById('sku_checkbox');
    var entire=document.getElementById('entire_checkbox');
    var inv=document.getElementById('inv');
    if ((sku.checked==true && entire.checked==true))
     {
    alert("You may only choose one option to check customer inventory");
    return false;
     }
    }
    </script>
    </head>
    <body>
    <div data-role="popup" id="popupQuery_inventory" data-theme='a' > 
      <div style="padding:10px 20px;">
        <form action="inventory_inquiry.php" method="get" id="inv" onsubmit="return validateInventoryform()" >           
         <h3>Enter SKU</h3>
          <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
            <legend>Choose Input Type:</legend>
              <input type="checkbox" data-theme="a" name="sku_checkbox" id="sku_checkbox" value="off" checked="checked">
              <label for="sku_checkbox">SKU</label>
              <input type="checkbox" data-theme="a" name="entire_checkbox" id="entire_checkbox" value="off">
             <label for="entire_checkbox">Entire Inventory</label>
             </fieldset>

                <label for="sku" class="ui-hidden-accessible">SKU:</label>
                <input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
                <input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
               <button type="submit" data-theme="b"/>Submit</button>
            </form>    
       </div>
    </div>
    </body>
    </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript表單驗證仍在“ False”上提交表單 javascript確認（取消）返回false時仍提交表單 盡管javascript驗證返回false並顯示警報消息，但表單仍提交 JavaScript驗證失敗，但表單仍提交 即使驗證返回false，表單仍會提交 即使JavaScript驗證返回false，JSP表單仍會提交 表單驗證失敗但仍然提交 JavaScript表單驗證不返回錯誤 javascript確認（取消）仍在使用return false時提交表單？ Laravel-Javascript | 即使返回假也提交表單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM