验证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。