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

Question

I am trying to validate a form with javascript. 我正在尝试使用javascript验证表单。 The function gets called properly and the alert is displayed, but the form is still submitted after I click ok on the alert. 正确调用该函数并显示警报，但在警报单击“确定”后仍然提交表单。 The function never returns false. 该函数永远不会返回false。 I have seen this question asked before, but I have not seen an answer that worked. 我之前看过这个问题，但我没有看到一个有效的答案。 I am using some JQuery mobile in this and that may be the problem. 我在这里使用一些JQuery移动，这可能是问题。 I have tried to change the button input type=button, but that would not even submit the form. 我试图更改按钮输入类型=按钮，但这甚至不提交表单。

The javascript function is: 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>

The form is: 表格是：

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

I am adding the href that calls up the popup for the form. 我正在添加调用表单弹出窗口的href。 I don't know if that has anything to do with this problem. 我不知道这与这个问题有什么关系。 I keep hearing that my code is being replicated and it is working just fine. 我一直听说我的代码正在复制，它工作得很好。 I can't get it to work and I want to represent the issue in its entirety. 我无法让它工作，我想完整地代表这个问题。

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

Answer 1

Try adding return true at last line of validateInventoryform() and remove extra "/" in this 尝试在validateInventoryform（）的最后一行添加return true，并在此处删除额外的“/”

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

try Jquery to bind event 尝试Jquery绑定事件

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

Answer 2

It's better if you validate the form before it is submitted. 如果您在提交表单之前验证表单会更好。 Do the validation on button click. 点击按钮进行验证。

Or better yet, use radio buttons instead of checkboxes since you only want to allow one option to be selected: 或者更好的是，使用单选按钮而不是复选框，因为您只想选择一个选项：

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

Answer 3

Below coding is working perfectly: 以下编码工作完美：

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

Answer 4

Try this one and I hope this is what you are looking for: 尝试这个，我希望这是你正在寻找的：

Html: 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 使用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/ http://jsfiddle.net/8aapR/

Answer 5

I am using same html and script code provided by you and tested in all browser and it is working fine. 我正在使用您提供的相同的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>

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

问题描述

5 个解决方案

解决方案1
0 已采纳 2013-06-20 05:15:17

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

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

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

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

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

问题描述

5 个解决方案

解决方案1 0 已采纳 2013-06-20 05:15:17

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

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

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

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

解决方案1
0 已采纳 2013-06-20 05:15:17

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

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

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

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