Javascript表单验证返回false，但表单仍然提交答案

【问题标题】：Javascript form validation returning false, but the form still submitsJavascript表单验证返回false，但表单仍然提交
【发布时间】：2013-06-20 05:04:28
【问题描述】：

我正在尝试使用 javascript 验证表单。该函数被正确调用并显示警报，但在我单击警报后仍提交表单。该函数永远不会返回 false。我以前看过这个问题，但我还没有看到有效的答案。我在其中使用了一些 JQuery 移动设备，这可能是问题所在。我曾尝试更改按钮输入 type=button，但这甚至不会提交表单。

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>

【问题讨论】：

尽量避免内联JS。您可以改用 JQuery submit 事件。它适用于 JQuery Mobile。
它是否显示您的警报？
我会试试的。无论我进行什么更改，这都不起作用。
你的代码适合我
我确实收到了警报。不过，它仍然会提交表单。

标签： javascript html jquery-mobile

【解决方案1】：

尝试在 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();
            }
        });
    });

【讨论】：

我添加了 return true 并且它仍然提交表单。我将尝试 Jquery 提交。这个网站的 Jquery 移动部分一定有什么不好的地方。
这行得通。我尝试了其他所有方法，这是唯一有效的方法。我怀疑它与 Jquery 移动组件有关。

【解决方案2】：

最好在提交之前验证表单。对按钮单击进行验证。

或者更好的是，使用单选按钮而不是复选框，因为您只想允许选择一个选项：

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

【讨论】：

单选按钮...看来我应该想到这一点。不过，当我想验证空白输入的表单时，我仍然会遇到这个问题。表单验证似乎不起作用。
好吧，如果您使用单选按钮，则不再需要只检查一个选项的验证。
我尝试了单选按钮，但我仍然可以选择这两个选项。
哇...确保它们具有相同的name，否则将无法正常工作。
同名。这就是我所缺少的。

【解决方案3】：

下面的代码运行良好：

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

【讨论】：

我已经在 Mac 和 PC 上测试了 Chrome 和 Safari。他们都不为我工作。这里正在发生其他事情。
href 有什么可以调用弹出窗口的吗？我刚刚将该代码添加到我的问题中。

【解决方案4】：

试试这个，我希望这是你要找的：

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

我正在使用您提供的相同 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>

【讨论】：

我还在研究这个。我在 Chrome 和 Safari 以及 Mac 和 PC 上都试过了。这两种选择都不适合我。这很奇怪。