logo标签列表

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

javascripthtmljquery-mobile
3
我正在尝试使用JavaScript验证表单。该函数被正确调用并显示了警报，但在我点击警报的确定后，表单仍然会被提交。该函数从未返回false。我曾看到过这个问题的提问，但我没有看到有效的答案。在此中使用了一些JQuery移动，这可能是问题所在。我尝试更改按钮输入类型为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。 - sdespont
它是否显示了你的警报？ - Naresh J
我会尝试的。无论我做出什么更改，它都不起作用。 - attentionjay
你的代码对我来说运行良好。 - Ganesh Rengarajan
我确实收到了警报，但它仍然提交了表单。 - attentionjay
我正在使用Safari，但在Chrome中得到了相同的结果。 - attentionjay
5个回答
0

尝试在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 submit。这个网站的Jquery mobile部分肯定有些问题。 - attentionjay
这个可行。我尝试了其他所有方法，只有这个可行。我怀疑这与Jquery移动组件有关。 - attentionjay
0

在提交表单之前进行验证会更好。在按钮点击时进行验证。

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

<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" />
单选按钮...看起来我应该想到这个。但是当我想要验证表单中的空白输入时，我仍然会遇到问题。表单验证似乎无法正常工作。 - attentionjay
如果您使用单选按钮，您就不再需要验证只选择一个选项的检查。 - Ben Gulapa
我尝试了单选按钮，但仍然可以选择两个选项。 - attentionjay
哦... 确保它们具有相同的 name，否则它将无法工作。 - Ben Gulapa
相同的名称。这就是我所缺少的。 - attentionjay
是的，现在可以工作了。我可以绕过这部分的验证。谢谢。 - attentionjay
0

以下代码完美运行：

<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，但都没有成功。这里发生了其他的事情。 - attentionjay
调用弹出窗口的 href 是否有问题？我刚刚将该代码添加到我的问题中。 - attentionjay
0

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

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/

0

我正在使用您提供的相同的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>
我仍在研究这个问题。我已经在Mac和PC上的Chrome和Safari浏览器中尝试了两种选项，但都无法正常工作。这很奇怪。 - attentionjay
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接