Validation JavaScript not work in jQuery mobile

Question

I try to validate user's input from client side using JavaScript but it not work.

First I write a validation in JavaScript file like this:

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

    }
};

Then I call it when user submit a form like this:

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

And in HTML file I have a form like this:

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

But I don't know why when I submit a form, it go straight to PHP file without checking user's input. Can someone help me for resolving this issue, thanks.

Answer 1

You are not preventing the form from being submitted, and as the form action attribute is action="uusivaraus.php" , you are being redirected to the .php file when it submits. You need to prevent the default form submission before calling your function:

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

Here is a working example .