Javascript 폼 유효성 검사가 false를 반환하지만 양식이 여전히 제출됩니다.

javascript로 양식의 유효성을 검사하려고합니다. 함수가 제대로 호출되고 경고가 표시되지만 경고의 ok를 클릭하면 양식이 계속 제출됩니다. 이 함수는 결코 false를 반환하지 않습니다. 전에이 질문을 보았습니다. 그러나 나는 그 대답을 보지 못했습니다. 이 일부 JQuery 모바일 사용하고 그 문제가 될 수 있습니다. 버튼 입력 유형 = 버튼을 변경하려했지만 양식을 제출하지 않았습니다.Javascript 폼 유효성 검사가 false를 반환하지만 양식이 여전히 제출됩니다.

자바 스크립트 함수는 다음과 같습니다

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

양식은 다음과 같습니다 내가 형태의 팝업을 호출하는 HREF를 추가하고

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

. 그게이 문제와 관련이 있는지 나는 모른다. 나는 내 코드가 복제되고 있다는 것을 계속 듣고 있으며 잘 작동하고있다. 나는 그것을 작동시킬 수 없으며 그 문제 전체를 대표하고 싶다. validateInventoryform (의 마지막 줄에서 진정한) 및 추가 제거

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

출처

2013-06-20 attentionjay

인라인 JS를 피하십시오. 대신 JQuery'submit' 이벤트를 사용할 수 있습니다. 그것은 JQuery 모바일과 함께 작동합니다. – sdespont

알림이 표시됩니까? –

나는 그것을 시도 할 것이다. 이것은 내가 어떤 변화를 했든 상관없이 작동하지 않습니다. – attentionjay

를 추가해보십시오 반환 "/"이

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

에서 이벤트

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

출처

2013-06-20 05:15:17

return true를 추가했지만 여전히 양식을 제출합니다. 나는 Jquery가 제출할 것을 시도 할 것이다. 이 사이트의 Jquery 모바일 부분에서 잘 작동하지 않는 것이 있어야합니다. – attentionjay

이것은 효과가 있습니다. 나는 그 밖의 모든 것을 시도했는데 이것이 효과가있는 유일한 것입니다. 나는 그것이 Jquery 모바일 컴포넌트와 관련이 있다고 생각한다. – attentionjay

유효성을 검사하는 경우 그것은 더 나은에게 바인딩 jQuery를 시도 양식을 제출하기 전에. 버튼 클릭시 유효성 검사를 수행하십시오. 코딩 아래

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

출처

2013-06-20 05:18:56

라디오 버튼 ...내가 그 생각을해야만하는 것처럼 보입니다. 하지만 빈 입력에 대한 양식의 유효성을 검사하려는 경우 문제가 계속 발생합니다. 폼 유효성 검사는 작동하지 않는 것 같습니다. – attentionjay

라디오 단추를 사용하면 하나의 옵션 만 검사하는 유효성 검사가 더 이상 필요하지 않습니다. –

라디오 버튼을 시도했지만 두 옵션을 모두 선택할 수 있습니다. – attentionjay

이 완벽하게 작동한다 :

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

출처

2013-06-20 05:32:16 karthi

Chrome 및 Safari 용 Mac 및 PC에서이 기능을 테스트했습니다. 둘 다 나를 위해 일하지 않았다. 여기 뭔가가 일어나고 있습니다. – attentionjay

팝업을 호출하는 href가있을 수 있습니까? 방금 제 질문에이 코드를 추가했습니다. – attentionjay

이 하나를 시도하고 만 선택하는 하나의 옵션을 허용 할 이후

또는 더 나은 아직 대신 체크 박스의 라디오 버튼을 사용하여

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>

자바 스크립트

$("#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/

출처

2013-06-20 06:53:46

나는 모든 브라우저에서 귀하가 제공하고 테스트 같은 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>

출처

2013-06-20 10:57:10 Amit

나는 아직도 이것을 연구 중이다. Chrome과 Safari, Mac과 PC에서 모두 시험해 보았습니다. 어느 옵션도 나를 위해 작동하지 않습니다. 이건 이상해. – attentionjay

Javascript 폼 유효성 검사가 false를 반환하지만 양식이 여전히 제출됩니다.

답변

관련 문제