驗證JavaScript在jQuery mobile中不起作用

Question

我嘗試使用JavaScript驗證用戶從客戶端輸入的內容，但它不起作用。

首先，我寫這樣的JavaScript文件驗證：

var main = function checkLomake() { 
    try { 
     var etu = $("#etu").val(); 
     var suku = $("#suku").val(); 
     var sposti = $("#sposti").val(); 
     var puh = $("#puhelin").val(); 
     var osoite = $("#osoite").val(); 

     var etuVirhe = checkNimi(etu); 
     var sukuVirhe = checkNimi(suku); 
     var spostiVirhe = checkSposti(sposti); 
     var puhVirhe = checkPuh(puh); 
     var osoiteVirhe = checkOsoite(osoite); 

     if (etuVirhe === 1 && sukuVirhe === 1 && spostiVirhe === 1 && puhVirhe === 1 && osoiteVirhe === 1) 
      alert(getVirhe(1)); 
     return false; 
     else { 
      if (etuVirhe !== 0) { 
       alert(getVirhe(checkNimi(etu))); 

      } 
      if (sukuVirhe !== 0) { 
       alert(getVirhe(checkNimi(suku))); 

      } 
      if (osoiteVirhe !== 0) { 
       alert(getVirhe(checkOsoite(osoite))); 

      } 
      if (puhVirhe !== 0) { 
       alert(getVirhe(checkPuh(puh))); 

      } 
      if (spostiVirhe !== 0) { 
       alert(getVirhe(checkSposti(sposti))); 
      } 
      return false; 
     } 

    } catch (e) { 

    } 
}; 

然後我把它當用戶提交表單是這樣的：

$(document).ready(function() { 
    $("#form-lomake").on("submit",function() { 
     return main(); 
    }); 
}); 

而在HTML文件中我有這樣一種形式這個：

<form id="form-lomake" name="form-lomake" action="uusivaraus.php" method="post"> 
    <div data-role="collapsible" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" id="coll-lomake"> 
     <h1>Täytä tiedot</h1> 

     <div class="ui-field-contain"> 
      <label for="etu">Etunimi</label> 
      <input type="text" id="etu" placeholder="etunimi" name="etu" data-clear-btn="true" /> 
      <!--<p><?php print($asiakas->getVirheTeksti($nimiVirhe)); ?></p>--> 
     </div> 
     <div class="ui-field-contain"> 
      <label for="suku">Sukunimi</label> 
      <input type="text" id="suku" placeholder="sukunimi" name="suku" data-clear-btn="true" /> 
      <!--<p><?php print($asiakas->getVirheTeksti($nimiVirhe)); ?></p>--> 
     </div> 
     <div class="ui-field-contain"> 
      <label for="osoite">Osoite</label> 
      <input type="text" id="osoite" placeholder="osoite" name="osoite" data-clear-btn="true" /> 
      <!--<p><?php print($asiakas->getVirheTeksti($osoiteVirhe)); ?></p>--> 
     </div> 
     <div class="ui-field-contain"> 
      <label for="sposti">Email</label> 
      <input type="text" id="sposti" placeholder="sähköposti" name="sposti" data-clear-btn="true" /> 
      <!--<p><?php print($asiakas->getVirheTeksti($spostiVirhe)); ?></p>--> 
     </div> 
     <div class="ui-field-contain"> 
      <label for="puhelin">Puhelin</label> 
      <input type="text" id="puhelin" placeholder="puhelin numero" name="puhelin" data-clear-btn="true" /> 
      <!--<p><?php print($asiakas->getVirheTeksti($puhVirhe)); ?></p>--> 
     </div> 
     <div class="ui-field-contain"> 
      <textarea rows="10" cols="10" placeholder="lisätietoja" name="lisatieto"></textarea> 
     </div> 
     <div class="ui-grid-b"> 
      <div class="ui-block-a"> 
       <input type="reset" value="Peruu" id="btn-peruuta" name="peruuta" class="ui-btn ui-corner-all ui-shadow" data-icon="delete" /> 
      </div> 
      <div class="ui-block-b"></div> 
      <div class="ui-block-c"> 
       <input type="submit" value="Varaa" id="btn-varaa" name="varaa" class="ui-btn ui-corner-all ui-shadow ui-btn-active" data-icon="check" data-iconpos="right" /> 
      </div> 
     </div> 

    </div> 
</form> 

但是我不知道爲什麼當我提交表單時，它直接進入PHP文件而沒有檢查用戶的輸入。有人可以幫我解決這個問題，謝謝。

Answer 1

您無法阻止提交表單，並且由於表單action屬性爲action="uusivaraus.php"，因此您在提交時將被重定向到.php文件。你需要阻止默認表單提交您的調用函數之前：

$(document).ready(function() { 
$("#form-lomake").on("submit",function (e) { 
    e.preventDefault(); //this will prevent the default submission 
    return main(); 
}); 

Here is a working example。