Question

I have a form which on submit should see if the text area has no text or the place holder text.

iif it does it shouldn’t submit it. something like validation. I am not able to stop the form submission.

$(document).ready(function () {
    var options = {
        target: '.user-status',
        // target element(s) to be updated with server response 
        beforeSubmit: showRequest,
        // pre-submit callback 
        success: showResponse,
        // post-submit callback 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        resetForm: true // reset the form after successful submit 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    };

    $('#updateStatus').submit(function () {
        $(this).ajaxSubmit(options);
        return false; // prevent a new request
    });

    function showRequest(formData, jqForm, options) {

        var textbox = $('#StatusMessageMessage').val();
        if ((textbox == '') || (textbox == "What have you been eating ?")) {
            alert(text);
            return false;
        } else {
            $('#StatusMessageMessage').attr('disabled', true);
        }

    }

    function showResponse(responseText, statusText, xhr, $form) {
        $('#StatusMessageMessage').attr('disabled', false);
    }

    statusMEssagebox();


});



function statusMEssagebox() {
    var textholder = $('#StatusMessageMessage').val();

    $('#StatusMessageMessage').focus(function () {
        if ($(this).val() == textholder) $(this).val("");

        $(this).animate({
            "height": "48px",
        }, "fast");
        $('.share').slideDown("fast");
        $(this).TextAreaExpander(48, 75);

    });

    $('#StatusMessageMessage').blur(function () {
        if ($(this).val() == "") {
            $(this).val(textholder);
            $('.share').slideUp("fast");
            $(this).animate({
                "height": "18px",
            }, "fast");
        }
    });
}

Answer 1

I see that you are using the jquery form plugin to ajaxify your form. There’s an example in the documentation illustrating how to achieve this in an elegant way. You don’t need to subscribe for the .submit event of the form and manually submit it using .ajaxSubmmit. You could simply try this:

$(function() {
    $('#updateStatus').ajaxForm({ 
        beforeSubmit: function(formData, jqForm, options) {
            var value = $('#StatusMessageMessage').val();
            if (value == '' || value == 'What have you been eating ?') {
                return false;
            }
        }
    });
});