Question

I’m trying to Validate my form before it’s being sent to the server. I tried couple of J/S plugins for regular validation and none of them seem to work.

I tried looking for getJSON validation method with jquerymobile but haven’t seen anything related. Is using $.getJSON the right approach?

Here is a fiddle http://jsfiddle.net/Kimbley/kMsXK/2/

Thanks 😀

Code Here:

    function mAddBusiness() {
        $.getJSON("API.php", {
            command: "addBusiness",
            bsnName: $("#mBsnName").attr("value"),
            bsnCity: $("#mBsnCity").attr("value"),
            bsnAddress: $("#mBsnAddress").attr("value"),
            bsnMenu: $("#mBsnMenu").attr("value"),
            bsnLat: bsnLat,
            bsnLong: bsnLong
        },
            function () {
            $("#mBsnName").attr("value", "");
            $("#mBsnCity").attr("value", "");
            $("#mBsnAddress").attr("value", "");
            $("#mBsnMenu").attr("value", "");
            alert("Business was added successfully ");
        }
            );
    }

Answer 1

Inside your mAddBusiness() function you can just do your validation before sending the AJAX request. Something like:

function mAddBusiness() {
    if ($("#mBsnName").val() !== '') {
        $.getJSON("API.php", {
            command: "addBusiness",
            bsnName: $("#mBsnName").val(),
            bsnCity: $("#mBsnCity").val(),
            bsnAddress: $("#mBsnAddress").val(),
            bsnMenu: $("#mBsnMenu").val(),
            bsnLat: bsnLat,
            bsnLong: bsnLong
            },
            function () {
                $("#mBsnName").val("");
                $("#mBsnCity").val("");
                $("#mBsnAddress").val("");
                $("#mBsnMenu").val("");
                alert("Business was added successfully ");
            }
        );
    } else {
        alert('Please enter a business name.');
    }
}

Note that you will have to add the data-ajax="false" attribute to the <form> tag in question so that jQuery Mobile does not attempt to submit the form itself.

Also, note that $('input').attr('value') will not return the current value of an input, it will return the initial value before the user had a chance to input anything. To get the current value of a form input, use .val(): http://api.jquery.com/val