javascript - 验证 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 .