disable jquery mobile form button action

Question

Possible Duplicate:
AJAX Form Submission in jQuery Mobile

I have a form and I use jQuery to check and validate the form, so that, if the form is empty, it won't submit the form and will just alert "Please fill in all the fields".

function doShowError( eForm, sField, iInd, sError ) {
    var $Field = $( "[name='" + sField + "']", eForm ); // single (system) field
    if( !$Field.length ) // couple field
        $Field = $( "[name='" + sField + '[' + iInd + ']' + "']", eForm );
    if( !$Field.length ) // couple multi-select
        $Field = $( "[name='" + sField + '[' + iInd + '][]' + "']", eForm );
    if( !$Field.length ) // couple range (two fields)
        $Field = $( "[name='" + sField + '[' + iInd + '][0]' + "'],[name='" + sField + '[' + iInd + '][1]' + "']", eForm );

    //alert( sField + ' ' + $Field.length );

    $Field.parents('div:first').addClass( 'error' );

    $Field
    .parents('div:first')
        .addClass( 'error' )
        .children( 'img.warn' )
            .attr('float_info', sError)
            //.show()
            ;
}

Right now, the problem is that, whenever I click on the submit button, I get redirected to the page (which is supposed to be the user-panel ) with just a text saying:

undefined

How can I disable what the jQuery button do by default?

Edit: My event fires and the message shows , but I'm still redirected to the URL defined in the form's attribute action.

Hi! Where do you call your function `doShowError`? Could you provide more code? — Littm, Oct 14 '12 at 22:16

Littm · Accepted Answer · 2012-10-14T22:36:17.073

In your function validating your form's fields (which should be called on submit event), you need to return true in the case where the validation is successful, and false otherwise.

In this way, you can prevent the form from navigating to the URL defined in the action attribute when the validation fails.

You may try something like this:

$(function() {
    $("#your_form").submit(function() {
        // Define `sField`
        var sField = // SOMETHING

        // Define `iInd`
        var iInd = // SOMETHING

        // Define `sError`
        var sError = // SOMETHING

        return doShowError($(this), sField, iInd, sError);
    });
});

where #your_form is the ID of your form and doShowError() is the function verifying your form's input, returning true if all the fields are ok, and else in the opposite case.

In this case, you may need to modify your function doShowError so that it would return true or false as described above. You could change it to something like this:

function doShowError( eForm, sField, iInd, sError ) {

    // `haserror`: boolean output which will equal `true` 
    // if all the fields are correct, and `else` otherwise
    var haserror = true;

    var $Field = $( "[name='" + sField + "']", eForm ); // single (system) field
    if( !$Field.length ) { // couple field
        $Field = $( "[name='" + sField + '[' + iInd + ']' + "']", eForm );
        haserror = false;
    }
    if( !$Field.length ) { // couple multi-select
        $Field = $( "[name='" + sField + '[' + iInd + '][]' + "']", eForm );
        haserror = false;
    }
    if( !$Field.length ) { // couple range (two fields)
        $Field = $( "[name='" + sField + '[' + iInd + '][0]' + "'],[name='" + sField + '[' + iInd + '][1]' + "']", eForm );
        haserror = false;
    }

    //alert( sField + ' ' + $Field.length );

    $Field.parents('div:first').addClass( 'error' );

    $Field.parents('div:first')
        .addClass( 'error' )
        .children( 'img.warn' )
            .attr('float_info', sError)
            //.show()
            ;

    return haserror;
}

thanks for your response , but still facing the same problem .. what my code should do is stay on the same page and just alert the error , but now i get to the action page , not only it but it has only `undefined` — Hussein Nazzal, Oct 15 '12 at 08:26

disable jquery mobile form button action

1 Answers1